/* Θερινά — an Athens summer night. One family (Commissioner), quiet surfaces, time-led rows. */
/* Self-hosted variable font (weights 400–800 via the wght axis in one file per subset) — replaces the Google Fonts stylesheet. */
@font-face{
  font-family:"Commissioner";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/fonts/commissioner-greek.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Commissioner";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/fonts/commissioner-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --night:#0c1222;        /* evening sky after sunset */
  --dusk:#121a2f;         /* surface: a shade lighter */
  --dusk-2:#192237;       /* raised surface */
  --hairline:rgba(236,232,220,.09);
  --jasmine:#f1eee6;      /* primary ink on night */
  --stone:#9aa2b5;        /* secondary ink */
  --stone-2:var(--stone); /* was a third ink; folded into stone */
  --lamp:#f3c05a;         /* the projector lamp */
  --lamp-ink:#1a1204;
  --fresh:#6bd39a; --rotten:#d96f5a; --mid:#e3b341;
  --unit:8px; --radius:10px; --radius-s:6px;
  --font:"Commissioner",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
:root[data-theme=day]{
  --night:#f6f2e8; --dusk:#fffdf7; --dusk-2:#f0ebdf; --hairline:rgba(30,26,18,.1);
  --jasmine:#1c1a16; --stone:#5f5a4f; --stone-2:var(--stone); --lamp:#986204; --lamp-ink:#fff;
  --fresh:#2f8f5b; --rotten:#c0452d; --mid:#a8780e; color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:var(--night)}
body{margin:0;background:var(--night);color:var(--jasmine);font:15px/1.45 var(--font);font-feature-settings:"ss01";overflow-x:hidden}
/* Safari samples the background of a fixed strip touching each viewport edge for the status bar / toolbar tint (theme-color alone can't follow day/night + mode) */
.edge-top::after,.edge-bottom::after{content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:10;background:var(--night)}
.edge-top::after{top:0;height:max(12px,env(safe-area-inset-top))}
.edge-bottom::after{bottom:0;height:max(12px,env(safe-area-inset-bottom))}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lamp);color:var(--lamp-ink);padding:8px 12px;border-radius:var(--radius-s);z-index:99}
.skip:focus{left:8px}

/* header */
.head{position:sticky;top:0;z-index:10;background:var(--night);border-bottom:1px solid var(--hairline);padding:calc(env(safe-area-inset-top) + 6px) 16px 0}
.head-inner{max-width:608px;margin:0 auto}   /* = .main's 640 minus its 16px padding: the header lines up with the board */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}   /* brand left · day, settings, profile right */
.ctl-row{display:flex;align-items:center;gap:8px;padding-top:8px}
.ctl-row>.seg{display:flex;width:100%}                                   /* Σινεμά / Ταινίες / Φίλοι: full width, equal segments */
.ctl-row>.seg button{flex:1 1 0;justify-content:center;min-width:0}
.ctl-right{display:flex;align-items:center;gap:2px;margin-left:auto}
.brand{margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px}
.sun{width:14px;height:14px;border-radius:50%;background:var(--lamp)}

.icon-btn{min-width:40px;height:40px;border-radius:var(--radius-s);display:inline-grid;place-items:center;color:var(--stone);font-weight:600;font-size:14px}
.icon-btn:hover{background:var(--dusk-2);color:var(--jasmine)}
.areas-row{display:flex;align-items:center;gap:8px;padding:12px 0 12px;min-height:58px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.areas-row::-webkit-scrollbar{display:none}
.chip{text-decoration:none;flex:0 0 auto;height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--hairline);color:var(--stone);font-weight:500;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--jasmine);border-color:var(--stone-2)}
.chip .pen{width:14px;height:14px;flex:0 0 auto}
.chip.edit{color:var(--lamp);border-color:color-mix(in srgb,var(--lamp) 45%,transparent);background:color-mix(in srgb,var(--lamp) 10%,transparent);font-weight:600}

/* main */
.main{max-width:640px;margin:0 auto;padding:22px 16px calc(env(safe-area-inset-bottom) + 40px)}
.area,.cinema,.row{scroll-margin-top:calc(var(--head-h,104px) + 8px)}
.area{margin-top:28px}
.area:first-child{margin-top:0}
.area-h{position:sticky;top:var(--head-h,104px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:12px 2px 10px;background:var(--night);border-bottom:1px solid var(--hairline)}
.area-h h2{margin:0;font-size:15px;font-weight:800;color:var(--jasmine);display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-h h2::before{display:none}
.area-h span{font-size:12px;color:var(--stone-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cinema{background:var(--dusk);border-radius:var(--radius);margin-bottom:10px;position:relative}
.cinema:has(.menu:not([hidden])),.fcard:has(.menu:not([hidden])){z-index:8}
.cin-h{padding:12px 14px 8px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.cin-h>div{min-width:0}
.cin-h h3{margin:0;font-size:17px;font-weight:700;text-wrap:balance}
.cin-h .addr{display:block;color:var(--stone);font-size:13px;margin-top:1px;overflow-wrap:anywhere}
.cin-name{font:inherit;text-align:left;border-radius:4px;padding:0}
.cin-name{display:inline-flex;align-items:center;gap:5px;max-width:100%}
.cin-name>span{min-width:0}
.cin-name .chev{width:14px;height:14px;color:var(--stone-2);flex:0 0 auto}
.cin-name:hover{color:var(--lamp)}
.cin-dd .menu{left:0;right:auto;min-width:200px}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 10px;border-radius:var(--radius-s);font-size:14px;font-weight:500;color:var(--jasmine);text-decoration:none}
.menu a>span{display:inline-flex;align-items:center;gap:10px}
.menu a svg{width:18px;height:18px;color:var(--lamp)}
.menu a:hover{background:var(--dusk)}
.menu a small{color:var(--stone-2);font-variant-numeric:tabular-nums}
.cin-h .price{font-size:13px;color:var(--stone);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.screen-tag{padding:6px 14px 0;font-size:12px;color:var(--stone-2)}
/* the board row: time leads */
.row{display:grid;grid-template-columns:66px 40px minmax(0,1fr);gap:10px;padding:10px 14px;border-top:1px solid var(--hairline);text-align:left;width:100%;align-items:start;cursor:pointer}
.row .body{min-width:0;display:block}
.row:hover{background:var(--dusk-2)}
.row .time{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;padding-top:1px}
.row .time small{display:block;font-size:11px;font-weight:500;color:var(--stone-2);letter-spacing:0}
.row.past .time{color:var(--stone-2)}
.row.past .title{color:var(--stone)}
.row .title{font-weight:600;font-size:16px;line-height:1.25;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .meta{color:var(--stone-2);font-size:12px;margin-top:1px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* score strip: provider icon + value, each a link to the provider */
.scores{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-variant-numeric:tabular-nums;align-items:center}
.sc{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--jasmine);text-decoration:none;border-radius:4px;line-height:1}
.sc svg{width:16px;height:16px;flex:0 0 auto}
.sc.imdb svg{width:32px;height:15px}
.sc:hover b{text-decoration:underline;text-underline-offset:2px}
.sc.na{color:var(--stone-2);font-weight:400}
.mc-badge{display:inline-grid;place-items:center;min-width:22px;height:16px;padding:0 3px;border-radius:3px;font:800 11px/1 Arial,Helvetica,sans-serif;font-style:normal;color:#fff}
.mc-badge.fresh{background:#66cc33;color:#0a2a00}.mc-badge.mid{background:#ffcc33;color:#3a2a00}.mc-badge.rotten{background:#ff0000}
.mc-badge.none{background:var(--dusk-2);color:var(--stone-2);font-size:9px}
.tmdb-badge{display:inline-grid;place-items:center;height:15px;padding:0 5px;border-radius:3px;font:800 9px/1 Arial,Helvetica,sans-serif;font-style:normal;color:#fff;background:linear-gradient(90deg,#90cea1,#01b4e4)}
.past .sc{opacity:.7}
.empty{padding:40px 16px;text-align:center;color:var(--stone);text-wrap:pretty}
.empty b{display:block;color:var(--jasmine);font-size:17px;margin-bottom:14px}
.btn-primary{height:40px;padding:0 16px;border-radius:8px;background:var(--lamp);color:var(--lamp-ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--hairline);color:var(--stone);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn-ghost:hover{color:var(--jasmine);border-color:var(--stone-2)}


/* sheets */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(6,9,18,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{background:var(--dusk);width:100%;max-width:640px;max-height:90dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:12px 12px 0 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 16px)}
@media (min-width:700px){.sheet{align-items:center}.sheet-panel{border-radius:12px}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sheet-head h2{margin:0;font-size:19px;font-weight:800;}
/* the sheet's close (✕ / Done) is the corner target people aim for: reach the panel's edge and a little around it, so a near miss on the header still closes (a «dead tap» on div.sheet-head, 2026-11-06) */
.sheet-head [data-close],.sheet-head [data-fr="close"]{position:relative;min-width:44px;justify-content:center}
.sheet-head [data-close]::after,.sheet-head [data-fr="close"]::after{content:'';position:absolute;inset:-8px -16px -8px -3px}
.search{display:block;margin-bottom:6px}
.search input{width:100%;height:44px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--night);color:var(--jasmine);font:inherit}
.search input:focus{outline:2px solid var(--lamp);outline-offset:0;border-color:transparent}
.area-list{list-style:none;margin:0;padding:0}
.area-list label{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 4px;border-bottom:1px solid var(--hairline);cursor:pointer}
.area-list label:hover{background:var(--dusk-2)}
.area-list input{width:22px;height:22px;accent-color:var(--lamp);margin:0;flex:0 0 auto}
.area-list .nm{font-weight:600;flex:1;min-width:0}
.area-list .ct{color:var(--stone-2);font-size:12px;font-variant-numeric:tabular-nums}
/* film detail */
.fd-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;margin-bottom:12px}
.fd-head .poster{width:96px;height:144px}
.fd-head h2{margin:0 0 2px;font-size:21px;font-weight:800;line-height:1.15;text-wrap:balance}
.fd-head .meta{color:var(--stone);font-size:13px;margin-bottom:6px}
.fd-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fd-cin{padding:10px 0;border-top:1px solid var(--hairline)}
.fd-cin .nm{font-weight:700}
.fd-cin .nm.mine::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lamp);margin-right:7px;vertical-align:middle}
.fd-cin .ar{color:var(--stone-2);font-size:12px;margin-left:6px;font-weight:500}
.fd-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fd-days span{font-size:12px;height:26px;padding:0 8px;border-radius:var(--radius-s);background:var(--dusk-2);color:var(--stone);display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.fd-days span b{color:var(--jasmine);font-weight:600}
.fd-days span.today{color:var(--lamp)}
.fd-days span.today b{color:var(--lamp)}

.foot{text-align:center;padding:8px 16px;color:var(--stone-2);font-size:12px;text-wrap:pretty}
.foot a{color:var(--stone)}
.stale-note{color:var(--lamp)}

/* posters in rows (switchable) */
.row .poster{width:40px;height:60px;border-radius:4px}
html.no-posters .row{grid-template-columns:66px minmax(0,1fr)}
html.no-posters .row .poster{display:none}
/* header dropdowns */
.dd{position:relative}
.dd-btn{height:36px;padding:0 10px 0 12px;border-radius:8px;border:1px solid var(--hairline);color:var(--jasmine);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dd-btn .chev{width:14px;height:14px;color:var(--stone);flex:0 0 auto}
.dd-btn:hover{border-color:var(--stone-2)}
.dd-btn.today{color:var(--lamp)}
.menu[hidden]{display:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain;background:var(--dusk-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:30}
.menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 10px;border-radius:var(--radius-s);font-size:14px;font-weight:500;color:var(--jasmine);text-align:left}
.menu button:hover{background:var(--dusk)}
.menu button[aria-checked=true]{font-weight:700}
.menu button[aria-checked=true]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lamp)}
.menu button small{color:var(--stone-2);font-variant-numeric:tabular-nums;margin-left:auto;margin-right:8px}
.menu button.today{color:var(--lamp)}
/* favourite star on cinema */
.cin-h{grid-template-columns:auto 1fr auto}
.star{width:32px;height:32px;margin:-4px 0 0 -8px;border-radius:50%;display:grid;place-items:center;color:var(--stone-2)}
.star:hover{color:var(--lamp);background:var(--dusk-2)}
.star[aria-pressed=true]{color:var(--lamp)}
.star svg{width:20px;height:20px}
/* settings */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--hairline)}
.set-row>.lbl{min-width:0}
.set-row>.seg{flex:0 0 auto}
.set-row .lbl{font-weight:600}
.set-row .sub{display:block;font-size:12px;color:var(--stone-2);font-weight:400}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:var(--night);border:1px solid var(--hairline)}
.seg button{height:30px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--stone)}
.seg button[aria-pressed=true]{background:var(--dusk-2);color:var(--jasmine)}
.switch{position:relative;width:46px;height:28px;border-radius:999px;background:var(--dusk-2);border:1px solid var(--hairline);flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--stone);transition:transform .15s ease,background-color .15s ease}
.switch[aria-checked=true]{background:var(--lamp);border-color:var(--lamp)}
.switch[aria-checked=true]::after{transform:translateX(18px);background:var(--lamp-ink)}
@media (prefers-reduced-motion:reduce){.switch::after{transition:none}}
.fav-h h2{color:var(--lamp)}
.row-empty{padding:10px 14px 12px;color:var(--stone-2);font-size:13px;border-top:1px solid var(--hairline)}
.chip.fav{color:var(--lamp);border-color:color-mix(in srgb,var(--lamp) 35%,transparent)}

/* share */
.cin-actions{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.share{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--stone-2);margin:-4px -8px -6px 0}
.share:hover{color:var(--jasmine);background:var(--dusk-2)}
.share svg{width:18px;height:18px}
.btn-ghost svg{width:16px;height:16px}
.toast[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);width:max-content;max-width:min(560px, calc(100vw - 32px));text-align:center;background:var(--jasmine);color:var(--night);font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.3)}

@media (min-width:700px){
  .row{grid-template-columns:70px 48px minmax(0,1fr);padding:12px 16px}
  .row .poster{width:48px;height:72px}
  html.no-posters .row{grid-template-columns:70px minmax(0,1fr)}
  .cin-h{padding:14px 16px 10px}
}

