/* ---------- tokens : dark rounded mobile-app world ---------- */
  :root{
    --bg:#141414;
    --surface:#1C1C1C;
    --surface-2:#262626;
    --surface-3:#343434;
    --text:#FFFFFF;
    --text-muted:#ACACAC;
    --text-faint:#7A7A7A;
    --accent:#FF7A29;        /* warm orange, pulled from the table in eirini's photo */
    --accent-ink:#1A1206;
    --good:#4CD170;
    --low:#EF4565;
    --shadow: 0 6px 20px rgba(0,0,0,.45);
    --r-lg:28px; --r-md:22px; --r-sm:14px; --r-pill:999px;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
    font-size:15px; line-height:1.5;
  }
  h1,h2,h3{ font-family:'Poppins'; font-weight:700; margin:0; }
  .tnum{ font-variant-numeric:tabular-nums; }
  .micro{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--text-muted); }

  a{ color: var(--text); }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }

  /* ---------- top nav ---------- */
  .nav{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: 16px 24px; position:fixed; top:0; left:0; right:0; z-index:20;
    background: transparent; backdrop-filter: none;
    transition: background .25s ease, backdrop-filter .25s ease;
  }
  /* Only once the cover has scrolled past does the nav need its own bar —
     over the photo it rides on the cover's top scrim instead. */
  .nav.scrolled{ background: rgba(20,20,20,.9); backdrop-filter: blur(10px); }
  .brand{
    font-weight:700; font-size:18px; letter-spacing:-.01em; text-transform:lowercase;
    text-shadow: 0 1px 12px rgba(0,0,0,.55);
  }
  .nav.scrolled .brand{ text-shadow:none; }
  .segtabs{ display:flex; background:rgba(38,38,38,.72); backdrop-filter:blur(8px); border-radius:var(--r-pill); padding:4px; gap:2px; }
  .nav.scrolled .segtabs{ background:var(--surface-2); backdrop-filter:none; }
  .segtabs button{
    font-family:'Poppins'; font-weight:600; font-size:13.5px; padding:8px 16px; border:none; border-radius:var(--r-pill);
    background:transparent; color:var(--text-muted); cursor:pointer;
  }
  .segtabs button.active{ background:var(--accent); color:var(--accent-ink); }
  .nav-stats{ display:none; }
  .sync-note{ font-size:12.5px; color:var(--text-muted); padding: 8px 24px 0; }
  .sync-note.warn{ color: var(--low); }

  main.wrap{ padding-top:0; }

  /* ---------- cover banner (edge to edge, running under the nav) ---------- */
  .cover{
    position:relative; overflow:hidden;
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    margin-bottom:26px; height:clamp(340px, 66vh, 620px);
  }
  .cover-img{
    position:absolute; inset:0; background-size:cover; background-position:center 42%;
    background-image:url('images/cover-banner.jpg?v=3');
  }
  /* One gradient does both jobs: darkens the top so the nav stays legible
     over the photo, and dissolves the bottom edge into the page. */
  .cover-fade{
    position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(20,20,20,.72) 0%,
      rgba(20,20,20,.15) 18%,
      rgba(20,20,20,0) 42%,
      rgba(20,20,20,.55) 82%,
      var(--bg) 100%);
  }

  /* ---------- stat chips ---------- */
  .stats-row{ display:flex; gap:8px; margin: 34px 0 22px; flex-wrap:wrap; }
  .stat-chip{
    display:flex; align-items:baseline; gap:5px; background:var(--surface-2); border-radius:var(--r-pill);
    padding:8px 14px; font-size:12.5px; color:var(--text-muted);
  }
  .stat-chip b{ font-size:14px; color:var(--text); }

  /* ---------- avatars ---------- */
  .avatar{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    border-radius:50%; background-size:cover; background-position:center 25%;
    font-family:'Poppins'; font-weight:700; color:#fff; vertical-align:middle;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .avatar-empty{ background:var(--surface-3) !important; color:var(--text-faint); }
  .with-avatar{ display:inline-flex; align-items:center; gap:6px; }

  /* ---------- up next card ---------- */
  .nextup-card{ padding:16px 18px; margin: 0 0 18px; }
  .nextup-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
  .nextup-top .micro{ color:var(--accent); }
  .nextup-when{ font-weight:700; font-size:14.5px; }
  .nextup-fields{ display:flex; gap:10px; flex-wrap:wrap; }
  .nextup-field{ flex:1; min-width:150px; display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:var(--r-pill); padding:6px 8px 6px 6px; }
  .nextup-field-plain{ padding-left:14px; }
  .nextup-field input{
    flex:1; min-width:0; border:none; background:transparent; color:var(--text); font-family:'Poppins'; font-weight:500;
    font-size:13px; padding:5px 4px; outline:none;
  }
  .nextup-field input::placeholder{ color:var(--text-faint); }
  .nextup-summary{ color:var(--text-muted); font-size:13.5px; margin-top:2px; }
  .nextup-summary strong{ color:var(--text); font-weight:600; }

  /* ---------- shared card ---------- */
  .card{ background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); }

  /* ---------- now watching card ---------- */
  .now-card{ display:flex; gap:16px; padding:16px; margin-bottom:26px; align-items:center; }
  .now-cover{ width:96px; aspect-ratio:2/3; border-radius: var(--r-sm); flex-shrink:0; }
  .now-body{ flex:1; min-width:0; }
  .now-body .eyebrow{ color:var(--accent); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
  .now-body h2{ font-size:19px; line-height:1.15; margin-bottom:4px; }
  .now-body .meta{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; }
  .now-body .meta strong{ color:var(--text); font-weight:600; }
  .now-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

  .btn-play{
    display:inline-flex; align-items:center; gap:7px; font-family:'Poppins'; font-weight:700; font-size:13.5px;
    background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r-pill); padding:9px 16px 9px 13px; cursor:pointer; text-decoration:none;
  }
  .btn-play .tri{ width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
  .btn-ghost-pill{
    display:inline-flex; align-items:center; font-family:'Poppins'; font-weight:600; font-size:12.5px;
    background:var(--surface-2); color:var(--text-muted); border-radius:var(--r-pill); padding:9px 14px;
  }

  /* ---------- add form ---------- */
  .add-card{ padding: 20px; margin-bottom: 30px; }
  .add-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
  .add-card h2{ font-size:17px; margin-bottom:4px; }
  .add-card .add-sub{ font-size:12.5px; color:var(--text-muted); margin:0 0 16px; }
  .add-card-close{
    flex-shrink:0; background:var(--surface-2); border:none; color:var(--text-muted);
    font-size:16px; cursor:pointer; line-height:1; width:28px; height:28px; border-radius:50%;
  }
  .add-card-close:hover{ color:#fff; }
  .btn-add-toggle{
    display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    font-family:'Poppins'; font-weight:700; font-size:14px; cursor:pointer;
    background:var(--surface); color:var(--accent); border:1.5px dashed var(--surface-3); border-radius:var(--r-md);
    padding:15px; margin-bottom:30px;
  }
  .btn-add-toggle:hover{ border-color:var(--accent); background:var(--surface-2); }
  .form-error{
    font-size:12.5px; color:#fff; background:var(--low); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:12px; font-weight:600;
  }
  .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:13px; }
  .field label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:600; }
  input, textarea, select{
    font-family:'Poppins'; font-size:14px; color:var(--text);
    background: var(--surface-2); border:1px solid transparent; border-radius:var(--r-sm);
    padding:11px 13px; width:100%;
  }
  input::placeholder, textarea::placeholder{ color:var(--text-faint); }
  input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent); }
  textarea{ resize:vertical; min-height:52px; }
  .btn{
    font-family:'Poppins'; font-weight:700; font-size:14px;
    background: var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r-pill);
    padding:12px 22px; cursor:pointer;
  }
  .btn:hover{ filter:brightness(1.06); }
  .btn.ghost{ background:var(--surface-2); color:var(--text); }
  .btn.small{ font-size:12.5px; padding:8px 15px; }
  .form-row-end{ display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }

  .chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip{ font-size:11.5px; padding:5px 11px; border-radius:var(--r-pill); background: var(--surface-2); color:var(--text-muted); }

  /* ---------- carousel row (rounded poster tiles) ---------- */
  .row-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin: 0 0 12px; }
  .row-heading-end{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .row-stats{
    font-family:'Poppins'; font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
    background:var(--surface-2); color:var(--text-muted); border:none; border-radius:var(--r-pill);
    padding:6px 12px; cursor:pointer; transition: background .15s ease, color .15s ease;
  }
  .row-stats:hover{ background:var(--accent); color:var(--accent-ink); }
  .row-heading h2{ font-size:17px; }

  .carousel{ display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x proximity; }
  .carousel::-webkit-scrollbar{ height:5px; }
  .carousel::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:3px; }
  .carousel::-webkit-scrollbar-track{ background:transparent; }

  .thumb{
    position:relative; flex:0 0 auto; width:168px; aspect-ratio:2/3; border-radius:var(--r-md); overflow:hidden;
    cursor:pointer; scroll-snap-align:start; border:2px solid transparent; transition: border-color .15s ease;
  }
  .thumb.selected{ border-color:var(--accent); }
  .thumb-fade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.05) 50%); }
  .thumb-year{ position:absolute; top:10px; left:10px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); background:rgba(0,0,0,.55); color:#fff; }
  .thumb-menu{
    position:absolute; top:8px; right:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5px;
    width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.45);
    border:none; padding:0; cursor:pointer; z-index:2; transition: background .15s ease;
  }
  .thumb-menu:hover{ background:var(--accent); }
  .thumb-menu:hover span{ background:var(--accent-ink); }
  .thumb-menu span{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.85); }
  .thumb-title{ position:absolute; left:11px; right:11px; bottom:10px; font-weight:700; font-size:14.5px; line-height:1.2; color:#fff; }

  /* ---------- detail panel ---------- */
  .detail{ padding:20px 22px; margin: 4px 0 30px; position:relative; }
  .detail-close{
    position:absolute; top:14px; right:16px; background:var(--surface-2); border:none; color:var(--text-muted);
    font-size:16px; cursor:pointer; line-height:1; width:28px; height:28px; border-radius:50%;
  }
  .detail-close:hover{ color:#fff; }
  .detail-top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-right:26px; }
  .detail h3{ font-size:20px; margin-bottom:4px; }
  .detail .date{ font-size:13px; color:var(--text-muted); }
  .detail .notes{ margin-top:10px; font-size:13.5px; color:var(--text-muted); font-style:italic; max-width:520px; }
  .detail .chips{ margin-top:10px; }
  .detail .actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center; }
  .trailer-link{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
    color:var(--text); text-decoration:none; padding:8px 14px; background:var(--surface-2); border-radius:var(--r-pill);
  }
  .trailer-link:hover{ background:var(--surface-3); }

  .empty{ text-align:center; padding: 54px 24px; color:var(--text-muted); }
  .empty h2{ font-size:20px; color:var(--text); margin-bottom:8px; }
  .empty p{ max-width:400px; margin:8px auto 0; }

  /* ---------- recap grid ---------- */
  .poster-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:16px; }
  .poster{ cursor:pointer;
    position:relative; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow);
    aspect-ratio:2/3; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
    transition: transform .15s ease; cursor:default;
  }

  .poster-fade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 30%, rgba(0,0,0,.34) 56%, rgba(0,0,0,.02) 80%); }
  .poster-content{ position:relative; z-index:1; padding:12px 13px 14px; }
  .poster .badge-slot{ position:absolute; top:9px; left:9px; z-index:2; background:rgba(0,0,0,.55); padding:3px 9px; border-radius:var(--r-pill); }
  .poster-year{ font-size:11.5px; font-weight:700; color:#fff; }
  .poster h3{ font-size:14.5px; line-height:1.15; margin-bottom:4px; }
  .poster .credit-line{ font-size:11px; color:var(--text-muted); margin-bottom:5px; }
  .poster .credit-line .person{ color:#fff; background:rgba(255,255,255,.14); font-size:10.5px; padding:2px 8px 2px 2px; }
  .poster-edit{
    position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2.5px; width:26px; height:26px; border-radius:50%;
    background:rgba(0,0,0,.45); border:none; padding:0; cursor:pointer; opacity:0; transition: opacity .15s ease, background .15s ease;
  }
  .poster:hover .poster-edit, .poster-edit:focus-visible{ opacity:1; }
  .poster-edit:hover{ background:var(--accent); }
  .poster-edit span{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.9); }
  .poster-edit:hover span{ background:var(--accent-ink); }
  .poster .chip{ background:rgba(255,255,255,.14); color:#fff; font-size:10.5px; padding:3px 8px; }
  .poster .trailer-link{ margin-top:8px; background:rgba(255,255,255,.14); font-size:11px; padding:6px 11px; }
  .poster .trailer-link:hover{ background:rgba(255,255,255,.24); }

  @media (max-width:640px){
    .wrap{ padding-left:16px; padding-right:16px; }
    /* the cover stays edge-to-edge here too; only its height comes down */
    .cover{ margin-bottom:22px; height:clamp(300px, 58vh, 460px); }
    .nav{ padding:14px 16px; }
    .brand{ font-size:15.5px; }
    .segtabs button{ padding:7px 12px; font-size:12.5px; }
    .grid2{ grid-template-columns:1fr; }
    .now-card{ flex-direction:column; align-items:flex-start; }
    .now-cover{ width:120px; height:auto; }
    .thumb{ width:140px; }
  }

  /* ---------- artwork layer ----------
     The poster lives in its own element so hover can zoom the image alone.
     The card keeps its size and clips the overflow, instead of the whole
     component growing and cropping its own text. */
  .art{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .thumb:hover .art, .poster:hover .art{ transform: scale(1.07); }
  .now-cover{ position:relative; overflow:hidden; }
  .thumb-fade, .poster-fade{ z-index:1; }
  .thumb-title, .thumb-year, .poster-content, .poster .badge-slot{ z-index:2; }

  /* ---------- person = avatar hugging its name ---------- */
  /* Same pill as a guest chip, so the picker reads as one of the group —
     just with the name at full strength rather than muted. */
  .person{
    display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
    font-weight:600; color:var(--text); font-size:11.5px;
    padding:4px 11px 4px 4px; border-radius:var(--r-pill); background:var(--surface-2);
  }
  .sep{ color:var(--text-faint); margin:0 2px; }
  .chip{ display:inline-flex; align-items:center; gap:5px; }
  .chips-preview{ margin:-4px 0 13px; }

  /* the film's own facts, as opposed to who watched it */
  .film-meta{ font-size:12px; color:var(--text-muted); margin-bottom:6px; display:flex; flex-wrap:wrap; gap:0 4px; }
  .poster .film-meta{ font-size:10.5px; margin-bottom:4px; color:rgba(255,255,255,.72); }
  .detail .film-meta{ margin:2px 0 6px; }

  .input-with-avatar{ position:relative; display:flex; align-items:center; }
  .input-with-avatar .avatar{ position:absolute; left:10px; pointer-events:none; }
  .input-with-avatar input{ padding-left:40px; }

  /* ---------- edit dialog ---------- */
  body.modal-open{ overflow:hidden; }
  #modal{ position:fixed; inset:0; z-index:60; display:none; }
  #modal.open{ display:block; }
  .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
  .modal-card{
    position:relative; z-index:1; background:var(--surface); border-radius:var(--r-lg);
    box-shadow:var(--shadow); padding:22px; width:min(560px, calc(100vw - 32px));
    max-height:calc(100vh - 48px); overflow-y:auto;
    margin:24px auto; animation: modal-in .18s ease-out;
  }
  @keyframes modal-in{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    .modal-card{ animation:none; }
    .art{ transition:none; }
  }
  .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
  .modal-head h2{ font-size:17px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

  /* ---------- screening details dialog ---------- */
  .details-head{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
  .details-art{
    width:78px; aspect-ratio:2/3; flex-shrink:0; border-radius:var(--r-sm);
    background-size:cover; background-position:center;
  }
  .details-head h2{ font-size:18px; line-height:1.2; margin-bottom:4px; }
  .details-when{ font-size:12.5px; color:var(--text-muted); }
  .details-block{ margin-top:16px; }
  .details-block .micro{ margin-bottom:8px; }
  .details-block .chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .details-card .modal-actions{ align-items:center; }
  .details-card .trailer-link{ text-decoration:none; }

  /* ---------- month stats dialog ---------- */
  .stats-card .modal-head .add-sub{ margin:2px 0 0; }
  .stat-tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:16px; }
  .stat-tile{
    background:var(--surface-2); border-radius:var(--r-sm); padding:12px 10px; text-align:center;
    display:flex; flex-direction:column; gap:2px;
  }
  .stat-tile b{ font-size:20px; line-height:1.1; }
  .stat-tile span{ font-size:10.5px; color:var(--text-muted); line-height:1.25; }

  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .stat-panel{ min-width:0; margin-bottom:4px; }
  .stat-panel .micro{ margin-bottom:9px; }
  .panel-empty{ font-size:12px; color:var(--text-faint); margin:0; line-height:1.4; }

  .bars{ display:flex; flex-direction:column; gap:7px; }
  .bar-row{ display:grid; grid-template-columns: minmax(0,1fr) 46px 18px; align-items:center; gap:8px; }
  .bar-label{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bar-track{ height:5px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
  .bar-fill{ display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); }
  .bar-count{ font-size:12px; color:var(--text-muted); text-align:right; }

  @media (max-width:640px){
    .stat-tiles{ grid-template-columns:repeat(2, 1fr); }
    .stat-grid{ grid-template-columns:1fr; }
  }

  /* ---------- squircles ----------
     Chrome 139+ can draw a real superellipse corner; `corner-shape` is
     ignored everywhere else, which just leaves the plain rounded corners
     above. Circles (avatars) and pills are deliberately left alone. */
  @supports (corner-shape: squircle){
    .card,
    .modal-card,
    .details-art,
    .stat-tile,
    .thumb,
    .poster,
    .now-cover,
    .btn-add-toggle,
    .form-error,
    input,
    textarea,
    select{
      corner-shape: squircle;
    }
  }