/* naytot — styles of this view only. The design system lives in ../crm.css; use its tokens and components.
   The next showing large (date and head count in Cormorant 56 on one baseline) with "Vaihda aika" right by the date,
   its list under it, the coming and past showings as compact rows that open in place. Every registrant list (the
   hero's and an opened showing's) uses one row and one grid, so the columns line up on one screen. */

.nt-sec{margin-top:40px}

/* ── no showing coming: one sentence and one button ────────────────── */
.nt-none{padding:28px 24px 28px}
.nt-none .nt-cap{margin-bottom:10px}
.nt-none-text.empty{padding:0; font-size:26px; line-height:1.2}
.nt-none-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:24px}
.nt-none-hint{font-size:13px; line-height:1.4; color:var(--ink-3)}

/* ── the hero: date, hours, site, head count ───────────────────────── */
.nt-hero{overflow:hidden}
.nt-top{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"cap ." "date n" "meta w";
  column-gap:20px; align-items:baseline; padding:28px 24px 24px;
}
.nt-cap{grid-area:cap; margin-bottom:10px; font-size:13px; line-height:1.4; color:var(--ink-2)}
.nt-date-row{grid-area:date; display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; min-width:0}
.nt-date{min-width:0}
.nt-meta{grid-area:meta; display:flex; flex-wrap:wrap; align-items:baseline; margin-top:16px; font-size:15px; line-height:1.4; color:var(--ink); font-variant-numeric:tabular-nums}
.nt-note{color:var(--ink-2)}
.nt-note::before{content:'·'; margin:0 .5em; color:var(--ink-3)}
.nt-meta > .nt-site{margin-left:24px}
.nt-site{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); white-space:nowrap}
.nt-site.is-past{color:var(--ink-3)}
.nt-acts{display:flex; align-items:center; gap:4px; margin-top:6px}
.nt-acts .btn-icon{color:var(--ink-2)}
.nt-n{grid-area:n; justify-self:end; font:500 56px/1 var(--f-display); font-variant-numeric:lining-nums; letter-spacing:-.01em; color:var(--ink)}
.nt-w{grid-area:w; justify-self:end; margin-top:16px; font-size:13px; line-height:1.4; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.nt-w-n{display:none}
.nt-top.is-editing{grid-template-columns:minmax(0,1fr); grid-template-areas:"cap" "form"}
.nt-top.is-editing > .nt-edit{grid-area:form; margin-top:6px}

/* ── after a move: what the site says now, and who has to be told ─── */
.nt-moved{display:flex; align-items:flex-start; gap:12px; padding:14px 16px 14px 24px; border-top:1px solid var(--line); background:var(--bg)}
.nt-moved-ic{flex:none; margin-top:3px; color:var(--ink)}
.nt-moved-lines{flex:1 1 auto; min-width:0}
.nt-moved-line{font-size:15px; font-weight:600; line-height:1.45; color:var(--ink)}
.nt-moved-sub{margin-top:2px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.nt-moved > .btn{flex:none; margin-top:-2px}

/* ── the people on a showing ───────────────────────────────────────── */
.nt-people{border-top:1px solid var(--line)}
.nt-people > .nt-empty{padding:20px 24px 22px}
.nt-person{grid-template-columns:minmax(150px,1fr) 170px 110px 160px 150px 120px; padding:0 24px}
.nt-name{display:flex; align-items:center; gap:6px; min-width:0}
.nt-name > .flame{margin-left:-20px}          /* the flame hangs in the margin: names keep one left edge */
.nt-phone{min-width:0; color:var(--ink-2); white-space:nowrap}
.nt-tel{display:inline-flex; align-items:center; gap:7px; max-width:100%; color:var(--ink); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .15s ease-out}
.nt-tel:hover{text-decoration-color:var(--line-2)}
.nt-tel .icon{color:var(--ink-3)}
.nt-stage{min-width:0}
.nt-sub{display:none}
.nt-end{display:flex; align-items:center; justify-content:flex-end; gap:8px}
.nt-call{display:none}
.nt-wa{color:var(--ink-2); text-decoration:none}
.nt-wa:hover{color:var(--ink)}
.nt-more{color:var(--ink-3)}
.nt-came{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2)}

/* Tuli: one tap at the door. Empty ring = not marked; ink fill and a check = came. */
.nt-tuli{min-width:76px; gap:7px}
.nt-tuli .icon-check{display:none}
.nt-ring{flex:none; width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.btn.nt-tuli[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.btn.nt-tuli[aria-pressed="true"]:hover:not(:disabled):not([aria-disabled="true"]){background:color-mix(in srgb, var(--ink) 86%, var(--surface)); border-color:color-mix(in srgb, var(--ink) 86%, var(--surface))}
.nt-tuli[aria-pressed="true"] .nt-ring{display:none}
.nt-tuli[aria-pressed="true"] .icon-check{display:inline-block}

.nt-foot{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-height:52px; padding:8px 16px; border-top:1px solid var(--line)}

/* ── coming and past: a row per showing, its people under it on the hero's grid ── */
.nt-list{overflow:hidden}
.nt-sgroup + .nt-sgroup{border-top:1px solid var(--line)}
.nt-srow{grid-template-columns:104px 150px minmax(0,1fr) auto 16px; padding:0 24px}
.nt-ssub{display:contents}
.nt-sday{font-size:15px; font-weight:600; line-height:1.35; color:var(--ink); white-space:nowrap}
.nt-stime{font-size:14px; color:var(--ink-2); white-space:nowrap}
.nt-snote{display:flex; align-items:center; gap:20px; min-width:0; font-size:13px; color:var(--ink-3); overflow:hidden; white-space:nowrap}
.nt-snote .nt-site{font-size:13px}
.nt-scount{font-size:13px; color:var(--ink-2); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.nt-chev{color:var(--ink-3); transition:transform .18s ease-out}
.nt-srow[aria-expanded="true"] .nt-chev{transform:rotate(90deg)}
.nt-srow[aria-expanded="true"] .nt-sday{color:var(--ink)}
.nt-srow.is-cancelled .nt-sday,.nt-srow.is-cancelled .nt-stime{color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px}
.nt-cancel{color:var(--ink); font-weight:500}
/* the opened showing's own row is the label above its people; the people sit on the hero's grid, not indented */
.nt-sbody > :first-child{border-top:1px solid var(--line)}
.nt-sbody > .nt-empty{padding:16px 24px 18px}
.nt-sacts{display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:48px; padding:6px 16px; border-top:1px solid var(--line)}
.nt-sacts > .btn-icon{margin-left:auto; margin-right:-6px}
.nt-past .nt-sday{font-weight:500}

/* ── Siirrä: the day, hours and note in place ──────────────────────── */
.nt-edit{display:flex; flex-direction:column; gap:14px; min-width:0}
.nt-edit-row{padding:18px 24px 20px}
.nt-edit-fields{display:grid; grid-template-columns:172px 116px 116px minmax(160px,1fr); gap:12px 16px; align-items:start}
.nt-edit-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.nt-edit-hint{flex:1 1 240px; min-width:0; font-size:13px; line-height:1.45; color:var(--ink-2)}
.nt-edit-acts{display:flex; gap:8px; margin-left:auto}
.nt-err{font-size:13px; line-height:1.4; color:var(--danger)}
.nt-err:empty{display:none}

/* ── popover: a new person on the list ─────────────────────────────── */
.popover-form.nt-person-form{width:320px}
.nt-dup{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-s); background:var(--bg)}
.nt-dup-text{font-size:13px; line-height:1.45; color:var(--ink-2)}
.nt-dup-text b{font-weight:600; color:var(--ink)}
.nt-dialog-note{font-size:13px; line-height:1.45; color:var(--ink-3)}
/* the moved dialog's answer: who to tell, with the number and WhatsApp */
.nt-told{display:flex; flex-direction:column; margin-top:-4px}
.nt-told-row{display:grid; grid-template-columns:minmax(0,1fr) auto 36px; align-items:center; column-gap:16px; min-height:52px}
.nt-told-row + .nt-told-row{border-top:1px solid var(--line)}
.nt-told-row .btn-icon{justify-self:end}

/* ── narrower pages: each person on two lines ──────────────────────── */
@container page (max-width:999px){
  .nt-person{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name end" "sub end"; row-gap:2px; padding-top:9px; padding-bottom:9px}
  .nt-name{grid-area:name}
  .nt-sub{grid-area:sub; display:block; margin-top:0}
  .nt-end{grid-area:end}
  .nt-phone,.nt-homes,.nt-whose,.nt-stage{display:none}
  .nt-call{display:inline-grid}
  .nt-srow{grid-template-columns:96px 140px minmax(0,1fr) auto 16px}
}

/* ── phone ─────────────────────────────────────────────────────────── */
@media (max-width:759px){
  .nt-sec{margin-top:32px}
  .nt-top{grid-template-columns:minmax(0,1fr); grid-template-areas:"cap" "date" "meta" "w"; padding:16px 16px 18px; column-gap:12px}
  .nt-cap{margin-bottom:6px}
  .nt-date-row{gap:12px}
  .nt-date{flex:1 1 100%; font-size:40px; line-height:1.05}
  .nt-acts{order:3; margin-top:0}
  .nt-meta{margin-top:10px}
  .nt-meta > .nt-site{margin-left:0; flex-basis:100%; margin-top:4px}
  .nt-n{display:none}
  .nt-w{justify-self:start; margin-top:16px; font-size:14px; font-weight:600; color:var(--ink)}
  .nt-w-n{display:inline}
  .nt-person{padding:9px 8px 9px 16px; min-height:64px}
  .nt-name > .flame{margin-left:0}
  .nt-person.is-checkin .nt-more{display:none}
  .nt-end{gap:4px}
  .nt-tuli{height:44px; min-width:84px}
  .nt-people > .nt-empty{padding:16px}
  .nt-foot{padding:6px 8px}
  .nt-srow{grid-template-columns:auto minmax(0,1fr) 16px; grid-template-areas:"day time chev" "sub sub chev"; column-gap:10px; row-gap:2px; padding:10px 16px; min-height:64px}
  .nt-sday{grid-area:day}
  .nt-stime{grid-area:time}
  .nt-ssub{grid-area:sub; display:flex; align-items:baseline; gap:12px; min-width:0}
  .nt-snote:empty{display:none}
  .nt-scount{text-align:left}
  .nt-chev{grid-area:chev}
  .nt-moved{padding:12px 8px 12px 16px}
  .nt-none{padding:20px 16px}
  .nt-none-acts .btn-primary{flex:1 1 100%}
  .nt-told-row{grid-template-columns:minmax(0,1fr) 44px; grid-template-areas:"name wa" "tel wa"; row-gap:2px; padding:8px 0}
  .nt-told-row > .row-title{grid-area:name}
  .nt-told-row > :nth-child(2){grid-area:tel}
  .nt-told-row > :nth-child(3){grid-area:wa}
  .nt-sacts{padding:4px 8px}
  .nt-edit-row{padding:16px}
  .nt-edit-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nt-edit-fields > :first-child,.nt-edit-fields > .nt-edit-note{grid-column:1 / -1}
  .nt-edit-acts{width:100%}
  .nt-edit-acts .btn{flex:1 1 0}
  .popover-form.nt-person-form{width:100%}
}