/* css/screens/access.css — Grand Mumtoz Director · ZARHAL · screen "access" («Доступ / Ruxsat»)
   Tokens only. Hero = serif voice line + counts; the queue = request "tickets" with perforated tear-off edges and a dept-monogram stub;
   approve = stamp drops in (scale 1.3→1, 220 ms, −8°) then the ticket slides away; deny = grey stamp + fade. Roles list / table, open shifts. */

.access { padding: 4px 0 24px; }
.access__hero { padding: 6px 2px 8px; }
.access__eyebrow { margin-bottom: 6px; }
.access__voice { margin: 0 0 8px; font: 600 26px/30px var(--font-display); color: var(--text-1); letter-spacing: -.005em; }
.access__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 13px/18px var(--font-ui); color: var(--text-2); }
.access__stats b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.access__stat-sep { font-size: 7px; color: var(--accent); opacity: .8; }
.access__hero .byline { margin-top: 6px; }
.access__sec { margin-top: 18px; }
.access__sec--queue { margin-top: 10px; }
.access__quiet { padding: 6px 4px 2px; }
.access__journal { margin-top: 20px; display: flex; }

/* ---------- tickets ---------- */
.access__queue { display: flex; flex-direction: column; gap: 14px; }
.ticket { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: visible; --dept: var(--text-3); transition: transform var(--t-med) var(--e-exit), opacity var(--t-med) var(--e-exit), height var(--t-med) var(--e-inout), margin var(--t-med) var(--e-inout); will-change: transform, opacity; }
.ticket.dept-reception { --dept: var(--dept-reception); } .ticket.dept-maid { --dept: var(--dept-maid); } .ticket.dept-laundry { --dept: var(--dept-laundry); } .ticket.dept-director { --dept: var(--dept-director); }
/* perforated top + bottom edges */
.ticket::before, .ticket::after { content: ''; position: absolute; left: 10px; right: 10px; height: 6px; background: radial-gradient(circle at 3px 3px, var(--bg-0) 2.5px, transparent 3px); background-size: 12px 6px; background-repeat: repeat-x; pointer-events: none; z-index: 2; }
.ticket::before { top: -3px; }
.ticket::after { bottom: -3px; }
.ticket__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-right: 1px dashed var(--line-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--dept) 12%, transparent), transparent 70%); border-radius: var(--r-md) 0 0 var(--r-md); }
.ticket__mono { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--dept); color: var(--dept); font: 600 16px/1 var(--font-display); }
.ticket__via { color: var(--text-3); }
.ticket__main { min-width: 0; padding: 12px 12px 12px 14px; }
.ticket__name { font: 700 16px/20px var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; }
.ticket__meta { display: block; margin-top: 2px; color: var(--text-2); overflow-wrap: anywhere; }
.ticket__meta .i { vertical-align: -3px; }
.ticket__phone { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.ticket__dept { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ticket__dept-label { color: var(--text-3); }
.ticket__dept .seg { max-width: 100%; }
.ticket__dept .seg__opt { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 11px; letter-spacing: -.01em; }
.ticket__dept .seg__opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__actions { display: flex; gap: 8px; margin-top: 10px; }
.ticket__actions .btn { flex: 1; }
/* stamp */
.ticket__stamp { position: absolute; right: 14px; top: 10px; z-index: 3; padding: 4px 10px; border: 2px solid var(--success); border-radius: var(--r-xs); color: var(--success); font: 700 12px/14px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-8deg) scale(1.3); opacity: 0; pointer-events: none; mix-blend-mode: normal; }
.ticket.is-approved .ticket__stamp { animation: accessStamp 220ms var(--e-velvet) both; }
.ticket.is-denied .ticket__stamp { border-color: var(--text-3); color: var(--text-3); animation: accessStamp 220ms var(--e-velvet) both; }
@keyframes accessStamp { from { opacity: 0; transform: rotate(-8deg) scale(1.3); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.ticket.is-approved .ticket__actions .btn, .ticket.is-denied .ticket__actions .btn { opacity: .4; pointer-events: none; }
/* slide away */
.ticket.is-gone { transform: translateX(60px); opacity: 0; }
.ticket.is-denied.is-gone { transform: translateX(-24px) scale(.98); }
.ticket.is-collapsing { margin-bottom: -14px; border-width: 0; overflow: hidden; }
.access__empty { margin: 2px 0; }
.access__queue.enter > .ticket { animation: accessIn 260ms var(--e-enter) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes accessIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- staff roles ---------- */
.access__list { margin-top: 10px; }
.access__row .row__title { display: flex; align-items: baseline; gap: 0; }
.access__role { color: var(--text-3); }
.access__row .role-chip { flex-shrink: 0; }
.access__tname { display: inline-flex; align-items: center; gap: 8px; }
.access__tactions { display: inline-flex; gap: 6px; }
.access__table { margin-top: 10px; }

/* ---------- open shifts ---------- */
.access__shifts .row__sub { font-variant-numeric: tabular-nums; }
.access__shift.is-forgotten { box-shadow: inset 3px 0 0 var(--warning); }
.access__shift .row__title { display: flex; align-items: center; gap: 4px; }

/* steps */
.access-close__q { margin: 0 0 12px; font: 500 15px/22px var(--font-ui); }
.access-role .body { margin: 0 0 12px; }

/* desktop: hero as two columns, tickets in a 2-up grid */
@media (min-width: 900px) and (min-height: 521px) {
  .access__hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "voice stats" "byline byline"; align-items: end; column-gap: 24px; }
  .access__eyebrow { grid-area: eyebrow; } .access__voice { grid-area: voice; } .access__stats { grid-area: stats; justify-content: flex-end; } .access__hero .byline { grid-area: byline; }
  .access__queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
  .access__queue .empty { grid-column: 1 / -1; }
  .ticket__actions .btn { flex: 0 0 auto; }
}

/* reduced motion */
html[data-motion="reduced"] .ticket, html[data-motion="reduced"] .ticket__stamp, html[data-motion="reduced"] .access__queue.enter > .ticket { transition: opacity 120ms; animation: none; }
html[data-motion="reduced"] .ticket.is-approved .ticket__stamp, html[data-motion="reduced"] .ticket.is-denied .ticket__stamp { opacity: 1; transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .ticket, .access__queue.enter > .ticket { animation: none; transition: opacity 120ms; } .ticket.is-approved .ticket__stamp, .ticket.is-denied .ticket__stamp { animation: none; opacity: 1; transform: rotate(-8deg); } }