/* The meeting screen: header, score, turns, cues, dock.
   Loaded only by the two pages that can show it. Every value is a token; the four
   fixes plan 019 asks for are marked where they land.

   Blur budget (plan 019, "Fixes to carry from the mock"): the dock is chrome and gets
   it; the current turn is the one piece of content that does, because the mock's whole
   proposal-3 idea is the playing line lifting off the page. The cue sheet and the
   popovers are `.frost`, not `.glass`, so two blurs never nest. */

/* Everything on this screen stops above the dock. `--dock-h` is what the dock is
   actually standing on -- its own height plus the gap under it -- measured by
   components/dock.js and written onto the root while the screen is up; the fallback is
   the desktop figure, so the first frame is already clear. The gutter on top of it is
   what makes the last line *readable* rather than merely uncovered. */
.meeting{padding-bottom:calc(var(--dock-h,80px) + var(--sp-5))}

/* ------------------------------------------------------------------------ header */
/* FIX (plan 028 finding B1): the trailing padding was `sp-4`. The header is the one
   block on this screen that every tab is read past, so the last four pixels of it are
   worth more under the tabs than above the rule. */
.mhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px var(--sp-5);
  align-items:end;padding-block:2px var(--sp-3);border-bottom:1px solid var(--line)}
.mhead-main{min-width:0}
.mhead h1{font-size:26px;line-height:32px;letter-spacing:-.02em;font-weight:500;
  display:flex;align-items:center;gap:10px;min-width:0}
/* FIX (plan 026 finding 5): this was `white-space:nowrap` with an ellipsis, so at
   400 px "Meeting Sep 13, 2026 at 10:42 PM" -- the name every untitled recording gets
   -- was cut to "Meeting Sep 13, 2026 at 10". A title is the one string on the screen
   that must be readable whole, so it wraps instead: `balance` keeps the lines an even
   length rather than leaving one word alone on the second, and the clamp stops a
   pasted paragraph from becoming the whole page. It is still the rename button. */
.mhead h1 .rename-open{all:unset;cursor:text;min-width:0;border-radius:var(--r-2);
  white-space:normal;overflow-wrap:break-word;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.mhead h1 .rename-open:hover{box-shadow:0 1px 0 var(--line-2)}
.mhead h1 .field.rename{height:34px;font:500 22px/30px var(--sans);letter-spacing:-.02em;
  max-width:min(560px,100%)}
/* The star is the mock's accent dot, not a five-pointed star: one shape, two states. */
.star{all:unset;cursor:pointer;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--line-2);transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.star:hover{background:var(--ink-3)}
.star.on{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mhead .meta{display:flex;flex-wrap:wrap;gap:6px var(--sp-4);font-size:13px;
  color:var(--ink-2);align-items:center;margin-top:6px}
.mhead-aside{display:flex;align-items:center;gap:var(--sp-2);justify-self:end}
/* FIX (plan 028 finding B1): `.who` used to be a grid item of `.mhead` with
   `grid-column:1/-1`, i.e. a row of its own at every width -- 36 px of header before a
   word of the recording. It now lives inside `.meta` (components/meeting.js) and is
   just another item on that wrapping line; `flex-basis:100%` is what still gives it a
   row of its own when the line is too narrow to carry both (see the 900 px rule
   below). */
.mhead .who{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;min-width:0}
@media (min-width:900px){.mhead .who{flex-basis:auto}}
.whochip{position:relative;display:inline-flex}
.whochip .chip.un{border-style:dashed}
.whochip .chip em.me{font-style:normal;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-t)}

/* status pill: the one place the page says what the pipeline is doing */
.pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;
  border-radius:99px;border:1px solid var(--line);background:var(--glass-2);
  font:500 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-t);white-space:nowrap}
.pill.bad{color:var(--rec-t)}
.pill .beat{width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:breathe 2.4s var(--ease) infinite}

/* tags, inline in the meta line */
.tagbar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tagbar .chip .x{all:unset;cursor:pointer;display:grid;place-items:center;
  width:14px;height:14px;border-radius:var(--r-1);margin-right:-3px;color:var(--ink-2)}
