/* English OV cinema finder — expats/cinema.html. Film "tickets" with a perforated stub, showtime chips in mono. */
.cn-head{ padding-top:2rem; }
.cn-eyebrow{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cn-title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,4.6vw,2.6rem); line-height:1.1; margin:.35rem 0 0; text-wrap:balance; }
.cn-intro{ margin:.7rem 0 0; color:var(--ink-soft); max-width:62ch; }

.cn-bar{ position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); padding:1rem 0 .8rem; margin-top:1.4rem; }
.cn-controls{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:.6rem; }
.cn-field{ display:grid; gap:.25rem; min-width:0; }
.cn-field .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.cn-field select, .cn-field input{ font:inherit; font-size:1rem; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:0; padding:.55rem .7rem; width:100%; min-width:0; }
.cn-field select:focus-visible, .cn-field input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.cn-toggles{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.cn-seg{ display:inline-flex; border:1px solid var(--line); }
.cn-seg button{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border:0; background:var(--paper); color:var(--ink-soft); padding:.48rem .7rem; cursor:pointer; }
.cn-seg button + button{ border-left:1px solid var(--line); }
.cn-seg button[aria-pressed="true"]{ background:var(--accent); color:var(--paper); }
.cn-seg[hidden], .cn-days[hidden]{ display:none; }
.cn-days{ display:flex; gap:.35rem; margin-top:.7rem; overflow-x:auto; scrollbar-width:thin; padding-bottom:.15rem; }
.cn-days button{ flex:0 0 auto; display:grid; gap:.05rem; text-align:left; font:inherit; background:var(--paper); color:var(--ink); border:1px solid var(--line); padding:.35rem .6rem; cursor:pointer; min-width:4.6rem; }
.cn-days button .d{ font-family:var(--f-display); font-weight:600; font-size:.92rem; }
.cn-days button .n{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; }
.cn-days button.none .d{ color:var(--ink-soft); }
.cn-days button:hover{ border-color:var(--accent); }
.cn-days button[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.cn-days button[aria-selected="true"] .n{ color:var(--paper); opacity:.85; }
.cn-ahead{ margin:0; font-size:.86rem; color:var(--ink-soft); border-left:2px solid var(--accent); padding:.1rem 0 .1rem .7rem; max-width:70ch; }
.cn-status{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.04em; color:var(--ink-soft); margin-top:.6rem; }
.cn-status .dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); margin-right:.4rem; vertical-align:.05rem; }
.cn-status .dot.stale{ background:var(--line); }