/* desktop: one column per area, cinemas stacked inside */
@media (min-width:900px){
  .main{max-width:1100px}
  .head-inner{max-width:1068px}
  .main{display:block;padding-top:32px}
  .area{margin-top:36px}
  .area:first-child{margin-top:0}
  .area-h{padding-top:14px;padding-bottom:10px;margin-bottom:16px}
  .area-h h2{font-size:16px}
  .masonry{display:flex;gap:20px;align-items:flex-start}
  .masonry>.cinema{flex:1 1 0;min-width:0}
  .masonry.measure{display:grid;grid-template-columns:repeat(var(--mcols,2),minmax(0,1fr));gap:0 20px;align-items:start}
  .mcol{flex:1 1 0;min-width:0}
  .cin-area{padding:14px 16px 0;font-size:12px;font-weight:700;color:var(--lamp);display:flex;align-items:center;gap:6px}
  .cin-area::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--lamp)}
  .cin-area+.cin-h{padding-top:6px}
  .row{grid-template-columns:70px 72px minmax(0,1fr);padding:12px 16px;gap:12px}
  .row .poster{width:72px;height:108px}
  html.no-posters .row{grid-template-columns:70px minmax(0,1fr)}
  .empty{grid-column:1/-1}
}

/* film sheet: context + grouped cinemas */
.btn-ghost svg{width:15px;height:15px}
.fd-ctx{border:1px solid color-mix(in srgb,var(--lamp) 45%,transparent);background:color-mix(in srgb,var(--lamp) 7%,transparent);border-radius:var(--radius);padding:12px 14px;margin:6px 0 4px}
.fd-ctx-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fd-ctx-h b{font-size:17px;font-weight:800;}
.fd-ctx-h span{font-size:12px;color:var(--stone)}
.fd-ctx-now{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.fd-ctx-now .lbl{font-size:12px;font-weight:700;color:var(--lamp);margin-right:4px}
.fd-ctx .fd-days{margin-top:8px}
.fd-ctx-meta{margin-top:8px;font-size:12px;color:var(--stone)}
.fd-sub{font-size:13px;color:var(--stone);margin:16px 0 4px;font-weight:600}
.fd-area{margin-top:8px}
.fd-area-h{font-size:12px;font-weight:700;color:var(--stone-2);padding:6px 0 2px;display:flex;align-items:center;gap:6px}
.fd-area.mine .fd-area-h{color:var(--lamp)}
.fd-area.mine .fd-area-h::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--lamp)}
.fd-cin{padding:8px 0 8px 9px;border-top:1px solid var(--hairline)}
.fd-days b u{text-decoration:none;color:var(--lamp)}

.row .blurb{display:none;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--stone);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.fd-overview{margin:4px 0 8px;font-size:14px;line-height:1.5;color:var(--stone);text-wrap:pretty}
@media (min-width:900px){.row .blurb{display:-webkit-box}}

/* filters */
.empty .btn-ghost{margin-top:4px}
/* star inside the film sheet */
.star.sm{width:26px;height:26px;margin:0 4px 0 -4px;vertical-align:middle;display:inline-grid}
.star.sm svg{width:17px;height:17px}
.fd-ctx-h b{display:inline-flex;align-items:center}
.fd-cin .nm{display:inline-flex;align-items:center}

/* no-poster placeholder */
.poster.none{display:grid;place-items:center;color:var(--stone-2);background:var(--dusk-2)}
.poster.none svg{width:62%;height:auto}
.row .poster.none{width:40px;height:60px}
.fd-head .poster.none{width:96px;height:144px}
@media (min-width:700px){.row .poster.none{width:48px;height:72px}}
@media (min-width:900px){.row .poster.none{width:72px;height:108px}}
.menu button.past{color:var(--stone-2)}
.menu-note{padding:8px 10px 4px;font-size:11.5px;color:var(--stone-2);border-top:1px solid var(--hairline);margin-top:4px}

/* header group toggle */
.seg.seg-sm{height:36px;padding:2px;gap:2px}
.seg.seg-sm button{height:30px;padding:0 11px;font-size:13px}
.seg.seg-sm button[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink)}
/* group-by-film cards */
.fcard{background:var(--dusk);border-radius:var(--radius);margin-bottom:12px;position:relative}
.fcard .fc-cins>:last-child{border-radius:0 0 var(--radius) var(--radius)}
.fc-cin:has(.menu:not([hidden])){z-index:2;position:relative}
.fc-head{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px;cursor:pointer}
.fc-head .poster{width:84px;height:126px;border-radius:8px}
.fc-head .poster.none{width:84px;height:126px}
html.no-posters .fc-head{grid-template-columns:minmax(0,1fr)}
html.no-posters .fc-head .poster{display:none}
.fc-body{min-width:0}
.fc-body .title{font:inherit;font-weight:800;font-size:19px;line-height:1.15;text-align:left;text-wrap:balance;display:block;color:var(--jasmine)}
.fc-body .title:hover{color:var(--lamp)}
.fc-body .meta{color:var(--stone);font-size:13px;margin-top:3px}
.fc-blurb{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--stone);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.fc-cins{border-top:1px solid var(--hairline)}
.fc-cin{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--hairline);cursor:pointer;align-items:flex-start}
.fc-cin:first-child{border-top:0}
.fc-cin:hover{background:var(--dusk-2)}
.fc-cin-l{min-width:0}
.fc-cin .nm{display:block;font-weight:650;font-size:15px;display:flex;align-items:center;gap:6px}
.fav-dot{width:7px;height:7px;border-radius:50%;background:var(--lamp);flex:0 0 auto}
.fc-cin .ar{display:block;font-size:12px;color:var(--stone-2)}
.fc-cin-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;max-width:55%}
.fc-times{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.fc-times b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:6px;background:var(--dusk-2)}
.fc-times b.past{opacity:.7;text-decoration:line-through}
.fc-cin .fd-days{justify-content:flex-end;margin-top:0}
.fc-cin .fd-days span{height:22px;font-size:11px}
.fc-more{display:block;width:100%;padding:10px 14px;border-top:1px solid var(--hairline);text-align:left;font-size:13px;color:var(--lamp);font-weight:600}
.fc-more:hover{background:var(--dusk-2)}
@media (min-width:900px){
  .fc-head{grid-template-columns:110px minmax(0,1fr);padding:16px}
  .fc-head .poster,.fc-head .poster.none{width:110px;height:165px}
  .fc-blurb{-webkit-line-clamp:4}
  .masonry>.fcard{flex:1 1 0;min-width:0}
}

/* desktop header: brand · … · people + profile; below it the view toggle (Σινεμά · Ταινίες · Φίλοι) with the filters to its right (areas, day, sort, year, IMDb, RT, past … cog) */
@media (min-width:900px){
  .head-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand . right" "seg quick quick";column-gap:16px;align-items:center;padding-bottom:2px}
  .brand-row{display:contents}
  .brand{grid-area:brand}
  .brand-row .ctl-right{grid-area:right}
  .ctl-row{grid-area:seg;padding:0}
  .ctl-row>.seg{width:auto}.ctl-row>.seg button{flex:0 0 auto;padding:0 14px}
  .quick-row,.subhead-row{grid-area:quick;padding:0}
}

/* area chips as quick filters */
.chip.zone[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp);font-weight:700}
.chip.clear:hover{color:var(--jasmine)}

/* active filters row */
.filters-row[hidden]{display:none}
.filters-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 0 12px;margin-top:-4px}
.flbl{font-size:12px;color:var(--stone-2);font-weight:600;margin-right:2px}
.fchip{display:inline-flex;align-items:center;height:30px;padding:0 4px 0 11px;border-radius:8px;background:color-mix(in srgb,var(--lamp) 14%,transparent);border:1px solid color-mix(in srgb,var(--lamp) 45%,transparent);color:var(--lamp);font-size:13px;font-weight:600;gap:2px}
.fchip button{width:26px;height:26px;border-radius:50%;color:var(--lamp);font-size:12px;display:grid;place-items:center}
.fchip button:hover{background:color-mix(in srgb,var(--lamp) 25%,transparent)}
.filters-row .link{font-size:12px;margin-left:4px}
@media (min-width:900px){.filters-row{grid-column:1/-1}}

/* cinema menu inside the film sheet */
.fd-ctx-h .cin-name,.fd-cin .cin-name{font:inherit;font-weight:inherit;font-size:inherit}
.fd-cin .cin-dd .menu,.fd-ctx-h .cin-dd .menu{top:calc(100% + 4px)}
.sheet-panel .cin-dd{position:relative}
.fd-cin:has(.menu:not([hidden])),.fd-ctx:has(.menu:not([hidden])){position:relative;z-index:3}
.menu.portal{box-shadow:0 16px 40px rgba(0,0,0,.45)}
/* header collapse on scroll: the header keeps its size; when compact it sticks at a negative
   offset so the brand + control rows slide out and only the chip row stays pinned. No layout shift. */
.head{transition:top .22s ease}
.area-h{transition:top .22s ease}   /* moves with the header (same curve), so no gap opens while it slides back */
/* collapsed: the header's rows slide under the status bar; a band in the page colour keeps them from showing through it */
html.compact .head::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--night);z-index:1}
html.compact .head{top:calc(-1 * var(--collapse,90px))}
html.compact{--head-off:var(--collapse,90px)}
.area-h{top:calc(var(--head-h,104px) - var(--head-off,0px))}
.area,.cinema,.row{scroll-margin-top:calc(var(--head-h,104px) - var(--head-off,0px) + 8px)}
@media (prefers-reduced-motion:reduce){.head,.area-h{transition:none}}