.tagbar .chip .x:hover{color:var(--ink)}
.tagbar .chip.add{cursor:pointer;color:var(--ink-2);border-style:dashed}
.tagbar .chip.add:hover{color:var(--ink)}
.tagbar .tagfield{height:26px;width:130px;font-size:12px}

/* popovers: speaker identity, and the export menu */
/* Opaque, not frosted: a menu you can read the transcript through is a menu you
   cannot read. `.frost` is kept for its hairline and highlight. */
.pop{position:absolute;top:calc(100% + 6px);left:0;z-index:6;width:min(280px,80vw);
  display:grid;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-4);
  background:var(--surface);box-shadow:inset 0 1px 0 var(--hl),var(--shadow-2)}
.popl{display:grid;gap:1px;max-height:190px;overflow:auto}
.popl button{all:unset;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);
  padding:5px 6px;border-radius:var(--r-2);font-size:13px}
.popl button:hover{background:var(--glass-2)}
.popl .dot{width:7px;height:7px;border-radius:50%;background:var(--h,var(--ink-3));flex:none}
.popl span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.popl em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-t)}
.popl .mono{font-size:11px;color:var(--ink-2)}
.popfoot{display:flex;justify-content:flex-end;gap:var(--sp-2)}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu .pop{left:auto;right:0;width:200px;gap:1px;padding:6px}
.menu .pop a{display:flex;justify-content:space-between;gap:var(--sp-3);padding:6px 8px;
  border-radius:var(--r-2);font-size:13px;text-decoration:none}
.menu .pop a:hover{background:var(--glass-2)}
.menu .pop .mono{font-size:11px;color:var(--ink-2)}

/* -------------------------------------------------------------------------- tabs */
/* FIX (plan 028 finding B1): `sp-4 0 sp-5`. The strip is a hinge between the header
   and the panel, not a section of its own, and twelve above / sixteen below still
   reads as one gap on each side. */
.meeting .seg{margin:var(--sp-3) 0 var(--sp-4)}

/* ------------------------------------------------------------------- the score */
.score{display:grid;grid-template-columns:28px minmax(0,1fr) 224px;gap:0 var(--sp-5);
  align-items:start}
/* FIX (plan 019): the mock declares `position:sticky` and then `position:relative` on
   the same rule, so the ruler never sticks. Sticky is also a positioned element, so
   `.ph` and `.win` still resolve against it. */
.ruler{position:sticky;top:calc(var(--appbar-h) + var(--sp-5));width:8px;margin-inline:auto;
  height:min(520px,calc(100vh - var(--appbar-h) - 200px));min-height:200px;
  display:flex;flex-direction:column;gap:1px;touch-action:none;cursor:pointer}
.ruler i{display:block;width:100%;background:var(--h,var(--ink-3));flex:var(--f,1);
  opacity:.7;border-radius:1px}
.ruler i.gap{background:var(--line-2);opacity:.5}
.ruler .win{position:absolute;left:-6px;right:-6px;height:6.5%;border:1px solid var(--line-2);
  border-radius:var(--r-1);background:var(--glass-2)}
.ruler .ph{position:absolute;left:-8px;right:-8px;height:1px;background:var(--accent);
  box-shadow:0 0 0 1px var(--paper)}
.ruler .ph::after{content:"";position:absolute;left:50%;top:-2.5px;width:6px;height:6px;
  margin-left:-3px;border-radius:50%;background:var(--accent)}

/* ------------------------------------------------------------------- the turns */
/* FIX (plan 019): the mock's `.turn{display:contents}` cannot be measured, and a
   virtualiser that cannot measure a row cannot place the next one. Each turn is its
   own grid with the same columns, which looks the same and has a height. */
.turns{min-width:0;max-width:calc(64px + 20px + 66ch)}
.turn{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;
  padding-bottom:var(--sp-4)}
.tc{font:12px/28px var(--mono);color:var(--ink-2);text-align:right;padding-top:24px}
.tc .tl{all:unset;cursor:pointer;border-radius:var(--r-1);
  transition:color var(--t) var(--ease)}
