/* ============================================================================
   GroupiApp - v2-host-area.css  ·  W-139  ·  22.10.2026
   The few shared pieces of the v2 conversion of the host + signed-in user area (/my, /host, /my-tickets,
   /notifications). It is NOT a second design system: every rule is built from tokens of style.css and the
   components of design-v2.css (loaded before this file). It holds only what those two do not have and that
   at least two of these pages need, under the prefix v2-acc-.

   Load order on a page:  style.css  ->  design-v2.css  ->  v2-host-area.css  ->  the page's own sheet.

   Iron rules (the same as design-v2.css): logical properties only (no left / right), no raw colour (tokens
   or color-mix of tokens), no numeric z-index, touch target >= 44px (--v2-tap), the global focus ring.
   ============================================================================ */

:root{
  --v2-acc-title:clamp(40px,6.2vw,80px);           /* a work-area poster is smaller than the feed's (--t-poster) */
}

/* ----- 1 · the yellow poster of a work page ---------------------------------------------------------
   The page's <main id="main"> is NOT .wrap on these pages: the poster has to run edge to edge inside the
   shell's own padding (app-shell.css pads #main for the side rail), and the content below sits in a
   `<div class="wrap">`. The poster slides up under the sticky nav capsule (`.v2-poster--under-nav`), as in the comps. */
/* W-142: the geometry (slides up under the sticky nav capsule) is the shared `.v2-poster--under-nav` in design-v2.css; every
   `.v2-acc-poster` section carries both classes. What stays here is the work-area title size. */
.v2-acc-poster .v2-poster__title{ font-size:var(--v2-acc-title) }
/* a poster whose title is the user's own text (an activity name, a ticket subject): readable, wraps anywhere */
.v2-acc-poster--compact .v2-poster__title{
  font-size:var(--t-h2); line-height:1.05; overflow-wrap:anywhere; max-inline-size:28ch;
}
.v2-acc-poster__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-4) var(--sp-6) }
.v2-acc-poster__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin-block-start:var(--sp-3) }
.v2-acc-poster__meta > p{ margin:0 }
.v2-acc-poster .micro{ color:var(--ink-2) }
.v2-acc-poster a:not(.btn){ color:var(--ink); font-weight:700; text-underline-offset:4px }
.v2-acc-body{ padding-block:var(--sp-6) var(--sp-8) }

/* ----- 2 · back link with the arrow icon ------------------------------------------------------------ */
.v2-acc-back{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-block-size:var(--v2-tap);
  font-family:var(--font-head); font-weight:700; color:var(--ink); text-decoration:none;
}
.v2-acc-back > span{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px }

/* ----- 3 · status pill: the shape of the activity-status badge, for every state this area names ------ */
.v2-acc-pill{
  display:inline-flex; align-items:center; gap:var(--sp-2); max-inline-size:100%;
  min-block-size:32px; padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill);
  background:var(--band); color:var(--ink); border:1px solid var(--line-strong);
  font-family:var(--font-head); font-size:var(--t-sm); font-weight:700; line-height:1.3;
}
.v2-acc-pill .v2-ico{ inline-size:16px; block-size:16px }
.v2-acc-pill--ok{ background:color-mix(in srgb, var(--success) 14%, var(--bg-elev)); border-color:var(--success) }
.v2-acc-pill--ok .v2-ico{ color:var(--success) }
.v2-acc-pill--warn{ background:color-mix(in srgb, var(--warning) 14%, var(--bg-elev)); border-color:var(--warning) }
.v2-acc-pill--warn .v2-ico{ color:var(--warning) }
.v2-acc-pill--danger{ border-color:var(--danger) }
.v2-acc-pill--danger .v2-ico{ color:var(--danger) }