/* Χειμερινά (indoor) mode: same system, cooler lamp — a projector in a dark hall instead of a summer sky */
html[data-mode=indoor]{--lamp:#7db8ff;--lamp-ink:#061a33;--night:#0b0f1a;--dusk:#111726;--dusk-2:#18213a}
html[data-mode=indoor][data-theme=day]{--lamp:#1f66b5;--lamp-ink:#fff;--night:#eef2f7;--dusk:#ffffff;--dusk-2:#e6ecf5}
html[data-mode=indoor] .sun{background:var(--lamp);box-shadow:inset -4px -2px 0 0 var(--night)}

/* mode picker at the top of settings */
/* denser sheets on phones */
@media (max-width:699px){
  .sheet-panel{padding:10px 12px calc(env(safe-area-inset-bottom) + 12px)}
  .sheet-head{margin-bottom:8px}
  .set-row{min-height:46px;gap:8px}
  .area-list label{min-height:46px;padding:4px 2px}
}

/* ===== friends: who's going, invites, accounts (friends.js) ===== */
.dd[hidden]{display:none}
.seg.seg-sm button{display:inline-flex;align-items:center;padding:0 10px}
.fr-right{display:flex;align-items:center;gap:2px}
.fr-right:empty{display:none}
.fr-badge{min-width:17px;height:17px;border-radius:9px;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;background:var(--rotten);color:#fff;padding:0 4px;line-height:1;margin-left:5px;font-variant-numeric:tabular-nums}
.fr-ibtn{position:relative}
.fr-ibtn svg{width:21px;height:21px}
.fr-ibtn .fr-badge{position:absolute;top:1px;right:-1px;margin:0;border:2px solid var(--night);min-width:19px;height:19px}
.fr-ibtn .av{width:28px;height:28px;font-size:12px;border:0}
/* Πάω: the time chip itself, everywhere a showtime appears */
.tchip svg{width:12px;height:12px;flex:0 0 auto}
.row .time small{margin-top:4px}
.row.mine{background:color-mix(in srgb,var(--lamp) 6%,transparent);box-shadow:inset 3px 0 0 var(--lamp)}
.tchip{position:relative;display:inline-flex;align-items:center;gap:3px;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 6px 2px 8px;border-radius:6px;background:var(--dusk-2);color:var(--jasmine);border:1px solid transparent;transition:background-color .2s,color .2s,box-shadow .3s}
.tchip svg{color:var(--stone-2)}
.tchip:hover:not(:disabled){border-color:var(--stone-2)}
.tchip.on,.tchip.on:hover{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp);box-shadow:0 0 14px -4px color-mix(in srgb,var(--lamp) 70%,transparent)}
.tchip.on svg{color:var(--lamp-ink)}
.tchip.hi:not(.on){border-color:var(--lamp)}
.tchip:disabled{opacity:.45;cursor:default}
.tchip:disabled:not(.on){text-decoration:line-through}
.fd-ctx-now .tchip{font-size:18px}
[data-fr=go].pop .check path{stroke-dasharray:20;stroke-dashoffset:20;animation:fr-draw .35s .08s ease-out forwards}
.pop{animation:fr-pop .42s cubic-bezier(.3,1.6,.5,1)}
.fr-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--lamp);pointer-events:none;animation:fr-spark .6s ease-out forwards}
.fd-ctx-now{gap:6px}
/* avatars: generated default = name-hued dusk sky + setting lamp sun; photo on top when set */
.av{--h:220;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;flex:0 0 auto;border:2px solid var(--dusk);position:relative;overflow:hidden;line-height:1;
  background:radial-gradient(circle at 78% 108%,#f3c05a 0 32%,transparent 33%),linear-gradient(165deg,hsl(var(--h) 45% 24%),hsl(calc(var(--h) + 35) 55% 46%));text-shadow:0 1px 2px rgba(0,0,0,.35)}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av.lg{width:40px;height:40px;font-size:16px;border:0}
.av.xl{width:88px;height:88px;font-size:34px;border:0}
.av.xxl{width:112px;height:112px;font-size:42px;border:0}
.av.at{background:var(--dusk-2);color:var(--stone);text-shadow:none}
.av.enter{animation:fr-enter .45s cubic-bezier(.3,1.5,.5,1)}
.fr-stack{display:inline-flex;align-items:center;padding-left:7px;flex:0 0 auto}
.fr-stack .av,.fr-stack .more{margin-left:-7px}
.fr-stack .more{width:24px;height:24px;border-radius:50%;background:var(--dusk-2);color:var(--jasmine);font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;border:2px solid var(--dusk)}
/* faces strip */
.fr-faces{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 0;border-radius:8px;text-align:left;font-size:12.5px;color:var(--stone);width:fit-content;max-width:100%;min-width:0}
.fr-faces:hover{background:var(--dusk-2)}
.fr-faces .nm{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3}   /* narrow columns: «Ιωάννα & Μαρία πάνε» wraps to a 2nd line instead of losing the verb */
.fr-faces .nm b{color:var(--jasmine);font-weight:600}
.row .fr-faces{grid-column:1/-1;margin:-2px 0 -4px}
.row:hover .fr-faces:hover{background:var(--dusk)}
.fc-cin .fr-faces{margin:5px 0 0;padding:3px 8px 3px 0}
.fr-faces.sm .fr-stack .av,.fr-faces.sm .more{width:22px;height:22px}
.fd-ctx .fr-faces{margin-top:8px}
/* header: friend chips / sub-screen title */
.fr-chip.person{padding-left:3px}
.fr-chip.person .av{width:26px;height:26px;border:0;font-size:11px}
.fr-chip[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp);font-weight:600}
.fr-back{display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 12px 0 6px;border:1px solid var(--hairline);border-radius:8px;color:var(--jasmine);font-size:14px;font-weight:600;flex:0 0 auto}
.fr-back:hover{background:var(--dusk-2);border-color:var(--stone-2)}
.fr-back svg{width:18px;height:18px}
.fr-title{margin:0;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-row-note{color:var(--stone);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Φίλοι feed */
.fr-cards{display:grid;gap:8px}
.pcard{display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;background:var(--dusk);border-radius:var(--radius);padding:10px;position:relative}
html.no-posters .pcard{grid-template-columns:minmax(0,1fr)}
.pcard.mine::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--lamp)}
.pcard .poster{width:48px;height:72px;border-radius:4px;object-fit:cover}
.pc-body{min-width:0}
.pcard .title{font-weight:700;font-size:15.5px;line-height:1.25;text-align:left;display:block}
.pcard button.title:hover{color:var(--lamp)}
.pcard .where{font-size:13px;color:var(--stone);margin-top:1px}
.pcard .bottom{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0}
.pcard .bottom .fr-faces{padding:3px 6px 3px 0;flex:0 1 auto}
.pcard.past{opacity:.6}
.fr-banner{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:color-mix(in srgb,var(--lamp) 9%,var(--dusk));border:1px solid color-mix(in srgb,var(--lamp) 35%,transparent);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
.fr-banner .t{flex:1;min-width:0;font-size:13px;color:var(--stone)}
.fr-banner .t b{display:block;color:var(--jasmine);font-size:14.5px}
.fr-banner .av,.fr-banner .more{border-color:color-mix(in srgb,var(--lamp) 9%,var(--dusk))}
.fr-chev{width:16px;height:16px;flex:0 0 auto;color:var(--stone)}
.fr-empty{border:1px dashed color-mix(in srgb,var(--lamp) 35%,transparent);border-radius:var(--radius);padding:22px 16px;text-align:center;color:var(--stone);font-size:14px;margin:6px auto 0;max-width:520px;text-wrap:pretty}
.fr-empty b{display:block;color:var(--jasmine);font-size:17px;margin-bottom:4px}
.fr-empty .btn-primary{display:flex;width:fit-content;margin:14px auto 0}
/* Πάνε with nothing planned (friends.js friendsWeek): a one-line note, then what friends rated well and the week's best */
.fr-note{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--stone);padding:10px 12px;border-radius:var(--radius);background:color-mix(in srgb,var(--lamp) 6%,var(--dusk));margin-bottom:14px;text-wrap:pretty}
.fr-note svg{width:18px;height:18px;flex:0 0 auto;color:var(--lamp)}
.fr-note b{color:var(--jasmine)}
.fr-invite{text-align:center;padding:22px 18px 20px;border-radius:var(--radius);background:color-mix(in srgb,var(--lamp) 8%,var(--dusk));color:var(--stone);font-size:14px;margin-bottom:18px}
.fr-invite>b{display:block;color:var(--jasmine);font-size:19px;margin-bottom:2px}
.fr-invite .btn-primary{display:flex;width:fit-content;margin:16px auto 0}
/* the friends-week sections sit inside a card/column: a plain heading, not the programme's sticky bar */
.fr-week .area-h{position:static;background:none;box-shadow:none;padding:4px 4px 0 2px;margin:0 0 10px}
.fr-week .area-h span{flex:0 0 auto;white-space:nowrap}
.fr-week+.fr-week{margin-top:22px}
.fw-card .where b{color:var(--lamp);font-weight:650}
.fw-card .where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.fw-meta{font-size:12.5px;color:var(--stone-2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-card .scores{margin-top:5px}
/* sub-screens */
.fr-screen{max-width:560px;margin:0 auto}
.fr-search{display:flex;align-items:center;gap:8px;height:44px;border-radius:12px;border:1px solid var(--hairline);background:var(--dusk);padding:0 12px;color:var(--stone);width:100%}
.fr-search input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--jasmine);outline:0;font:inherit;font-size:16px}
.fr-search:focus-within{outline:2px solid var(--lamp);outline-offset:0;border-color:transparent}
.fr-search svg{width:18px;height:18px;flex:0 0 auto}
.fr-search.as-btn span{color:var(--stone-2)}
.fr-search.as-btn:hover{border-color:var(--stone-2)}
.fr-sec{margin:22px 2px 8px;font-size:13px;font-weight:700;color:var(--stone-2);display:flex;align-items:center;gap:6px}
.fr-sec .fr-badge{letter-spacing:0;margin:0}
.fr-plist{list-style:none;margin:0;padding:0;background:var(--dusk);border-radius:var(--radius)}
.fr-plist.flat{background:none;border:0}
.fr-plist li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-top:1px solid var(--hairline);transition:opacity .22s}
.fr-plist.flat li{padding:9px 0}
.fr-plist li:first-child{border-top:0}
.fr-plist li.gone{opacity:0}
.fr-plist .nm{flex:1;min-width:0;font-weight:600;font-size:14.5px;text-align:left;overflow-wrap:anywhere}
.fr-plist button.nm:hover{color:var(--lamp)}
.fr-plist .nm small{display:block;color:var(--stone-2);font-weight:500;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-plist .acts{display:flex;gap:6px;flex:0 0 auto}
.fr-bs{height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:700;border:1px solid var(--hairline);color:var(--stone);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.fr-bs:hover:not(:disabled){color:var(--jasmine);border-color:var(--stone-2)}
.fr-bs.lamp,.fr-bs.lamp:hover:not(:disabled){background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}
.fr-bs.done,.fr-btn.done{color:var(--fresh);border-color:color-mix(in srgb,var(--fresh) 40%,transparent);background:color-mix(in srgb,var(--fresh) 12%,transparent)}
.fr-bs:disabled,.fr-btn:disabled{cursor:default;opacity:.55}
.fr-bs.done:disabled,.fr-btn.done:disabled{opacity:1}
.fr-quota{background:color-mix(in srgb,var(--lamp) 8%,var(--dusk));border:1px solid color-mix(in srgb,var(--lamp) 35%,transparent);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--stone);margin:10px 0}
.fr-quota b{color:var(--jasmine)}
.fr-hint{font-size:12.5px;color:var(--stone-2);margin:8px 2px 0;text-wrap:pretty}
.fr-hint .link,.fr-fine .link{color:var(--lamp);font-weight:600;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.fr-linkmeta{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;margin-top:10px}
.fr-linkmeta .sep{color:var(--stone-2)}
.fr-linkmeta .link{position:relative;padding:8px 4px;margin:-8px -4px;line-height:inherit}   /* 30px+ hit area, same line box */
.fr-notfound{text-align:center;padding:18px 8px 6px;color:var(--stone);font-size:14px}
.fr-notfound b{display:block;color:var(--jasmine);font-size:15.5px;margin-bottom:2px;overflow-wrap:anywhere}
.fr-field{display:flex;gap:8px}
.fr-field[hidden],.fr-gbtn[hidden],.fr-or[hidden],.fr-hint[hidden],.fr-upl[hidden]{display:none}
.fr-field input{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid var(--hairline);background:var(--night);color:var(--jasmine);padding:0 12px;font:inherit;font-size:16px}
.fr-screen .fr-field input{background:var(--dusk)}
.fr-field input:focus{outline:2px solid var(--lamp);outline-offset:0;border-color:transparent}
.fr-field .fr-bs{height:44px;padding:0 16px}
.fr-err{color:var(--rotten);font-size:13px;margin:8px 2px 0;font-weight:600}
.fr-err:empty{display:none}
.fr-btn{height:46px;width:100%;border-radius:12px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;border:1px solid transparent}
.fr-btn.lamp{background:var(--lamp);color:var(--lamp-ink)}
.fr-btn.lamp:hover:not(:disabled){filter:brightness(1.06)}
.fr-btn.ghost{border-color:var(--hairline);color:var(--stone)}
.fr-btn.ghost:hover{color:var(--jasmine);border-color:var(--stone-2)}
.fr-fine{color:var(--stone-2);font-size:12px;text-align:center;margin:14px 0 0;text-wrap:pretty}
.fr-sub{color:var(--stone);font-size:13.5px;margin:2px 0 0;text-wrap:pretty}
/* sheets + user card */
.fr-sheet{z-index:45}
.fr-sheet .sheet-panel{animation:fr-up .28s cubic-bezier(.2,.9,.3,1)}
.fr-sheet .sheet-head{align-items:flex-start}
.fr-sheet .sheet-head h2{text-wrap:balance}
.fr-modal[hidden]{display:none}
.fr-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(6,9,18,.6);padding:24px;animation:fr-fade .2s}
.fr-card{width:100%;max-width:360px;background:var(--dusk);border-radius:12px;padding:22px 18px 16px;text-align:center;animation:fr-rise .3s cubic-bezier(.2,1.2,.4,1)}
.fr-card>.av{display:grid;margin:0 auto}
.fr-card h2{margin:12px 0 2px;font-size:20px;font-weight:800;overflow-wrap:anywhere}
.fr-card .mut{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 10px;font-size:13px;color:var(--stone);min-height:24px}
.fr-card .mut .av,.fr-card .mut .more{border-color:var(--dusk)}
.fr-lock{font-size:12px;color:var(--stone-2);margin:10px 0 0}
/* sign-in */
.fr-si{margin-top:14px}
.fr-gbtn{position:relative;height:44px;display:flex;justify-content:center;align-items:center;color-scheme:light}   /* GIS iframe: keeps its background transparent on the dark page */
.fr-gskel{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:min(400px,100%);height:40px;border-radius:999px;background:var(--dusk-2);overflow:hidden;transition:opacity .25s;pointer-events:none}
.fr-gskel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--jasmine) 9%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:fr-shimmer 1.3s ease-in-out infinite}
.fr-gin{opacity:0;transition:opacity .25s;min-height:40px}
.fr-gbtn.ready .fr-gin{opacity:1}
.fr-gbtn.ready .fr-gskel{opacity:0}
.fr-or{display:flex;align-items:center;gap:10px;color:var(--stone-2);font-size:12px;margin:14px 0}
.fr-or::before,.fr-or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.fr-ts{display:flex;justify-content:center;height:0;overflow:hidden}                /* invisible Turnstile: no space unless it has to ask */
.fr-ts.show{height:auto;overflow:visible;margin-top:10px}
.fr-si-h{margin:0;font-size:17px;font-weight:800}
.fr-codeform{margin-top:14px}
.fr-code{display:block;width:100%;height:56px;border-radius:12px;border:1px solid var(--hairline);background:var(--night);color:var(--jasmine);text-align:center;font:700 26px/1 var(--font);letter-spacing:.4em;padding:0 0 0 .4em;font-variant-numeric:tabular-nums}
.fr-code:focus{outline:2px solid var(--lamp);outline-offset:0;border-color:transparent}
.fr-code::placeholder{color:var(--stone-2);letter-spacing:.3em}
/* invite landing */
.fr-land{max-width:420px;margin:0 auto;padding:12px 4px 10px;text-align:center}
.fr-hero{display:inline-flex;flex-direction:column;align-items:center;padding:18px 26px 0;border-radius:12px;background:color-mix(in srgb,var(--lamp) 5%,var(--night));overflow:hidden}
.fr-hero .av{display:grid}
.fr-hero .adm{margin-top:14px;border-top:1px dashed color-mix(in srgb,var(--lamp) 45%,transparent);width:calc(100% + 52px);padding:9px 0;font-size:13px;font-weight:700;color:var(--lamp)}
.fr-land h3{font-size:22px;margin:22px 0 6px;text-wrap:balance}
.fr-land>p{color:var(--stone);font-size:14px;margin:0 0 18px;text-wrap:pretty}
.fr-plan{display:flex;gap:12px;align-items:center;text-align:left;background:var(--dusk);border-radius:10px;padding:10px;margin:0 0 16px}
.fr-plan-t{flex:0 0 auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;padding:10px 8px;border:1px dashed color-mix(in srgb,var(--lamp) 55%,transparent);border-radius:7px;color:var(--lamp)}
.fr-plan b{display:block;font-size:14.5px}
.fr-plan span{font-size:13px;color:var(--stone)}
.fr-land .fr-si{text-align:left}
.fr-land .fr-hint{text-align:left}
/* profile + crop */
.fr-prof{text-align:center;padding:10px 0 6px}
.fr-avwrap{position:relative;display:inline-block}
.fr-avwrap .av{display:grid}
.fr-cam{position:absolute;right:-2px;bottom:2px;width:34px;height:34px;border-radius:50%;background:var(--lamp);color:var(--lamp-ink);display:grid;place-items:center;border:3px solid var(--night)}
.fr-cam svg{width:15px;height:15px}
.fr-prof .acts{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fr-box{background:var(--dusk);border-radius:var(--radius);margin-top:12px}
.fr-set{display:flex;align-items:center;gap:12px;padding:12px;border-top:1px solid var(--hairline);font-size:14.5px;font-weight:600}
.fr-set:first-child{border-top:0}
.fr-set .t{flex:1;min-width:0}
.fr-set .t small{display:block;color:var(--stone-2);font-size:12px;font-weight:400;overflow-wrap:anywhere}
.fr-set input.txt{background:none;border:0;border-bottom:1px dashed var(--hairline);color:var(--jasmine);font:inherit;font-weight:600;text-align:right;outline:0;width:min(200px,60%);font-size:16px;padding:4px 0}
.fr-set input.txt:focus{border-bottom-color:var(--lamp)}
.fr-danger{color:var(--rotten);font-weight:600;font-size:14.5px;padding:13px;display:block;width:100%;text-align:center}
.fr-danger.plain{color:var(--jasmine);border-bottom:1px solid var(--hairline)}
.fr-crop{position:relative;margin:4px auto 0;width:min(320px,100%);aspect-ratio:1;border-radius:12px;overflow:hidden;background:#000;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.fr-crop:active{cursor:grabbing}
.fr-crop img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none}
.fr-crop::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(6,9,18,.62);border:2px solid rgba(255,255,255,.75);pointer-events:none}
.fr-zoom{display:flex;align-items:center;gap:10px;margin:14px auto 0;max-width:320px;color:var(--stone)}
.fr-zoom input{flex:1;accent-color:var(--lamp)}
.fr-upl{height:4px;border-radius:2px;background:var(--dusk-2);overflow:hidden;margin:12px auto 0;max-width:320px;position:relative}
.fr-upl i{position:absolute;top:0;bottom:0;width:40%;background:var(--lamp);border-radius:2px;animation:fr-indet 1.1s ease-in-out infinite}
.fr-screen>.fr-btn{max-width:320px;margin-left:auto;margin-right:auto}
@media (min-width:900px){
  .fr-cards{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
  .fr-main .fr-day .area-h{max-width:none}
}
@keyframes fr-pop{0%{transform:scale(1)}30%{transform:scale(.88)}70%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes fr-draw{to{stroke-dashoffset:0}}
@keyframes fr-spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes fr-enter{0%{transform:scale(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes fr-fade{from{opacity:0}}
@keyframes fr-rise{from{transform:translateY(14px) scale(.96);opacity:0}}
@keyframes fr-up{from{transform:translateY(40px);opacity:.4}}
@keyframes fr-indet{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){
  .tchip,.fr-modal,.fr-card,.fr-sheet .sheet-panel,.av.enter,.pop,.fr-plist li{animation:none!important;transition:none!important}
  .fr-spark{display:none}
  [data-fr=go].pop .check path{animation:none;stroke-dashoffset:0}
  .fr-upl i{animation:none;width:100%;opacity:.6}
}

/* ---- feed card: the whole card opens the film (title::after covers it); faces + time chip stay their own buttons ---- */
.pcard{cursor:pointer;transition:background-color .15s,border-color .15s,transform .12s}
.pcard .title{display:flex;align-items:flex-start;gap:4px;width:100%}
.pcard .title>span{min-width:0;flex:0 1 auto}
.pcard .title .fr-chev{width:15px;height:15px;flex:0 0 auto;margin:2px 0 0 auto;color:var(--stone-2)}
.pcard .title::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.pcard .title:focus-visible{outline:0}
.pcard:has(.title:focus-visible){outline:2px solid var(--lamp);outline-offset:2px}
.pcard .fr-faces,.pcard .tchip{position:relative;z-index:1}
.pcard .where{display:flex;align-items:center;gap:8px;margin-top:5px;min-width:0}
.pcard .where>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .bottom:empty{display:none}
@media (hover:hover){.pcard:hover{background:color-mix(in srgb,var(--jasmine) 4%,var(--dusk));border-color:var(--stone-2)}.pcard:hover .title .fr-chev{color:var(--lamp)}}
.pcard:has(.title:active){transform:scale(.985)}

/* ---- people view: Φίλοι | Προσκλήσεις toggle (the header's segmented control) ---- */
.fr-pane{display:flex;width:100%;max-width:360px;margin:0 auto 4px}
.fr-pane button{flex:1;justify-content:center}
.fr-pane .fr-badge{margin-left:6px}
.fr-row{width:100%;text-align:left}
.fr-row .fr-chev{width:16px;height:16px;color:var(--stone-2);flex:0 0 auto}
.fr-row .fr-badge{margin:0}
.fr-row:hover .t{color:var(--lamp)}
.fr-plist li.fresh{animation:fr-fresh 2.4s ease-out}
@keyframes fr-fresh{0%,35%{background:color-mix(in srgb,var(--lamp) 16%,transparent)}100%{background:transparent}}

/* ---- share-your-link card ---- */
.fr-share{background:var(--dusk);border:1px dashed color-mix(in srgb,var(--lamp) 40%,transparent);border-radius:var(--radius);padding:12px}
.fr-share>p{margin:0 0 10px;font-size:13.5px;color:var(--stone);text-wrap:pretty}
.fr-linkurl{display:block;width:100%;height:38px;border-radius:10px;border:1px solid var(--hairline);background:var(--night);color:var(--stone);font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 10px;text-overflow:ellipsis}
.fr-share .fr-btn{margin-top:8px;height:42px}
.fr-share .fr-linkmeta{margin:8px 2px 0}
.fr-land .fr-share{text-align:left;margin-top:14px}
.fr-sugg .nm{font-weight:600}

/* ---- header profile button (every tab) ---- */
.fr-me{flex:0 0 auto}
span.fr-me{pointer-events:none}

/* ---- user card: quiet unfriend + inline confirm ---- */
.fr-quiet{display:block;margin:10px auto 0;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--stone-2)}
.fr-quiet:hover{color:var(--rotten)}
.fr-unf{margin-top:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--rotten) 35%,transparent);background:color-mix(in srgb,var(--rotten) 8%,transparent);animation:fr-rise .2s ease-out}
.fr-unf p{margin:0 0 10px;font-size:13px;color:var(--jasmine);text-wrap:pretty}
.fr-unf .acts{display:flex;gap:8px;justify-content:center}
.fr-bs.danger,.fr-bs.danger:hover:not(:disabled){background:var(--rotten);border-color:var(--rotten);color:#fff}

/* ---- pending state (friends.js busy()): same width, spinner in the button's own colour ---- */
.is-busy{position:relative;cursor:progress}
:is(.fr-bs,.link,.fr-quiet).is-busy{color:transparent!important}
:is(.fr-bs,.link,.fr-quiet).is-busy>*{visibility:hidden}
:is(.fr-bs,.link,.fr-quiet).is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--spin,currentColor);border-right-color:transparent;box-sizing:border-box;animation:fr-spin .7s linear infinite;visibility:visible}
:is(.fr-btn,.fr-danger).is-busy::before{content:"";display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;box-sizing:border-box;animation:fr-spin .7s linear infinite;vertical-align:-3px;margin-right:8px;flex:0 0 auto}
.fr-btn.is-busy::before{margin-right:0}
.switch.is-busy::after{animation:fr-breathe .8s ease-in-out infinite alternate}
.fr-set:has(#frName.is-busy)::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--stone);border-right-color:transparent;box-sizing:border-box;animation:fr-spin .7s linear infinite;flex:0 0 auto}
.fr-bs.is-ok,.fr-bs.lamp.is-ok{color:var(--fresh);border-color:color-mix(in srgb,var(--fresh) 40%,transparent);background:color-mix(in srgb,var(--fresh) 12%,transparent)}
.fr-btn.is-ok{background:color-mix(in srgb,var(--fresh) 16%,transparent);color:var(--fresh)}
[data-fr=go]:not(.ticket).inflight::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:1.5px solid var(--lamp);pointer-events:none;animation:fr-ping 1.1s ease-out infinite}
.toast.tap{cursor:pointer;padding-right:34px}
.toast.tap::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-52%);font-size:18px;font-weight:700}
@keyframes fr-spin{to{transform:rotate(360deg)}}
@keyframes fr-breathe{from{opacity:1}to{opacity:.35}}
@keyframes fr-ping{0%{opacity:.75;transform:scale(.97)}100%{opacity:0;transform:scale(1.14)}}
@keyframes fr-shimmer{to{transform:translateX(100%)}}