.tc .tl:hover{color:var(--ink)}
.turn.cur .tc .tl{color:var(--accent-t)}
.body{font:300 17px/28px var(--sans);letter-spacing:-.005em;min-width:0}
.body .who{font:500 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ht,var(--h,var(--ink-2)));padding-top:28px;display:flex;align-items:center;gap:7px}
.body .who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--h,var(--ink-3))}
/* A turn the diariser could not attribute: a muted dash and a hollow dot, never one of
   the six voices. It is not a person, so it does not get a person's colour. */
.turn.unv .body .who{color:var(--ink-2)}
.turn.unv .body .who::before{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.body p{margin:2px 0 0;border-radius:var(--r-2);overflow-wrap:break-word}
/* the raised glass of proposal 3: the line being spoken lifts off the page */
.turn.cur .body p{position:relative;margin:2px 0 0 -14px;padding:8px 14px;border-radius:10px;
  background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow-2);transform:translateY(-1px)}
.turn.cur .body p::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:var(--grain)}
.w{border-radius:3px;transition:background var(--t) var(--ease)}
.w:hover{background:var(--accent-soft);cursor:pointer}
.w.now{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:4px}
.vspace{flex:none}
.turns .empty{margin-top:var(--sp-3)}

/* ---------------------------------------------------------------- the cue sheet */
.cues{position:sticky;top:calc(var(--appbar-h) + var(--sp-5));display:grid;align-content:start;
  padding:var(--sp-3) 14px;border-radius:var(--r-4);overflow:auto;
  /* clear of the dock: a cue you cannot click is not a cue */
  max-height:calc(100vh - var(--appbar-h) - var(--dock-h,80px) - var(--sp-5) - var(--sp-5))}
.cues .lbl{margin-bottom:6px}
.cue{all:unset;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;
  padding:8px 6px;border-radius:var(--r-2);font:300 13px/18px var(--sans);
  transition:background var(--t) var(--ease)}
.cue:hover{background:var(--glass-2)}
.cue .mono{font-size:11px;line-height:18px;color:var(--ink-2)}
.cue.cur{background:var(--surface);box-shadow:inset 0 1px 0 var(--hl),var(--shadow)}
.cue.cur .mono{color:var(--accent-t)}
.cue b{font-weight:500}

/* -------------------------------------------------------------------- the dock */
.dock{position:fixed;left:calc(var(--rail-w) + var(--gutter));right:var(--gutter);
  bottom:var(--sp-4);height:64px;border-radius:var(--r-5);display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;
  gap:var(--sp-4);padding-inline:14px 18px;z-index:5}
.play{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--ink);
  color:var(--paper);display:grid;place-items:center;transition:transform var(--t) var(--ease)}
.play:hover{transform:scale(1.04)}
.play:active{transform:scale(.97)}
.play[disabled]{cursor:default;opacity:.4;transform:none}
.play svg{width:12px;height:12px;fill:currentColor}
.dock .time{font:13px/18px var(--mono);color:var(--ink-2);white-space:nowrap}
.dock .time b{color:var(--ink);font-weight:500}
.scrub{position:relative;height:40px;display:grid;align-content:center;gap:5px;min-width:0;
  touch-action:none}
.scrub .track{position:relative;height:3px;border-radius:2px;background:var(--line-2)}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:2px}
.scrub .thumb{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 1px 2px light-dark(rgba(20,21,23,.18),rgba(0,0,0,.5));
  transition:transform var(--t) var(--ease)}
.scrub:hover .thumb{transform:scale(1.15)}
.scrub .tip{position:absolute;left:0;top:-18px;transform:translateX(-50%);font:11px/14px var(--mono);
  color:var(--accent-t);white-space:nowrap;opacity:0;transition:opacity var(--t) var(--ease)}
.scrub:hover .tip,.scrub:focus-visible .tip{opacity:1}
/* a tick every five minutes; `--tick` is that as a percentage of the whole */
.scrub .ticks{position:absolute;left:0;right:0;top:-6px;height:3px;opacity:.8;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px var(--tick,25%))}
.scrub .strip{height:5px}
/* `.none`, not `.empty`: `.empty` is the EmptyState, padding and all (plan 019's
   "rename the colliding class names" applies to new collisions too). */
.scrub .strip.none{height:5px;border-radius:2px;background:var(--line);opacity:.6}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;
  background:var(--glass-2);height:28px;overflow:hidden}