/* ----- 5 · a section head over a list: the day-head rule (ink 3px), without a date -------------------- */
.v2-acc-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin:0;
  padding-block-end:var(--sp-3); border-block-end:3px solid var(--ink);
  font-family:var(--font-display); font-weight:400; font-size:var(--t-h2); line-height:1;
}
.v2-acc-head:focus{ outline:none }
.v2-acc-section{ margin-block-end:var(--sp-8) }
.v2-acc-lede{ margin:var(--sp-3) 0 var(--sp-2); max-inline-size:60ch; font-size:var(--t-meta); color:var(--ink-2) }
.v2-acc-empty{
  display:grid; gap:var(--sp-2); justify-items:start; margin-block-start:var(--sp-4); padding:var(--sp-5) var(--sp-6);
  border:2px dashed var(--line-strong); border-radius:var(--radius-lg); color:var(--ink);
}
.v2-acc-empty > p{ margin:0; font-size:var(--t-meta) }
.v2-acc-empty a{ color:var(--ink); font-weight:700 }

/* ----- 6 · a row of a list in this area (the base of .v2-row, but a card of actions can sit under it) -- */
.v2-acc-rows{ list-style:none; margin:0; padding:0; --v2-row-time-w:96px }
.v2-acc-row{
  display:grid; gap:var(--sp-3) var(--sp-4); align-items:start; padding-block:var(--sp-5);
  grid-template-columns:var(--v2-row-time-w) minmax(0,1fr); border-block-end:1px solid var(--line);
}
.v2-acc-row > .v2-acc-row__extra{ grid-column:1 / -1 }
.v2-acc-row__time{ display:grid; gap:2px; justify-items:start; font-family:var(--font-display); line-height:1 }
.v2-acc-row__time time{ font-size:var(--t-time); font-variant-numeric:tabular-nums lining-nums }
.v2-acc-row__time small{ font-family:var(--font-head); font-size:var(--t-sm); font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums }
.v2-acc-row__info{ display:grid; gap:2px; min-inline-size:0 }
.v2-acc-row__cat{ font-family:var(--font-head); font-size:var(--t-label); font-weight:700; letter-spacing:.02em; color:var(--ink-2) }
.v2-acc-row__title{ font-family:var(--font-head); font-weight:700; font-size:var(--t-title-row); line-height:1.3; overflow-wrap:anywhere; color:var(--ink) }
.v2-acc-row__sub{ font-size:var(--t-meta); color:var(--ink-2); overflow-wrap:anywhere }
.v2-acc-row__spots{ font-family:var(--font-head); font-weight:600; font-size:var(--t-sm); color:var(--ink) }

@media (max-width:420px){
  .v2-acc-row{ grid-template-columns:minmax(0,1fr) }
  .v2-acc-row__time{ grid-auto-flow:column; justify-content:start; align-items:baseline; gap:var(--sp-3) }
}

/* the global focus ring stays visible inside clipped containers */
.v2-acc-poster :where(a,button):focus-visible{ outline-offset:3px }

/* ----- 7 · the footer waits for the page (layout stability, G4 23.10.2026) ------------------------------
   These pages fetch what they show. Until the first answer the main column is empty, so the footer is a visible element near the top of
   the first paint, and it jumps down when the content lands: CLS 0.35 to 1.0 measured on /host and /my. The footer is therefore invisible
   until the page's script says it knows what it shows (body.acc-ready; my.js, host.js, my-tickets.js, notifications.js). `visibility`, not
   `display`: the footer keeps its place in the flow, and an invisible element does not count as a layout shift. A script that never says
   so (an error, no JS) gets the footer after 3 seconds, from CSS alone. */
body.v2-acc-page:not(.acc-ready) > .foot{ visibility:hidden; animation:v2-acc-foot-in 0s linear 3s forwards }
@keyframes v2-acc-foot-in{ to{ visibility:visible } }
/* Two more sources of the same shift. (a) The poster slides up under the nav by a negative top margin; a margin that is the first thing in
   <main> collapses THROUGH it, so <main> itself moved up 60px the moment the poster opened. `flow-root` keeps the margin inside <main>: same
   pixels on screen, nothing moves. (b) With classic scrollbars the page grows past the viewport when the content lands and every full-width
   element slid sideways by the scrollbar's width; the gutter is reserved from the first paint. */
body.v2-acc-page > main{ display:flow-root }
html:has(> body.v2-acc-page){ scrollbar-gutter:stable }