/* ---- settings: small titled cards, label left / control right, one hairline between rows ---- */
.set-sec{margin:18px 2px 7px;font-size:13px;font-weight:700;color:var(--stone-2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.set-sec .link{font-size:12px;color:var(--lamp);font-weight:600}
.set-card{background:var(--night);border-radius:var(--radius);overflow:hidden}
.set-card+.set-sec{margin-top:18px}
.sheet-head+.set-card{margin-bottom:4px}
.set-card>.set-row{min-height:48px;padding:0 12px;border-bottom:0;border-top:1px solid var(--hairline);width:100%;text-align:left;font-size:14.5px}
.set-card>:first-child{border-top:0}
.set-row .val{margin-left:auto;color:var(--stone);font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-link .chev-r{width:14px;height:14px;color:var(--stone-2);flex:0 0 auto;transition:transform .15s}
.set-link[aria-expanded=true] .chev-r{transform:rotate(90deg)}
.set-link:hover .lbl{color:var(--lamp)}
.set-me{gap:10px}.set-me .av{width:32px;height:32px;font-size:13px}.set-me .lbl{flex:1;min-width:0}.set-me .fr-chev{width:16px;height:16px;color:var(--stone-2)}
.set-favs{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
.seg.seg-set{flex:0 0 auto}
.seg.seg-set button{height:28px;padding:0 10px;font-size:12.5px}
.set-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px 12px}
.fsel{display:flex;flex-direction:column;gap:4px;min-width:0}
.fsel>span{font-size:12px;color:var(--stone);font-weight:600}
.fsel select{width:100%;height:36px;border-radius:10px;border:1px solid var(--hairline);background:var(--dusk);color:var(--jasmine);font:inherit;font-size:14px;padding:0 8px}
.fsel select:focus-visible{outline:2px solid var(--lamp);outline-offset:0}
@media (prefers-reduced-motion:reduce){
  .is-busy::after,.is-busy::before,.fr-set:has(#frName.is-busy)::after,.switch.is-busy::after{animation:none!important}
  .switch.is-busy::after{opacity:.5}
  [data-fr=go].inflight::after{animation:none;opacity:.55}
  .fr-gskel::after{animation:none;display:none}
  .fr-plist li.fresh{animation:none;background:color-mix(in srgb,var(--lamp) 10%,transparent)}
  .pcard,.fr-unf{transition:none;animation:none}
  .pcard:has(.title:active){transform:none}
}
/* ---- calm header: one 36px height for every row-1 control, one quiet style, less padding ---- */
.head{padding-top:calc(env(safe-area-inset-top) + 6px)}
.brand-row{min-height:36px}
.brand{font-size:20px;line-height:36px}
.ctl-right{gap:4px}
.ctl-right .icon-btn,.ctl-right .dd-btn{height:36px;border:0;background:none;border-radius:8px;color:var(--stone)}
.ctl-right .icon-btn{width:36px;min-width:36px;padding:0}
.ctl-right .icon-btn:hover,.ctl-right .dd-btn:hover,.ctl-right .dd-btn[aria-expanded=true]{background:var(--dusk-2);color:var(--jasmine)}
.ctl-right .icon-btn svg{width:20px;height:20px}
.ctl-right .dd-btn{padding:0 8px 0 10px;gap:3px;font-size:14px;color:var(--jasmine)}
.ctl-right .dd-btn.today{color:var(--lamp)}
.ctl-right .fr-ibtn .av{width:28px;height:28px;font-size:12px}
.ctl-row{padding-top:6px}
.ctl-row>.seg.seg-sm{height:34px;padding:2px;border-color:var(--hairline)}
.ctl-row>.seg.seg-sm button{height:28px;font-size:13px}
/* chips row: one chip style (hairline outline, lamp fill when on), tighter rhythm */
.chip{height:32px;padding:0 12px;font-size:13.5px}
.chip.edit,.fr-chip.fr-add{background:none;border:1px solid var(--hairline);border-style:solid;color:var(--lamp)}
.chip.edit:hover,.fr-chip.fr-add:hover{border-color:var(--stone-2)}
.fr-chip.person .av{width:24px;height:24px}

/* ---- Πάω in cinema-mode rows = the ticket stub (mockup §1): time · dashed tear with side notches · ＋ πάω; → lamp + glow + ✓ πάω ---- */
.row .time{--notch:var(--dusk)}
.row.mine .time{--notch:color-mix(in srgb,var(--lamp) 8%,var(--dusk))}
.row:hover .time{--notch:var(--dusk-2)}   /* the notches are the row's colour cut into the ticket: they follow its hover */
.ticket{--tk-line:color-mix(in srgb,var(--stone) 30%,transparent);position:relative;width:62px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--tk-line);border-radius:8px;padding:8px 0 0;color:var(--jasmine);background:none;font:inherit;transition:background-color .2s,border-color .2s,color .2s,box-shadow .3s}
.ticket .tm{font-size:18px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ticket::before,.ticket::after{content:"";position:absolute;top:calc(100% - 30px);width:10px;height:10px;border-radius:50%;background:var(--notch,var(--dusk));border:1px solid var(--tk-line);box-sizing:border-box;transition:border-color .2s}
.ticket::before{left:-6px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-6px;clip-path:inset(0 50% 0 0)}
.ticket .lbl{margin-top:8px;width:100%;height:25px;border-top:1px dashed color-mix(in srgb,var(--stone) 38%,transparent);display:flex;align-items:center;justify-content:center;gap:2px;font-size:11.5px;font-weight:700;color:var(--stone);letter-spacing:0}
.ticket svg{width:12px;height:12px;flex:0 0 auto}
.ticket:hover:not(:disabled){--tk-line:var(--stone)}   /* the notches' border follows the ticket's (a gap opened at each notch) */
.ticket:hover:not(:disabled) .lbl{color:var(--jasmine)}
.ticket.on,.ticket.on:hover{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink)}
.ticket.on::before,.ticket.on::after{border-color:var(--lamp)}
.ticket.on .lbl{color:var(--lamp-ink);border-top-color:color-mix(in srgb,var(--lamp-ink) 35%,transparent)}
.ticket:disabled{cursor:default;opacity:.5}
.ticket:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.ticket.inflight .lbl{animation:fr-breathe .7s ease-in-out infinite alternate}   /* the notches own ::before/::after, so the in-flight cue lives on the label */
.row .time small{margin-top:5px;max-width:62px;text-align:center;overflow-wrap:anywhere}
.seg.seg-set .fr-badge{margin-left:4px;min-width:15px;height:15px;font-size:9.5px}

/* ---- film + cinema sheets: day picker, per-day going chips, cinema header actions ---- */
.fd-dayrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 8px;font-size:13px;color:var(--stone);font-weight:600}
.sh-dd .dd-btn{height:34px;border:1px solid var(--hairline);background:var(--night)}
.fd-cin-times,.cs-times{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fd-cin-none{font-size:12.5px;color:var(--stone-2);margin-top:4px}
.fd-cin .fr-faces{margin-top:6px}
.fd-cin .fd-days{margin-top:5px;opacity:.8}
.cs-title{min-width:0}
.cs-title .fr-sub b{color:var(--jasmine);font-weight:600}
.cs-acts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}   /* wraps: a scrolling row hid Κλήση/Κοινοποίηση/Πηγή off-screen on phones */
.cs-act{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:8px;border:1px solid var(--hairline);color:var(--stone);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;background:none}
.cs-act svg{width:16px;height:16px;flex:0 0 auto}
.cs-act:hover{color:var(--jasmine);border-color:var(--stone-2)}
.cs-act[aria-pressed=true]{color:var(--lamp);border-color:color-mix(in srgb,var(--lamp) 45%,transparent)}
.cs-act[aria-pressed=true] svg{fill:currentColor}
.cs-films{display:grid;gap:0;border-top:1px solid var(--hairline)}
.cs-film{display:grid;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:12px 0;border-bottom:1px solid var(--hairline)}
html.no-posters .cs-film{grid-template-columns:minmax(0,1fr)}
.cs-film.mine{box-shadow:inset 3px 0 0 var(--lamp);padding-left:10px;background:color-mix(in srgb,var(--lamp) 6%,transparent)}
.cs-film .poster{width:48px;height:72px;border-radius:4px;object-fit:cover}
.cs-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.cs-body .title{font-weight:700;font-size:15.5px;text-align:left;line-height:1.25}
.cs-body .title:hover{color:var(--lamp)}
.cs-body .meta{font-size:12.5px;color:var(--stone)}
.cs-body .fr-faces{margin-top:4px}
.sh-dd-one{font-weight:700;color:var(--jasmine);font-size:14px;padding:0 4px}
.sh-dd-one.today{color:var(--lamp)}

.fr-chip.fr-add{position:relative;min-width:34px;justify-content:center;padding:0 10px;font-size:17px;font-weight:600}
.fr-chip.fr-add .fr-badge{margin-left:5px;font-size:10.5px}

/* ---- friends sub-pages (people, invite, profile, crop, invite page): slim ← title header instead of the bars ---- */
html.fr-subpage .ctl-row,html.fr-subpage .quick-row{display:none}
.subhead-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 0 8px}
.subhead-row[hidden]{display:none}
.subhead-row .fr-title{font-size:18px;min-width:0}

/* day pickers: days already over sit after the upcoming ones, greyed with a «πέρασε» tag */
.menu button>span{display:inline-flex;align-items:center;gap:6px}
.past-tag{font-style:normal;font-size:12px;font-weight:600;color:var(--stone-2)}
.dd-btn.past{color:var(--stone)}
@media (prefers-reduced-motion:reduce){.ticket{transition:none}.ticket.inflight .lbl{animation:none;opacity:.6}}
.ctl-right .dd-btn.past{color:var(--stone)}

/* ---- compact header: row 1 brand · people + profile; row 2 Σινεμά|Ταινίες|Φίλοι; row 3 quick filters (Περιοχές ▾ · day ▾ … cog) ---- */
.head{padding-top:calc(env(safe-area-inset-top) + 4px)}
.brand-row{min-height:34px}
.brand{font-size:19px;line-height:34px}
.ctl-right .icon-btn{height:34px;width:34px;min-width:34px}
.ctl-right .fr-ibtn .av{width:26px;height:26px}
.ctl-right .fr-ibtn .fr-badge{top:-1px;right:-3px}
.ctl-row{padding-top:4px}
.ctl-row>.seg.seg-sm{height:32px}
.ctl-row>.seg.seg-sm button{height:26px}
.quick-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 0;min-height:44px}
.q-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.q-left>.dd[hidden]{display:none}
.q-btn{height:32px;padding:0 8px 0 9px;gap:5px;border:1px solid var(--hairline);background:none;border-radius:8px;color:var(--jasmine);font-size:13.5px;font-weight:600;min-width:0;max-width:100%}
#areasDd,#friendsDd{min-width:0;flex:0 1 auto}
.q-btn .q-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-btn .pin,.q-btn>svg:first-child:not(.chev){width:15px;height:15px;flex:0 0 auto;color:var(--stone)}
.q-btn .chev{width:13px;height:13px;flex:0 0 auto;color:var(--stone)}
.q-btn .av{width:20px;height:20px;font-size:10px;border:0;flex:0 0 auto}
.q-btn:hover,.q-btn[aria-expanded=true]{border-color:var(--stone-2)}
.q-btn.on{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink)}
.q-btn.on .pin,.q-btn.on .chev,.q-btn.on>svg{color:var(--lamp-ink)}
#dayBtn.q-btn{flex:0 0 auto}
#dayBtn.today{color:var(--lamp)}
#dayBtn.past{color:var(--stone)}
.q-slot{display:contents}
.q-add{position:relative;flex:0 0 auto;height:32px;padding:0 12px;border-radius:16px;white-space:nowrap;border:1px solid var(--hairline);color:var(--lamp);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.q-add:hover{border-color:var(--stone-2)}
.q-add .fr-badge{position:absolute;top:-5px;right:-7px;margin:0;border:2px solid var(--night)}
.quick-row .fr-row-note{min-width:0}
.q-cog{position:relative;flex:0 0 auto;width:34px;min-width:34px;height:34px;border-radius:8px;color:var(--stone)}
.q-cog svg{width:20px;height:20px}
.q-dot{position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--rotten);border:2px solid var(--night)}
.q-dot[hidden]{display:none}
.menu-sep{height:1px;background:var(--hairline);margin:4px 0}
.menu .mi-person{display:inline-flex;align-items:center;gap:8px}
.menu .mi-person .av{width:22px;height:22px;font-size:10px;border:0}
.filters-row{padding:0 0 8px;margin-top:0}