.stepper button{all:unset;cursor:pointer;width:26px;height:28px;display:grid;place-items:center;
  color:var(--ink-2);transition:background var(--t) var(--ease)}
.stepper button:hover{background:var(--glass)}
.stepper span{font:500 12px/18px var(--mono);padding:0 6px;min-width:52px;text-align:center}
.dock .title{font:13px/18px var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:220px}

/* ------------------------------------------------------------------ narrow ends */
@media (max-width:1100px){
  .score{grid-template-columns:28px minmax(0,1fr)}
  .cues{display:none}
}
@media (max-width:900px){
  .dock{left:var(--gutter)}
}
@media (max-width:700px){
  /* FIX (plan 028 finding B5): the score's 14 px strip and the turn's 48 px time
     column took 95 px -- a quarter of a 400 px phone -- off a text column that was
     left with 286. The strip goes (the dock's scrubber is the accessible control for
     the same value, and the strip is `aria-hidden` decoration beside it), and the time
     moves onto the speaker's line, where it is still the same `.tl` link with the same
     40 px target. `.body` becomes `display:contents` so its two children are rows of
     the turn's own grid: the time and the name share the first, and the paragraph
     spans both columns of the second -- the full width of the page. */
  .score{grid-template-columns:minmax(0,1fr);gap:0}
  .ruler{display:none}
  .turn{grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-2)}
  .body{display:contents;font-size:16px;line-height:26px}
  .tc{grid-area:1/1;display:flex;align-items:center;text-align:left;
    padding-top:var(--sp-3);min-width:0}
  .body .who{grid-area:1/2;padding-top:var(--sp-3)}
  .body p{grid-area:2/1/3/3}
  .mhead{grid-template-columns:minmax(0,1fr)}
  .mhead-aside{justify-self:start}
  .dock{grid-template-columns:auto auto minmax(0,1fr) auto;left:var(--sp-2);right:var(--sp-2);
    bottom:var(--sp-2);gap:10px;padding-inline:10px 12px}
  .dock .title,.dock .stepper{display:none}
  /* no blur below 700 px: the current turn is a plain surface there. The -14 px stays:
     it is what keeps the playing line's *words* on the same left edge as every other
     line, and with the score gone it hangs into the page gutter instead. */
  .turn.cur .body p{background:var(--surface);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce){
  .turn.cur .body p{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  .turn.cur .body p::before{display:none}
}

/* Touch targets below 700 px; the policy, and what is exempt from it, is in
   styles/components.css. The star and the times keep the size they draw at -- the box
   around them grows, and the mark moves to a ::before. */
@media (max-width:699px){
  .star{width:40px;height:40px;background:none;display:grid;place-items:center}
  .star::before{content:"";width:11px;height:11px;border-radius:50%;
    background:var(--line-2);transition:background var(--t) var(--ease)}
  .star:hover{background:none}
  .star:hover::before{background:var(--ink-2)}
  .star.on{background:none;box-shadow:none}
  .star.on::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  /* 40 px for the finger, without `display:inline-flex`: that would replace the
     `-webkit-box` the line clamp needs, and a one-line title in a 40 px box is padded
     rather than centred so the clamp survives. */
  .mhead h1 .rename-open{min-height:40px;padding-block:4px}
  .dock .play{width:40px;height:40px}
  .dock .stepper button{min-width:40px;min-height:40px}
  .tc .tl{min-height:40px;display:inline-flex;align-items:center;justify-content:flex-end}
}

/* ------------------------------------------------- the summary's own version line */
/* FIX (plan 028 finding B2): the Summary tab opened with a 60 px block -- the price,
   the provider, the model and "v1" -- directly above a SUMMARY card in the aside that
   already says all four, with the date on top. Two statements of the same fact, and
   the duplicate was the one standing between the tabs and the first sentence of the
   summary.
   The block is kept where the card is far away: up to 1100 px `.sum` (panels.css) is
   one column and the aside is a long scroll below the prose, so this is then the only
   place near the top that says what wrote this and what it cost. From 1101 px the card
   sits beside the prose and is the record.
   The rule lives here rather than beside `.money` in panels.css because it is scoped
   to this screen: the kit (kit.html) still shows the component whole. */
@media (min-width:1101px){
  .meeting .money{display:none}
}