/* GroupiApp — "הפניות שלי" (public/my-tickets.html).
   Deliberately its own file, not an addition to style.css: every token used below already exists there, so this
   page stays on the same visual line without touching the shared sheet — same convention public/my.css uses.

   v2 (22.10.2026, W-139): the page is built from design-v2.css (the poster) and v2-host-area.css (the row, the pill).
   What stays here is only the list of requests, the status badge and the thread. NOTE: these are SUPPORT requests,
   not entry tickets - the ticket-with-a-stub metaphor of v2 belongs to "where I am registered" on /my, so a request
   is drawn as a row of the board (the day of its last activity is its hero), not as a ticket. */

/* [hidden] must always win — see public/my.css for the full explanation (a real bug
   caught by screenshot: a class that sets `display` unconditionally silently overrides
   the UA [hidden]{display:none} rule). style.css is not a file this stage may edit, so
   the same defensive rule is repeated here. */
[hidden]{ display:none !important; }

/* ---------- רשימת הפניות ---------- */
.tk-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; --v2-row-time-w:96px }
.tk-card{ border-block-end:1px solid var(--line) }
.tk-card-link{
  display:grid; grid-template-columns:var(--v2-row-time-w) minmax(0,1fr) auto; gap:var(--sp-3) var(--sp-4); align-items:center;
  padding-block:var(--sp-5); color:inherit; text-decoration:none;
}
.tk-card-link:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:var(--radius-sm) }
@media (hover:hover) and (pointer:fine){
  .tk-card-link:hover .tk-subject{ text-decoration:underline; text-underline-offset:4px }
}
.tk-when{ justify-items:start }
.tk-subject{ color:var(--ink) }
.tk-card-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3) }

.tk-pager{ display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin-block-start:var(--sp-5) }

@media (max-width:560px){
  .tk-card-link{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"when badge" "info info" }
  .tk-card-link > .tk-when{ grid-area:when; grid-auto-flow:column; justify-content:start; align-items:baseline; gap:var(--sp-3) }
  .tk-card-link > .tk-badge{ grid-area:badge }
  .tk-card-link > .tk-info{ grid-area:info }
}

/* ---------- תגית סטטוס: the pill of v2-host-area.css (.v2-acc-pill), by the names the markup always carried ---------- */
.tk-badge{
  display:inline-flex; align-items:center; min-block-size:32px; padding:var(--sp-1) var(--sp-3); flex:0 0 auto;
  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;
}
.tk-badge-ok{ background:color-mix(in srgb,var(--success) 14%,var(--bg-elev)); border-color:var(--success) }
.tk-badge-warn{ background:color-mix(in srgb,var(--warning) 14%,var(--bg-elev)); border-color:var(--warning) }
.tk-badge-muted{ background:var(--band); border-color:var(--line-strong); color:var(--ink-2) }
.v2-acc-poster .tk-badge{ background:var(--bg-elev) }

/* ---------- פנייה בודדת ---------- */
.tk-meta{ color:var(--ink-2); font-size:var(--t-meta) }
#detail-state > p{ margin-block:0 var(--sp-3) }

/* ---------- שרשור ---------- */
.tk-thread{ display:grid; gap:var(--sp-3); margin:0 0 var(--sp-7); max-inline-size:70ch }
.tk-msg{
  border:1px solid var(--line); border-radius:var(--radius-lg); border-end-start-radius:var(--radius-sm);
  padding:var(--sp-4) var(--sp-5); background:var(--bg-elev);
}
.tk-msg-staff{ background:var(--yellow); border-color:transparent; color:var(--ink) }
.tk-msg-head{
  display:flex; justify-content:space-between; gap:var(--sp-3); font-family:var(--font-head);
  font-size:var(--t-sm); font-weight:700; color:var(--ink-2); margin-block-end:var(--sp-2);
}
.tk-msg-staff .tk-msg-head{ color:var(--ink) }
.tk-msg p{ margin:0; font-size:var(--t-body); line-height:1.55; white-space:pre-wrap; word-break:break-word; color:var(--ink) }

#reopen-note{ margin-block-end:var(--sp-4) }