/* ---- one spacing scale for the header + friends screens: 8 (inside a control) · 14 (inside a box / between related boxes) · 24 (between sections) ---- */
:root{--sp1:8px;--sp2:14px;--sp3:24px}
.head{padding-top:calc(env(safe-area-inset-top) + var(--sp1))}
.ctl-row{padding-top:var(--sp1)}
.quick-row{padding:var(--sp1) 0 10px;gap:var(--sp1)}
.q-left{gap:var(--sp1)}
.fr-screen>:first-child{margin-top:0}
.fr-pane{margin:0 auto}
.fr-screen>*+.fr-search,.fr-screen>.fr-search+*{margin-top:var(--sp2)}
.fr-search{height:46px;padding:0 var(--sp2)}
.fr-sec{margin:var(--sp3) 2px 10px}
.fr-plist li{padding:12px var(--sp2);gap:12px}
.fr-plist.flat li{padding:10px 0}
.fr-hint{margin:10px 2px 0}
.fr-quota{margin:var(--sp2) 0 0;padding:12px var(--sp2)}
.fr-notfound{padding:20px var(--sp1) 4px}
.fr-share{padding:var(--sp2)}
.fr-share>p{margin:0 0 12px}
.fr-linkurl{height:40px;padding:0 12px}
.fr-share .fr-btn{margin-top:10px;height:44px}
.fr-share .fr-linkmeta{margin:12px 2px 0}
#frResults>.fr-hint:first-child,#frResults>.fr-sugg:first-child{margin-top:var(--sp2)}
#frResults>.fr-sec:first-child{margin-top:var(--sp3)}
.fr-box{margin-top:var(--sp2)}
.fr-set{padding:12px var(--sp2)}

/* ---- city switcher: the brand opens Greece · London ---- */
.brand-btn{display:flex;align-items:center;gap:8px;font:inherit;letter-spacing:inherit;color:inherit;border-radius:8px}
.brand-btn .chev{width:16px;height:16px;color:var(--stone);transition:transform .15s}
.brand-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
#cityMenu{min-width:280px}
/* Greece's Θερινά | Χειμερινά, inside the city menu under its row */
.city-item{display:flex;flex-direction:column;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--hairline)}
.seg.city-modes{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:8px 12px 10px;height:38px;padding:3px}
#cityMenu .city-modes button{display:flex;align-items:center;justify-content:center;gap:7px;height:32px;min-width:0;padding:0 8px;white-space:nowrap;font-size:13px;font-weight:700;grid-template-columns:none}
#cityMenu .city-modes button::after{content:none}
.city-modes .dot{width:10px;height:10px;border-radius:50%;flex:none}
.city-modes .sun-dot{background:#f3c05a}
.city-modes .moon-dot{background:#7db8ff;box-shadow:inset -3px -1px 0 0 var(--night)}
.menu-h{padding:6px 10px 4px;font-size:12.5px;font-weight:700;color:var(--stone)}
.q-sort{gap:6px}
.q-sort svg{flex:none;color:var(--stone)}
#cityMenu button{height:auto;padding:10px 12px 10px 10px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center}
#cityMenu .city-code{grid-row:1/3}
#cityMenu button>span{font-weight:700}
#cityMenu small{grid-column:2;margin:0;font-size:12px;font-weight:500;line-height:1.35}
#cityMenu button::after{grid-column:3;grid-row:1/3}
.city-code{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 5px;border-radius:5px;border:1px solid var(--hairline);color:var(--stone);min-width:26px;text-align:center}
#cityMenu [aria-checked=true] .city-code{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink)}
.foot .credit{display:block}
html[data-city=ldn] .sun{background:#e8e3d6}

/* ===== ratings (ratings.js): lamps (A1) · next-day card (B1) · «Την είδες;» (B2) · Πάνε | Είδαν (C1) · Θερινά score (C2) · cinema (D2) ===== */
.rt-rate{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:10px}
.rt-lamps{display:flex;gap:8px}
/* lit one after another from the first, dimmed from the last; transitions, so a quick second tap retargets mid-way */
.rt-lamp:nth-child(1){--n:0}.rt-lamp:nth-child(2){--n:1}.rt-lamp:nth-child(3){--n:2}.rt-lamp:nth-child(4){--n:3}.rt-lamp:nth-child(5){--n:4}
.rt-lamp{--up:calc(var(--n) * 32ms);--down:calc((4 - var(--n)) * 22ms);--e:cubic-bezier(.23,1,.32,1);position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--stone) 35%,transparent);display:grid;place-items:center;transition:border-color .2s ease var(--down),background-color .2s ease var(--down),transform .12s var(--e)}
.rt-lamp::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--lamp);opacity:0;pointer-events:none}
.rt-lamp i{width:14px;height:14px;border-radius:50%;background:var(--stone-2);transform:scale(.72);transition:transform .24s var(--e) var(--down),background-color .2s ease var(--down),box-shadow .24s ease var(--down)}
.rt-lamp.on{border-color:var(--lamp);background:color-mix(in srgb,var(--lamp) 14%,transparent);transition-delay:var(--up),var(--up),0s}
.rt-lamp.on i{background:var(--lamp);box-shadow:0 0 12px var(--lamp);transform:scale(1);transition-delay:var(--up)}
.rt-lamp:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.rt-lamps:hover .rt-lamp:has(~ .rt-lamp:hover):not(.on) i,.rt-lamp:hover:not(.on) i{background:color-mix(in srgb,var(--lamp) 60%,var(--stone-2));transition-delay:0s}}   /* preview up to the pointer */
.rt-lamps.busy .rt-lamp.on i{animation:fr-breathe .7s ease-in-out .5s infinite alternate}   /* saving, only if it's slow */
.rt-word{font-size:13px;font-weight:700;color:var(--lamp)}
.rt-word.none{color:var(--stone-2);font-weight:500}
.rt-dots{display:inline-flex;gap:3px;vertical-align:middle;flex:0 0 auto}
.rt-dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--stone-2) 65%,transparent)}
.rt-dots i.on{background:var(--lamp)}
/* C2: lamp dot · average · count, next to IMDb/RT/MC and on cinema headers */
.sc.th{gap:4px;padding:2px 6px;border-radius:4px;background:color-mix(in srgb,var(--lamp) 15%,transparent);color:var(--lamp);font-size:12px;flex:0 0 auto}
.sc.th i{width:8px;height:8px;border-radius:50%;background:var(--lamp);flex:0 0 auto}
.sc.th small{font-size:11px;font-weight:600;opacity:.85}
.sc.th:hover b{text-decoration:none}
.cin-actions{justify-content:flex-start}
.cs-title .scores{margin-top:6px}
/* B1 */
.rt-slot:empty{display:none}
.rt-slot:not(:empty){margin-bottom:var(--sp3)}
.rt-slot+.area,.rt-slot+.masonry>.area{margin-top:0}
.rt-prompt{background:color-mix(in srgb,var(--lamp) 7%,var(--dusk));border:1px solid color-mix(in srgb,var(--lamp) 40%,transparent);border-radius:var(--radius);padding:12px 14px 14px;max-width:560px}
.rt-p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rt-p-t{min-width:0}
.rt-p-t b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;text-wrap:balance}
.rt-p-t span{display:block;font-size:12.5px;color:var(--stone);margin-top:2px}
.rt-x{width:32px;height:32px;margin:-6px -8px 0 0;border-radius:50%;color:var(--stone-2);display:grid;place-items:center;flex:0 0 auto;font-size:14px}
.rt-x:hover{color:var(--jasmine);background:var(--dusk-2)}
.rt-d2{margin-top:14px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--lamp) 30%,transparent)}
.rt-lbl{font-size:13px;font-weight:700;color:var(--jasmine)}
.rt-lbl small{font-weight:500;color:var(--stone-2);font-size:12px}
.rt-d2 .rt-rate{margin-top:8px}
.rt-p-foot{display:flex;justify-content:flex-end;margin-top:12px}
/* B2 */
.rt-sheet{margin:4px 0 6px}
.rt-sheet>.fd-sub{margin-top:14px}
.rt-seen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.rt-hint{font-size:12.5px;color:var(--stone-2)}
.rt-note-wrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s cubic-bezier(.23,1,.32,1),opacity .18s ease}
.rt-note-wrap.open{grid-template-rows:1fr;opacity:1}
.rt-note-in{min-height:0;overflow:hidden;margin:0 -4px}
.rt-note-box{padding:12px 4px 4px}
.rt-note{display:block;width:100%;min-height:44px;resize:none;field-sizing:content;border-radius:12px;border:1px solid transparent;background:color-mix(in srgb,var(--jasmine) 6%,transparent);color:var(--jasmine);padding:11px 14px;font:inherit;font-size:16px;line-height:1.35;overflow-wrap:anywhere;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}   /* 16px: iOS doesn't zoom */
.rt-note::placeholder{color:var(--stone-2);opacity:1}
@media (hover:hover) and (pointer:fine){.rt-note:hover{background:color-mix(in srgb,var(--jasmine) 9%,transparent)}}
.rt-note:focus{outline:0;background:var(--night);border-color:color-mix(in srgb,var(--lamp) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp) 16%,transparent)}
.rt-note-foot{display:flex;align-items:center;gap:10px;min-height:32px;margin-top:2px;padding:0 2px;font-size:12.5px}
.rt-saved{color:var(--lamp);font-weight:600;opacity:0;transform:translateY(2px);transition:opacity .18s ease,transform .18s cubic-bezier(.23,1,.32,1)}
.rt-saved.on{opacity:1;transform:none}
.rt-count{color:var(--stone-2);font-variant-numeric:tabular-nums;margin-left:auto}
.rt-count.low{color:var(--rotten)}
.rt-del{font-size:12.5px;font-weight:600;color:var(--stone-2);padding:6px 2px;flex:0 0 auto}
.rt-count:empty+.rt-del{margin-left:auto}
.rt-del:hover{color:var(--rotten)}
.rt-flist{list-style:none;margin:0;padding:0}
.rt-flist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--hairline)}
.rt-flist li:first-child{border-top:0}
.rt-flist .av{width:30px;height:30px;font-size:12px;border:0}
.rt-flist li>div{min-width:0}
.rt-flist .nm{display:flex;align-items:center;gap:8px;font-size:14px;min-height:30px}
.rt-flist .nm b{font-weight:600}
.rt-q{display:block;font-style:italic;color:var(--jasmine);font-size:13.5px;line-height:1.4;overflow-wrap:anywhere;quotes:"«" "»"}
.rt-raters{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--stone)}
.rt-raters .av,.rt-raters .more{border-color:var(--dusk)}
.rt-n{display:inline-flex;align-items:center;gap:3px;color:var(--jasmine);font-weight:700}
.rt-n i{width:7px;height:7px;border-radius:50%;background:var(--lamp)}
/* C1: Πάνε | Είδαν + the Είδαν cards (one row per rater under the film) */
.fr-fpane{display:flex;gap:22px;margin:0 2px 14px;border-bottom:1px solid var(--hairline)}
.fr-fpane button{position:relative;display:inline-flex;align-items:baseline;gap:6px;padding:8px 0 10px;font-size:16px;font-weight:700;color:var(--stone-2)}
.fr-fpane button span{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--stone-2)}
.fr-fpane button[aria-selected=true]{color:var(--jasmine)}
.fr-fpane button[aria-selected=true] span{color:var(--lamp)}
.fr-fpane button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--lamp)}
.pcard .where .sc.th{margin-left:auto}
.rt-rows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.rt-rows li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;min-width:0}
.rt-rows .av{width:22px;height:22px;font-size:10px;border:0}
.rt-rows .nm{font-weight:600;color:var(--jasmine)}
.rt-rows .rt-q{flex-basis:100%;margin:-2px 0 2px 30px}
/* «Είδαν:» friends who rated it — Πάνε cards, film cards; board rows get faces + average in the score strip */
.rt-seenby{display:flex;align-items:center;gap:6px;margin-top:8px;padding:3px 8px 3px 0;border-radius:8px;font-size:12.5px;color:var(--stone);width:fit-content;max-width:100%;min-width:0;text-align:left}
.rt-seenby .lbl{color:var(--stone-2);font-weight:600;flex:0 0 auto}
.rt-seenby .fr-stack{padding-left:6px}
.rt-seenby .fr-stack .av,.rt-seenby .fr-stack .more{width:20px;height:20px;font-size:9.5px;margin-left:-6px}
.rt-seenby .nm{display:flex;align-items:center;flex-wrap:wrap;gap:2px 5px;min-width:0}
.rt-seenby .e{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.rt-seenby .nm b{color:var(--jasmine);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:12ch}
.rt-seenby .sep{color:var(--stone-2);flex:0 0 auto}
.rt-dots.xs{gap:2px}.rt-dots.xs i{width:6px;height:6px}
.pcard .rt-seenby{position:relative;z-index:1;margin-top:6px}
.pcard .bottom:empty+.rt-seenby{margin-top:8px}
.rt-seenmini{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:1px 6px 1px 0;line-height:1}
.rt-seenmini .fr-stack{padding-left:5px}
.rt-seenmini .fr-stack .av,.rt-seenmini .fr-stack .more{width:18px;height:18px;font-size:8.5px;margin-left:-5px;border-width:1.5px}
@media (hover:hover){.rt-seenby:hover,.rt-seenmini:hover{background:var(--dusk-2)}.row:hover .rt-seenmini:hover{background:var(--dusk)}}
#rtFriendsH{scroll-margin-top:8px}
#rtFriendsH:focus{outline:0}
@media (prefers-reduced-motion:reduce){
  .rt-lamp,.rt-lamp i,.rt-lamp.on,.rt-lamp.on i{transition-delay:0s}
  .rt-lamp i,.rt-lamp:active{transform:none}
  .rt-saved,.rt-note-wrap{transition-property:opacity}
  .rt-lamps.busy .rt-lamp.on i{animation:none;opacity:.6}
}

/* desktop board: one cinema per full-width band; its showings run left→right as tiles and wrap onto more lines */
@media (min-width:900px){
  .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:stretch;border-top:1px solid var(--hairline)}
  .strip>.screen-tag{grid-column:1/-1;padding:10px 16px 2px}
  .strip>.row{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"time time" "poster body" "faces faces";row-gap:8px;align-content:start;padding:12px 16px 14px;border-top:0}
  .strip>.row .time{grid-area:time;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .strip>.row .time small{margin:0}
  .strip>.row>.poster{grid-area:poster}
  .strip>.row>.body{grid-area:body}
  .strip>.row .fr-faces{grid-area:faces;margin:0}
  .strip>.row .blurb{-webkit-line-clamp:3}
  html.no-posters .strip>.row{grid-template-columns:minmax(0,1fr);grid-template-areas:"time" "body" "faces"}
  .strip>.row.mine{background:color-mix(in srgb,var(--lamp) 6%,transparent);box-shadow:inset 0 3px 0 var(--lamp)}
}

/* desktop quick controls (sort · year · IMDb · time · top picks in the header row); the active-filter chips row is redundant there */
.q-desk{display:none}
@media (min-width:900px){
  .q-left{flex-wrap:wrap;row-gap:6px}
  .q-desk{display:flex;align-items:center;gap:5px;margin-left:8px;padding-left:10px;border-left:1px solid var(--hairline)}
  .seg.seg-q{height:36px;padding:2px}
  .seg.seg-q button{height:30px;padding:0 9px;font-size:13px}
  .q-desk .q-btn{padding:0 7px 0 9px}
  .q-desk .q-clear{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline);background:none;color:var(--stone);font-size:12px;display:grid;place-items:center}
  .q-desk .q-clear:hover{color:var(--lamp);border-color:var(--stone-2)}
  .filters-row{display:none}
}