.cn-list{ display:grid; gap:1rem; margin-top:1.2rem; }
.cn-film{ display:grid; grid-template-columns:auto minmax(0,1fr); border:1px solid var(--line); background:var(--paper); }
.cn-stub{ width:2.6rem; border-right:2px dashed var(--line); display:flex; align-items:center; justify-content:center; background:var(--accent-soft); }
.cn-stub span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.cn-body{ padding:.9rem 1rem 1rem; min-width:0; }
.cn-ttl{ font-family:var(--f-display); font-weight:600; font-size:1.35rem; line-height:1.15; margin:0; text-wrap:balance; }
.cn-ttl a:hover{ color:var(--accent); }
.cn-it{ font-size:.9rem; color:var(--ink-soft); margin-top:.15rem; font-style:italic; }
.cn-meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:.45rem; }
.cn-cast{ font-size:.92rem; color:var(--ink-soft); margin-top:.2rem; }
.cn-venues{ display:grid; gap:.7rem; margin-top:.8rem; }
.cn-venue{ border-top:1px solid var(--line); padding-top:.65rem; display:grid; gap:.35rem; }
.cn-vname{ font-family:var(--f-display); font-weight:600; font-size:1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; }
.cn-vlinks{ display:inline-flex; flex-wrap:wrap; gap:.8rem; font-family:var(--f-mono); font-weight:400; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.cn-vlinks a{ color:var(--ink-soft); border-bottom:1px solid var(--line); }
.cn-vlinks a:hover{ color:var(--accent); border-color:var(--accent); }
.cn-vlinks a.book{ color:var(--accent); border-color:var(--accent); }
.cn-times{ display:flex; flex-wrap:wrap; gap:.45rem; }
/* a showtime box: time–end, hall, then what tapping it does */
.cn-t{ position:relative; display:inline-grid; gap:.05rem; min-width:7.6rem; font-family:var(--f-mono); font-variant-numeric:tabular-nums; border:1px solid var(--ink); padding:.3rem .55rem .32rem; color:var(--ink); line-height:1.25; }
.cn-t .when{ font-size:.9rem; font-weight:500; }
.cn-t .hall{ font-size:.68rem; color:var(--ink-soft); }
.cn-t .act{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.cn-t.site{ border-style:dashed; border-color:var(--ink-soft); }
.cn-t.site .act{ color:var(--ink-soft); }
a.cn-t:hover{ background:var(--accent-soft); border-color:var(--accent); }
a.cn-t:hover .act{ color:var(--accent); }
.cn-t .nx{ position:absolute; top:-.55rem; right:.4rem; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:var(--paper); padding:.02rem .3rem; }
.cn-t.past{ border-color:var(--line); color:var(--line); min-width:0; }
.cn-t.past .when{ text-decoration:line-through; }
.cn-t.past .hall{ color:var(--line); }
.cn-price{ font-family:var(--f-mono); font-weight:400; font-size:.7rem; color:var(--ink-soft); }

.cn-legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.7rem 1.2rem; margin:1.3rem 0 0; padding:.9rem 1rem; border:1px solid var(--line); background:var(--paper-2); }
.cn-legend > div{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem; align-items:center; }
.cn-legend > div.wide{ grid-column:1/-1; }
.cn-legend dt{ margin:0; }
.cn-legend dt .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.cn-legend dd{ margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.4; }
.cn-legend .cn-t{ background:var(--paper); }

.cn-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:start; }
.cn-poster{ width:5.6rem; aspect-ratio:2/3; object-fit:cover; border:1px solid var(--line); background:var(--paper-2); max-width:100%; }
.cn-info{ min-width:0; }
.cn-rate{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.45rem; font-family:var(--f-mono); font-size:.76rem; }
.cn-rate a{ border-bottom:1px solid var(--line); }
.cn-rate a:hover{ color:var(--accent); border-color:var(--accent); }
.cn-rate a.cn-mv{ color:var(--accent); border-color:var(--accent); }
.cn-rate b{ font-weight:500; color:var(--ink-soft); margin-right:.2rem; }
.cn-ott{ font-size:.86rem; color:var(--ink-soft); margin-top:.25rem; }
.cn-ott a{ text-decoration:underline; text-underline-offset:2px; }
.cn-plot{ margin-top:.4rem; }
.cn-plot summary{ display:inline-block; cursor:pointer; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--accent); list-style:none; }
.cn-plot summary::-webkit-details-marker{ display:none; }
.cn-plot summary::after{ content:" ▾"; }
.cn-plot[open] summary::after{ content:" ▴"; }
.cn-plot p{ margin:.4rem 0 0; font-size:.94rem; max-width:62ch; }
.cn-hint{ font-size:.82rem; color:var(--ink-soft); }
.cn-empty{ border:1px dashed var(--line); padding:1.6rem 1.2rem; text-align:center; color:var(--ink-soft); }
.cn-empty b{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.2rem; color:var(--ink); margin-bottom:.25rem; }
.cn-note{ font-size:.85rem; color:var(--ink-soft); margin-top:1.6rem; max-width:62ch; }
.cn-note a{ text-decoration:underline; text-underline-offset:2px; }
mark{ background:var(--accent-soft); color:inherit; padding:0 .05em; }

@media (max-width:520px){
  .cn-controls{ grid-template-columns:1fr; }
  .cn-poster{ width:4.2rem; }
  .cn-t{ min-width:6.8rem; }
  .cn-legend > div{ grid-template-columns:1fr; gap:.3rem; }
  .cn-stub{ width:1.9rem; }
  .cn-ttl{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:no-preference){
  .cn-film{ animation:cn-in .22s ease both; }
  @keyframes cn-in{ from{ transform:translateY(3px); } to{ transform:none; } }
}