.q-past{padding:0 12px}

/* ===== tonight: screenings that already started (hidden until «Εμφάνιση») ===== */
.past-bar{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:14px 16px 6px;font-size:13px;color:var(--stone-2);clear:both}
.past-bar .link{font-size:13px;font-weight:600;color:var(--stone);text-decoration:underline;text-underline-offset:2px;padding:8px 4px;margin:-8px -4px}
.past-bar .link:hover{color:var(--lamp)}
.tonight-done{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--dusk);border-radius:var(--radius);padding:22px 16px 18px;margin:4px auto 0;max-width:560px;text-wrap:pretty}
.tonight-done b{font-size:17px;font-weight:700;color:var(--jasmine)}
.tonight-done>span{font-size:13px;color:var(--stone)}
.tonight-done .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.tonight-done .btn-ghost small{font-size:11.5px;font-weight:700;color:var(--stone-2);font-variant-numeric:tabular-nums}
/* narrower desktops: sort · year · IMDb · RT · past take their own line under areas + day instead of wrapping around the divider */
/* 900–1199: the Cinemas / Films / Friends switch moves up beside the name, so the quick filters get the whole second
   row and start at its left edge (sharing the row with the switch, they wrapped under "Areas", half way across) */
@media (min-width:900px) and (max-width:1199px){
  .head-inner{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"brand seg . right" "quick quick quick quick"}
  .head-inner .ctl-row{align-self:center}
}
@media (min-width:1200px){ .ctl-row{align-self:start} }

/* share → «copied»: the button's icon becomes a ✓ that pops and draws in, in lamp, for ~1.6s (app.js copied()) */
.copied,.copied:hover{color:var(--lamp)}
.btn-ghost.copied,.cs-act.copied{border-color:color-mix(in srgb,var(--lamp) 55%,transparent)}
.copied svg.ok{animation:fr-pop .45s ease both}
.copied svg.ok path{stroke-dasharray:1;stroke-dashoffset:1;animation:fr-draw .32s .06s ease-out forwards}
@media (prefers-reduced-motion:reduce){.copied svg.ok{animation:none}.copied svg.ok path{animation:none;stroke-dashoffset:0}}

/* board: a film's later times that day, stacked into its row (tap → the film sheet at that time) */
.alt-times{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.alt-time{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--hairline);background:var(--night);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--jasmine);display:inline-flex;align-items:center;gap:5px;position:relative;z-index:1}
.alt-time small{font-size:10.5px;font-weight:600;color:var(--stone-2)}
.alt-time:hover{border-color:var(--stone-2);background:var(--dusk-2)}
.alt-time.on{border-color:var(--lamp);color:var(--lamp)}
.alt-time.past{color:var(--stone-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--stone-2) 60%,transparent)}

/* Φίλοι on desktop: Πάνε (left) and Είδαν (right) side by side, each a panel with its own heading */
.fr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.fr-col{background:var(--dusk);border-radius:12px;padding:16px 16px 6px;min-width:0}
.fr-col-h{margin:0 0 14px;font-size:15px;font-weight:800;color:var(--jasmine);display:flex;align-items:baseline;gap:8px}
.fr-col-h span{font-size:12px;font-weight:700;color:var(--stone-2);letter-spacing:0}
.fr-col .fr-cards{grid-template-columns:minmax(0,1fr)}
.fr-col .area{margin-top:0}
.fr-col .fr-empty{border:0;border-radius:0;margin:0 auto;padding:22px 8px 26px;max-width:380px}   /* the column is already the box: no dashed box inside it, just centred */

/* ===== «Tonight for you» (the selected day is today): picks on phones, a timeline on desktop, time windows, the board one tap below ===== */
.tonight{margin:0 0 18px}
.tn-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 2px 10px}
.tn-h h2{margin:0;font-size:22px;font-weight:800;}
.tn-h span{font-size:12.5px;color:var(--stone-2);font-variant-numeric:tabular-nums}
.tn-wins{display:flex;gap:4px;padding:3px;border-radius:8px;background:var(--dusk);border:1px solid var(--hairline);margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.tn-wins button{flex:1 0 auto;height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:700;color:var(--stone);white-space:nowrap}
.tn-wins button[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink)}
.tn-pick{display:grid;grid-template-columns:18px 64px minmax(0,1fr);gap:10px;background:var(--dusk);border-radius:var(--radius);padding:12px;margin-bottom:10px;cursor:pointer}
.tn-pick:hover{border-color:color-mix(in srgb,var(--stone-2) 70%,transparent)}
.tn-rank{font-size:15px;font-weight:800;color:var(--lamp);padding-top:1px}
.tn-pick .poster{width:64px;height:96px;border-radius:6px}
.tn-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.tn-body .title{font-size:16.5px;font-weight:700;line-height:1.2;text-align:left}
.tn-body .meta{font-size:12px;color:var(--stone-2)}
.tn-why{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--stone)}
.tn-why .last{color:var(--lamp)}
.tn-go{display:flex;align-items:center;gap:10px;margin-top:6px;min-width:0}
.tn-go .tchip{flex:0 0 auto}
.tn-at{font-size:12.5px;color:var(--stone);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-body .fr-faces{align-self:flex-start;margin-top:4px}
.tn-none{color:var(--stone);font-size:13px;margin:6px 2px 12px}
.tn-all{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border:1px dashed var(--hairline);border-radius:var(--radius);color:var(--stone);font-size:13.5px;font-weight:600;margin-top:2px}
.tn-all:hover{color:var(--jasmine);border-color:var(--stone-2)}
.tn-all[aria-expanded=true] .chev{transform:rotate(180deg)}
.tn-all[aria-expanded=true]{margin-bottom:18px}
.alt-time small{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* desktop: the evening as a timeline (top films × hours) */
.tn-tl{background:var(--dusk);border:1px solid var(--hairline);border-radius:var(--radius);overflow-x:auto;margin-bottom:12px}
.tn-tl table{border-collapse:collapse;width:100%;font-size:13px}
.tn-tl th,.tn-tl td{padding:10px 10px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle}
.tn-tl tr:last-child>*{border-bottom:0}
.tn-tl thead th,.tn-tl tr:first-child th{font-size:12px;font-weight:700;color:var(--stone-2);font-variant-numeric:tabular-nums}
.tn-tl tr:first-child th.now{color:var(--lamp)}
.tn-tl td{border-left:1px solid var(--hairline);min-width:92px}
.tn-tl td .alt-time{margin:2px 4px 2px 0}
.tl-film{display:flex;align-items:center;gap:10px;min-width:260px}
.tl-film .poster{width:32px;height:48px;border-radius:4px}
.tl-film>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-film .title{font-weight:700;font-size:14px;text-align:left}
.tn-all .chev{width:16px;height:16px;flex:0 0 auto;transition:transform .15s}
@media (min-width:900px){ .tn-wins{width:max-content;max-width:100%} .tn-wins button{flex:0 0 auto;padding:0 16px} }


/* ==== mini map (site/map.js) — only what app.js renders before the map module loads: the reserved slot + the rows' pin buttons.
   Everything inside the map lives in site/map.css, loaded with the map. ==== */
:root{--mm-bg:#131b2e}
:root[data-theme=day]{--mm-bg:#f4f1ea}
.mm-slot{position:relative;height:180px;margin:4px 0 10px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--mm-bg);overflow:hidden;contain:layout paint}
/* until the map's first tiles are in (map.js loads MapLibre on first use): faint streets, a light sweeping across, a pin
   dropping in and pulsing. The map fades in over it (.mm is transparent until .ready). */
.mm-slot::before{content:"";position:absolute;inset:-40%;transform:rotate(-14deg);opacity:.55;
  background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--lamp) 10%,transparent) 50%,transparent 60%) 0 0/250% 100% no-repeat,
    repeating-linear-gradient(0deg,transparent 0 37px,var(--hairline) 37px 39px),repeating-linear-gradient(90deg,transparent 0 53px,var(--hairline) 53px 55px),
    linear-gradient(70deg,transparent 48%,color-mix(in srgb,var(--stone) 18%,transparent) 48% 50.5%,transparent 50.5%);
  animation:mm-sweep 1.6s ease-in-out infinite}
.mm-slot::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--lamp);border:3px solid var(--night);
  animation:mm-drop .6s cubic-bezier(.3,1.6,.5,1) both,mm-ping 1.4s ease-out .6s infinite}
.mm-slot:has(.mm.ready)::before,.mm-slot:has(.mm.ready)::after{animation:none;display:none}
@keyframes mm-sweep{from{background-position:120% 0,0 0,0 0,0 0}to{background-position:-20% 0,0 0,0 0,0 0}}
@keyframes mm-drop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
@keyframes mm-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lamp) 55%,transparent)}100%{box-shadow:0 0 0 22px transparent}}
@media (prefers-reduced-motion:reduce){.mm-slot::before,.mm-slot::after{animation:none}}
@media (min-width:700px){.mm-slot{height:260px}}
#cinemaPanel .mm-slot{margin:12px 0 4px}
.mm-btn{width:28px;height:28px;margin-left:2px;border-radius:50%;display:inline-grid;place-items:center;color:var(--stone-2);flex:0 0 auto;vertical-align:middle}
.mm-btn svg{width:15px;height:15px}
.mm-btn:hover{color:var(--lamp);background:var(--dusk-2)}
.mm-hi{animation:mm-hi 1.8s ease-out;border-radius:8px}
@keyframes mm-hi{0%,35%{background:color-mix(in srgb,var(--lamp) 16%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.mm-hi{animation:none;background:color-mix(in srgb,var(--lamp) 12%,transparent)}}
/* ==== /mini map ==== */

/* «Tonight for you» on/off: a quiet «Full board» in its header (saved), and the switch in Settings → Programme display */
.tn-h{align-items:center}
.tn-h .tn-off{margin-left:auto;font-size:13px;font-weight:600;color:var(--stone);padding:6px 2px}
.tn-h .tn-off:hover{color:var(--jasmine)}
.tn-h .tn-sub{flex-basis:100%;font-size:12.5px;color:var(--stone-2);font-variant-numeric:tabular-nums}
.set-row .lbl small{display:block;font-size:12px;font-weight:500;color:var(--stone-2);margin-top:1px}

/* film sheet: «I saw it» / «✓ Seen · ●4» in the head's action row */
.fd-seen svg{color:var(--stone-2)}
.fd-seen .rt-mini{font-size:9px;letter-spacing:1px;color:var(--lamp)}
.fd-seen.on{border-color:color-mix(in srgb,var(--lamp) 55%,transparent);color:var(--lamp)}
.fd-seen.on svg{color:var(--lamp)}
#tonight + *{scroll-margin-top:calc(var(--head-h,104px) - var(--head-off,0px) + 8px)}   /* «Everything tonight» scrolls the board to just under the header */

/* phones: «✦ Top» toggles «Tonight for you» from the quick row (today only); desktop uses «Top picks» in its filter row */
.q-top{display:contents}
.q-topbtn{display:inline-flex;align-items:center;gap:5px;padding:0 12px;flex:0 0 auto}
.q-topbtn .spark{flex:0 0 auto}
.q-topbtn:not(.on) .spark{color:var(--lamp)}
@media (max-width:374px){ .q-topbtn span{display:none} .q-topbtn{padding:0 10px} }
@media (min-width:900px){ .q-top{display:none} }
.q-topbtn.on .spark{color:var(--lamp-ink)}
@media (max-width:400px){
  .tn-h h2{font-size:20px}
  .tn-h .tn-off{font-size:12.5px}
  .tn-wins button{padding:0 9px;font-size:12px}
}
.q-btn.q-topbtn>svg.spark{color:var(--lamp)}          /* beats .q-btn>svg:first-child:not(.chev) (stone) */
.q-btn.q-topbtn.on>svg.spark{color:var(--lamp-ink)}

/* «Near me»: the 📍 row on top of Areas ▾, distances on cinema cards and in the Tonight picks */
.menu-near{display:flex;align-items:center;gap:6px;padding:6px 8px 8px;flex-wrap:wrap}
.menu-near .mn-l{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;margin-right:auto;padding-right:6px}
.menu-near .mn-l .pin{width:15px;height:15px;color:var(--lamp)}
.menu .menu-near button{width:auto;height:30px;padding:0 10px;border:1px solid var(--hairline);border-radius:8px;font-size:12.5px;font-weight:700;justify-content:center}
.menu .menu-near button::after{display:none}
.menu .menu-near button[aria-pressed=true]{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}
.addr .dist{color:var(--lamp);font-weight:700}
#near .area-h h2{display:flex;align-items:center;gap:6px} #near .area-h h2 .pin{width:16px;height:16px;color:var(--lamp)}
.tn-why .tn-when{color:var(--jasmine);font-weight:600;font-variant-numeric:tabular-nums}
.empty .muted{color:var(--stone);font-size:13px}

/* «✓ Seen» on board rows / film cards (a one-tap mark or a rating) */
.seen-tag{display:inline-block;margin-right:6px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:800;line-height:17px;color:var(--lamp);background:color-mix(in srgb,var(--lamp) 14%,transparent);vertical-align:1px}

/* ===== desktop cleanup ===== */
@media (min-width:900px){
  /* header: more air between the brand row and the view toggle + filters */
  .head-inner{row-gap:14px;padding-top:12px}
  /* a cinema's films: each its own boxed card, times at the bottom */
  .strip{gap:12px;padding:14px 16px 16px}
  .strip>.row.tile{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"poster body" "times times" "faces faces";gap:10px 12px;align-content:start;padding:12px;border:1px solid transparent;border-radius:10px;background:var(--night)}
  .strip>.row.tile:hover{background:var(--dusk-2)}
  .strip>.row.tile.mine{border-color:color-mix(in srgb,var(--lamp) 60%,transparent);background:color-mix(in srgb,var(--lamp) 6%,var(--night));box-shadow:none}
  .strip>.row.tile.past{opacity:.7}
  .row.tile>.poster{grid-area:poster;width:72px;height:108px;border-radius:6px}
  .row.tile>.body{grid-area:body}
  .row.tile .blurb{-webkit-line-clamp:3}
  .tile-times{grid-area:times;display:flex;flex-wrap:wrap;gap:6px 8px;padding-top:10px;border-top:1px dashed var(--hairline)}
  .tt-slot{display:inline-flex;align-items:center;gap:5px}
  .tt-slot small{font-size:11px;color:var(--stone-2)}
  .row.tile>.fr-faces{grid-area:faces;margin:0}
  html.no-posters .strip>.row.tile{grid-template-columns:minmax(0,1fr);grid-template-areas:"body" "times" "faces"}
  .strip>.screen-tag{padding:4px 2px 0}
  /* Top picks timeline: the whole row opens the film */
  .tn-tl .tl-row{cursor:pointer}
  .tn-tl .tl-row:hover>*{background:var(--dusk-2)}
}

/* desktop compact view: the day as a timetable (Films = films × hours, Cinemas = cinemas × hours); first column pinned */
.tt-grid{background:var(--dusk);border:1px solid var(--hairline);border-radius:var(--radius);overflow-x:auto;margin-bottom:12px}
.tt-grid table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;table-layout:fixed}
.tt-grid col,.tt-grid th[scope=row],.tt-grid tr:first-child th:first-child{width:260px}
.tt-grid th,.tt-grid td{padding:8px 8px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle}
.tt-grid tr:last-child>*{border-bottom:0}
.tt-grid tr:first-child th{font-size:12px;font-weight:700;color:var(--stone-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tt-grid tr:first-child th.now{color:var(--lamp)}
.tt-grid td{border-left:1px solid var(--hairline);min-width:118px}
.tt-grid td.now{background:color-mix(in srgb,var(--lamp) 4%,transparent)}
.tt-grid th[scope=row],.tt-grid tr:first-child th:first-child{position:sticky;left:0;z-index:1;background:var(--dusk);min-width:250px;max-width:300px}
.tt-grid .tl-row{cursor:pointer}
.tt-grid tr:hover>th[scope=row]{background:var(--dusk-2)}
.tt-grid .tt-chip{display:flex;width:100%;margin:3px 0;justify-content:flex-start}
.tt-grid .tt-chip small{max-width:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.tl-cin{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-cin .title{font-weight:700;font-size:14px;text-align:left;display:flex;align-items:center;gap:6px}
.tl-cin .meta,.tl-film .meta{font-size:11.5px;color:var(--stone-2)}
.tt-grid th[scope=row],.tt-grid tr:first-child th:first-child{z-index:3;box-shadow:1px 0 0 var(--hairline)}   /* above the chips (.alt-time is z-index 1) */

/* Sheet heads stay put while the sheet scrolls: «Έτοιμο» / ✕ are always reachable (in settings a tap where «Έτοιμο» used to be
   landed on «Λονδίνο»; the film sheet scrolls itself to keep the lamps still). The city and Θερινά/Χειμερινά card rows sit
   one gap apart instead of two paddings + a margin (32px) */
.sheet-panel>.sheet-head{position:sticky;top:-14px;z-index:3;background:var(--dusk);margin:-14px -16px 12px;padding:14px 16px 10px}
@media (max-width:699px){.sheet-panel>.sheet-head{top:-10px;margin:-10px -12px 8px;padding:10px 12px 8px}}

/* Touch: ≥44px hit areas for the small controls (QA measured 26–38px) without changing how they look — an invisible
   ::before reaching past the edges (pseudo-elements hit-test as their button) */
@media (pointer:coarse){
  .icon-btn,.fchip button,.rt-x,.rt-lamp,.seg button{position:relative}
  .icon-btn::before,.fchip button::before,.rt-x::before,.rt-lamp::before,.seg button::before{content:"";position:absolute}
  .icon-btn::before{inset:-5px}
  .fchip button::before{inset:-9px}
  .rt-x::before{inset:-6px}
  .rt-lamp::before{inset:-4.5px}   /* from inside the 1.5px border: 38 + 2×(1.5+4.5) = 44 */
  .seg button::before{inset:-7px 0}
}
/* on-screen keyboard: the open sheet sits on the visual viewport (app.js sets --vvt/--kb) and the panel fits it, so its head and
   ✕ stay on screen (it was 90dvh tall: the head ended up above the screen). iOS 27 Safari's floating-address-bar band above the
   keyboard lies outside the visual viewport — nothing fixed can paint there */
.sheet{inset:var(--vvt,0px) 0 var(--kb,0px)}
.sheet-panel{max-height:min(90dvh, 100%)}

/* ---- phone QA round 3 ---- */
/* signed-out Φίλοι: what signing in gets you, as a short list */
.fr-pitch{list-style:none;margin:10px auto 0;padding:0;display:grid;gap:6px;text-align:left;width:fit-content;max-width:100%}
.fr-pitch li{position:relative;padding-left:18px;color:var(--jasmine);font-size:14px;line-height:1.35}
.fr-pitch li::before{content:'';position:absolute;left:3px;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--lamp)}
/* «Βαθμός» (score.js): tier ring + the number; a button (tap → what it is) inside rows that open the film */
.sc.qs{padding:0;background:none;border:0;font:inherit;font-weight:800;color:var(--jasmine);cursor:help}
.sc.qs:hover b{text-decoration:none}
.sc.qs i{width:11px;height:11px;border-radius:50%;border:2.5px solid currentColor;flex:0 0 auto}
.sc.qs.fresh i{color:#3fb950}.sc.qs.mid i{color:#e3a008}.sc.qs.rotten i{color:#e5534b}
/* hit areas: the score links and the Σινεμά/Ταινίες/Φίλοι switch were 15–26px tall on phones; the targets grow, the look doesn't */
.sc{position:relative}
.sc::after{content:'';position:absolute;inset:-7px -4px}
.ctl-row>.seg.seg-sm button{position:relative}
.ctl-row>.seg.seg-sm button::after{content:'';position:absolute;inset:-7px -1px}
/* the Top card's cinema opens the cinema sheet */
.tn-cin{font:inherit;color:inherit;padding:0;background:none;border:0;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px;position:relative}
.tn-cin::after{content:'';position:absolute;inset:-10px -4px}
/* a lazy poster that hasn't arrived yet is a quiet block, not a hole in the card */
img.poster{background:var(--dusk-2);object-fit:cover}   /* a coming-soon film can carry a 16:9 trailer still */

/* discoverability (src/seo.js): the server-rendered week (replaced by the board on the app's first render) and the About note */
.seo-prog{max-width:760px;margin:0 auto;padding:8px 4px 24px;color:var(--stone);font-size:14px;line-height:1.5}
.seo-prog h2{font-size:18px;color:var(--jasmine);margin:8px 0 4px}
.seo-prog h3{font-size:15px;color:var(--jasmine);margin:18px 0 2px}
.seo-prog p{margin:0 0 6px;color:var(--stone-2);font-size:12.5px}
.seo-prog ul{margin:0;padding-left:18px}
.about{max-width:680px;margin:8px auto 0;padding:10px 16px calc(24px + env(safe-area-inset-bottom));color:var(--stone-2);font-size:12px;line-height:1.55;text-align:center;text-wrap:pretty}
.about summary{display:inline-block;list-style:none;cursor:pointer;padding:6px 10px;border-radius:8px;color:var(--stone-2);font-size:12px}
.about summary::-webkit-details-marker{display:none}
.about summary:hover,.about[open] summary{color:var(--stone)}
.about summary span:last-child{text-decoration:underline;text-underline-offset:2px}

.about h2{font-size:13px;font-weight:700;color:var(--stone);margin:8px 0 6px}
.about p{margin:0 0 6px}
.about a{color:var(--stone)}
html.fr-subpage .about{display:none}
/* a row's times: the day in brief (TIMES_MAX chips + «+N»), «Όλη η εβδομάδα ▾» opens the week as plain lines — no wall of pills */
.more-times{position:relative;display:inline-flex;align-items:center;padding:2px 9px;border-radius:6px;border:1px dashed var(--stone-2);background:none;color:var(--stone);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.more-times::after{content:'';position:absolute;inset:-6px -2px}
.alt-times .more-times{height:28px;padding:0 10px;border-radius:8px;font-size:13px}
.week-x{position:relative;display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:2px 0;color:var(--stone);font-size:12.5px;font-weight:600}
.week-x::after{content:'';position:absolute;inset:-8px -4px}
.week-x .chev{width:12px;height:12px;transition:transform .15s}
.week-x[aria-expanded=true] .chev{transform:rotate(180deg)}
.wk-list{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin-top:8px;padding:8px 10px;border-radius:var(--radius-s);background:var(--dusk-2);font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}
.wk-d{color:var(--stone)}
.wk-t{color:var(--jasmine);font-weight:600;word-spacing:5px}
.wk-d.on,.wk-t.on{color:var(--lamp)}
.fc-cin{flex-wrap:wrap}
.fc-cin-l{flex:1 1 0}
.fc-cin>.wk-list{flex:1 0 100%}
.fd-cin .week-x,.fd-ctx .week-x{margin-top:6px}
@media (prefers-reduced-motion:reduce){.week-x .chev{transition:none}}
/* Films card: up to 3 cinemas in London; «+N ακόμα σινεμά» and «Σε άλλες περιοχές · N» open in place (chevron flips) */
.fc-more[data-cardx]{display:flex;align-items:center;gap:4px}
.fc-more .chev{width:13px;height:13px;transition:transform .15s}
.fc-more[aria-expanded=true] .chev{transform:rotate(180deg)}
.fc-more[data-cardx$="|else"]{color:var(--stone)}
.fc-away{background:color-mix(in srgb,var(--night) 55%,transparent)}
.fc-away .fc-cin:first-child{border-top:1px solid var(--hairline)}
@media (prefers-reduced-motion:reduce){.fc-more .chev{transition:none}}
/* the day menu's «Από» row: a small label on its own line, then the six time chips on one line */
.menu-time{gap:5px;flex-wrap:wrap}
.menu-time .mn-l{flex:1 0 100%;font-size:12.5px;font-weight:700;color:var(--stone);padding:2px 2px 0}
.menu .menu-time button{flex:1 1 0;min-width:0;padding:0 4px}
#dayBtn span{white-space:nowrap}

/* installed app, reminders not on yet: one quiet bar at the bottom (friends.js drawNudge) */
.push-nudge{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:8px;width:max-content;max-width:min(520px,calc(100vw - 24px));padding:6px 6px 6px 14px;border-radius:8px;background:var(--dusk-2);border:1px solid var(--hairline);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:13px;color:var(--stone);animation:pn-in .3s ease-out}
.push-nudge .pn-t{min-width:0}
.push-nudge .pn-t b{color:var(--jasmine);font-weight:700}
.push-nudge .pn-x{width:32px;height:32px;border-radius:50%;color:var(--stone-2);font-size:13px;flex:0 0 auto}
.push-nudge .pn-x:hover{color:var(--jasmine)}
@keyframes pn-in{from{opacity:0;transform:translate(-50%,8px)}}
@media (prefers-reduced-motion:reduce){.push-nudge{animation:none}}

/* film sheet: a cinema's own booking page (London listings carry one per showing) */
.tix{color:var(--lamp);font-weight:600;text-decoration:none;white-space:nowrap}
.tix:hover{text-decoration:underline;text-underline-offset:2px}
.fd-cin-tix{margin-top:4px;font-size:12.5px}

/* Settings → Filters → Cinemas: searchable chains + cinemas */
.venue-panel{padding:4px 12px 12px;border-top:1px solid var(--hairline)}
.venue-panel .search{margin:8px 0}
.venue-list{list-style:none;margin:0;padding:0;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain}
.venue-list .vl-h{font-size:12.5px;font-weight:800;color:var(--stone-2);padding:10px 2px 4px}
.venue-list label{display:flex;align-items:center;gap:10px;padding:8px 2px;cursor:pointer;font-size:14.5px;font-weight:600}
.venue-list label small{display:block;font-size:12px;font-weight:400;color:var(--stone-2)}
.venue-list input{width:18px;height:18px;accent-color:var(--lamp);flex:0 0 auto}
.set-row.set-link .lbl small{display:block;font-weight:400;font-size:12px;color:var(--stone-2)}
html[lang=en] .about p[lang=el],html[lang=el] .about p[lang=en]{display:none}   /* About opened: only the page's language (both stay in the DOM for crawlers) */

/* ===== «Coming soon» (London, app.js): a filter on the board — the same film cards / cinema blocks, a date and its times in place of tonight's Πάω chips ===== */
#dayMenu{max-height:min(74vh,480px)}   /* the week's days + «Coming soon» without scrolling on most phones */
/* quick row: the chip (its label shows from 430px up, and whenever it is on), and «New releases» beside it while on */
.q-soonbtn,.q-newbtn{display:inline-flex;align-items:center;gap:5px;padding:0 10px;flex:0 0 auto}
.q-btn.q-soonbtn>svg.cal{color:var(--lamp)}
.q-btn.q-soonbtn.on>svg.cal{color:var(--lamp-ink)}
.q-newbtn:not(.on){color:var(--stone)}
@media (max-width:429px){.q-soonbtn:not(.on) span{display:none}.q-soonbtn:not(.on){padding:0 9px}}
@media (min-width:900px){.q-top .q-soonbtn,.q-top .q-newbtn{display:none}}
.soon-note{margin:-6px 2px 12px;font-size:12.5px;color:var(--stone-2);font-variant-numeric:tabular-nums}
/* a cinema's first date + that day's times (plain chips: nothing to tap), «All dates ▾» → the wk-list */
.soon-when{font-size:12.5px;font-weight:700;color:var(--lamp);white-space:nowrap;font-variant-numeric:tabular-nums}
.soon-times{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.soon-times>span{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:6px;background:var(--dusk-2)}
.soon-times>span.more{background:none;color:var(--stone);padding:2px 2px}
.fc-times.soon-times{justify-content:flex-end;gap:4px}
.row .soon-times{margin-top:7px}
.row .soon-times .week-x{margin-left:4px}
.row .body>.wk-list{margin-top:8px}
.fd-soon .soon-times{margin-top:6px}
.tile-times .soon-when{align-self:center}
.fc-cin.soon-tba{cursor:default;font-size:12.5px;color:var(--stone-2)}   /* Athens: the halls come with Thursday's programme */
.tile-times>.wk-list{flex:1 0 100%;margin-top:4px}
/* Σινεμά rows: the date leads as the time does — weekday (lamp), day, month */
.row .time.soon-date{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;font-size:22px}
.row .time.soon-date small{font-size:11px;font-weight:700;color:var(--stone-2);margin:0;max-width:none;text-align:left}
.row .time.soon-date small:first-child{color:var(--lamp);margin-bottom:2px}
.row .time.soon-date small:last-child{margin-top:3px}
/* the rail under the board: poster tiles, the date on the poster */
.soon-tile{display:flex;flex-direction:column;min-width:0;text-align:left;border-radius:8px}
.soon-poster{position:relative;display:block;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--dusk-2);margin-bottom:7px}
.soon-poster .poster{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.soon-poster .poster.none{display:grid}
.soon-day{font-size:11.5px;font-weight:700;font-style:normal;color:var(--lamp);font-variant-numeric:tabular-nums;line-height:1.2;margin-bottom:2px}   /* the date under the poster, never on it */
.soon-tile b{font-size:13.5px;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soon-tile small{font-size:11.5px;color:var(--stone-2);margin-top:2px;display:flex;gap:4px;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.soon-tile small span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.soon-tile:hover b{color:var(--lamp)}
html.no-posters .soon-poster{display:none}
.soon-rail{margin-top:30px;clear:both}
.soon-rail.top{margin:0 0 28px;padding:0}   /* Ταινίες: above the films */
.soon-rail-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 12px}
.soon-rail-h h2{margin:0;font-size:18px;font-weight:800;}
.soon-rail-h .link{font-size:13px;font-weight:600;color:var(--lamp);padding:8px 4px;margin:-8px -4px}
.soon-strip{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:16px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.soon-strip::-webkit-scrollbar{display:none}
.soon-strip .soon-tile{flex:0 0 112px;scroll-snap-align:start}
@media (min-width:900px){.soon-strip .soon-tile{flex-basis:132px}.soon-strip{gap:14px}}
/* film sheet */
.soon-tag{display:inline-block;margin:0 0 6px;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:20px;color:var(--lamp);background:color-mix(in srgb,var(--lamp) 14%,transparent)}
.fd-soon-when{margin-top:3px;font-size:12.5px;color:var(--stone);font-variant-numeric:tabular-nums}
.fd-soon-when b{color:var(--jasmine);font-weight:650}

/* ===== desktop board: Pinterest-style ===== */
/* cinema cards pack into 2–3 columns (packOne, .masonry.board); each card keeps the phone's time-led rows, and a card
   alone on its row (an area with one cinema) flows them into columns instead of one long thin list */
@media (min-width:1200px){
  .main{max-width:1440px}
  .head-inner{max-width:1408px}
}
@media (min-width:900px){
  .masonry.board{display:block}
  .masonry.board.measure{display:grid;gap:0 16px}
  .mcols{display:flex;gap:16px;align-items:flex-start}
  .masonry.board .cinema{margin-bottom:16px;container-type:inline-size}
  .cin-rows .row{grid-template-columns:66px 44px minmax(0,1fr);gap:10px;padding:10px 14px}
  .cin-rows .row .poster,.cin-rows .row .poster.none{width:44px;height:66px}
  html.no-posters .cin-rows .row{grid-template-columns:66px minmax(0,1fr)}
  .cin-rows .row .blurb{-webkit-line-clamp:2}
  .cin-rows>.screen-tag{padding:8px 14px 2px}
  .row .meta .hall{font-weight:600;color:var(--stone)}
}
@container (min-width:700px){
  .cin-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));border-top:1px solid var(--hairline);margin-bottom:-1px}
  .cin-rows>.row{border-top:0;border-bottom:1px solid var(--hairline)}
  .cin-rows>.screen-tag{grid-column:1/-1}
}

/* Φίλοι: a day / week heading lines up with the cards' contents, never flush with their edges; inside a desktop column it is
   part of the column (no band in the page colour) */
.fr-day .area-h{padding-left:14px;padding-right:14px}
.fr-col .fr-day .area-h{position:static;background:none;border-bottom:0;padding-top:4px;padding-bottom:0;margin-bottom:10px}
.fr-col .fr-day+.fr-day{margin-top:22px}

/* Φίλοι sheet (friends.js peopleSheet): search on top, results in place, then invitations / link / friends / sent */
.fr-ppl-panel{min-height:min(70dvh,560px)}
.fr-ppl-panel .fr-search{background:var(--night)}
.fr-ppl-panel #frResults:not(:empty){margin-top:10px}
.fr-ppl-panel .fr-sec{margin-top:20px}
/* profile sheet (friends.js drawMe): the crop's Save / Cancel keep the old screen's width */
.fr-me-panel>.fr-btn{max-width:320px;margin-left:auto;margin-right:auto}
.fr-me-panel>.fr-btn+.fr-btn{margin-top:8px}
/* Φίλοι lists: a quiet day/week label instead of a ruled heading (the tabs above already draw the line); ratings line up on the right */
.fr-main .fr-day:not(.fr-week)>.area-h{border-bottom:0;padding-bottom:6px;margin-bottom:8px}
.fr-main .fr-day:not(.fr-week)>.area-h h2{font-size:14px;font-weight:800;color:var(--stone)}
.fr-main .fr-day:not(.fr-week)>.area-h span{display:none}
.fr-main .fr-day+.fr-day{margin-top:18px}
.rt-scard .rt-rows .nm{flex:1;min-width:0}
.rt-scard .rt-rows .rt-q{margin-top:-4px}
/* ---- one row on a phone: no button rows that break onto a second line ---- */
/* scores: one line; on a phone TMDB steps aside when IMDb is there */
.scores{flex-wrap:nowrap;gap:4px 10px;min-width:0;overflow:hidden}
.scores>*{flex:0 0 auto}
@media (max-width:600px){ .scores{gap:4px 8px} .scores:has(.imdb) .tmdb{display:none} }
/* film sheet: its buttons in one full-width row under the poster */
.fd-acts{flex-wrap:nowrap;margin:-2px 0 14px;overflow-x:auto;scrollbar-width:none}
.fd-acts::-webkit-scrollbar{display:none}
.fd-acts>*{flex:0 0 auto;white-space:nowrap}
/* cinema sheet: «★ Αγαπημένο» + round icon buttons, one line */
.cs-acts{flex-wrap:nowrap;gap:6px}
.cs-act.ic{width:36px;padding:0;justify-content:center}
/* a film card's cinema with 3+ times: name on its line, the times in one row under it */
.fc-cin:has(.fc-times>:nth-child(3)){flex-direction:column;gap:6px}
.fc-cin:has(.fc-times>:nth-child(3)) .fc-cin-r{max-width:none;width:100%;flex-direction:row;align-items:center;justify-content:space-between}
.fc-cin:has(.fc-times>:nth-child(3)) .fc-times{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
/* settings: a 4-way switch takes the row under its label instead of squeezing it */
@media (max-width:600px){ .set-row:has(>.seg>:nth-child(4)){flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .set-row:has(>.seg>:nth-child(4))>.seg{flex:1 1 100%;display:flex}
  .set-row:has(>.seg>:nth-child(4))>.seg>*{flex:1} }
.fc-cin:has(.fc-times>:nth-child(3)) .fc-cin-r{flex-direction:column;align-items:stretch}
.fc-cin:has(.fc-times>:nth-child(3)) .fd-days,.fc-cin:has(.fc-times>:nth-child(3)) .week-x{align-self:flex-end}
.week-x{white-space:nowrap}
@media (max-width:600px){ .row .scores:has(.rt) .mc{display:none} }
/* the footer + «About» sit at the bottom of the screen even when the page is short (an empty Πάνε), not mid-screen */
body{display:flex;flex-direction:column;min-height:100dvh}
body>.main{flex:1 0 auto;width:100%;box-sizing:border-box}
/* Φίλοι lists flat: films are rows split by a hairline, not cards inside a boxed column. Your own plan shows in the filled time
   chip, so no accent bar; the whole row opens the film, so no chevron */
.fr-col{background:none;border:0;border-radius:0;padding:0}
.fr-col .fr-day .area-h,.fr-main .fr-day .area-h{padding-left:0;padding-right:0}
.fr-cards,.fr-col .fr-cards{gap:0 28px}
.pcard{background:none;border:0;border-radius:0;padding:12px 0;border-bottom:1px solid var(--hairline)}
.pcard:last-child{border-bottom:0}
.pcard.mine::before,.pcard .title .fr-chev{display:none}
@media (hover:hover){.pcard:hover{background:none}.pcard:hover .title{color:var(--lamp)}}