/* flipboards — base: the board look, housing, flaps, clock, dots, fullscreen, shell */
  :root{
    --flap-hi:#2a2d35; --flap-lo:#15161b; --ink:#f3eddf; --amber:#f0b54a; --amber-deep:#c8862a;
    --hinge:rgba(0,0,0,.66);
    --steel-hi:#363a44; --steel:#262932; --steel-lo:#171a21; --steel-edge:#0b0c10;
    --engrave:#aeb4c2; --engrave-dim:#6b7280; --label:#8b93a4;
    --well:#070708; --night:#0a0b0e;
    --cell:clamp(16px,2.55vw,35px);          /* board cell HEIGHT — everything scales off this */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:
      radial-gradient(1200px 560px at 50% -10%, rgba(240,181,74,.06), transparent 62%),
      radial-gradient(1000px 760px at 50% 120%, rgba(120,140,200,.045), transparent 55%),
      var(--night);
    color:var(--ink); font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    min-height:100vh; -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; align-items:center; padding:clamp(14px,3vw,38px) 12px 32px;
  }

  /* ---- flat floating panel (a matte metal board, not a chunky bezel) ------ */
  .housing{
    position:relative; width:100%; max-width:min(2400px,98vw);
    background:linear-gradient(180deg,#1b1d23,#141519);
    border:1px solid #2b2e37; border-radius:10px; padding:clamp(10px,1.3vw,16px) clamp(10px,1.3vw,16px) clamp(8px,1.1vw,13px);
    box-shadow:0 30px 66px -30px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.03) inset;   /* soft float, no bezel */
  }
  /* header bar: flat, a single hairline separating it from the flaps below */
  .plate{ display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0;
    padding:6px clamp(4px,.7vw,10px) 15px; margin-bottom:14px; box-shadow:none; }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
  .ident{ display:flex; align-items:center; gap:11px; min-width:0; }
  .titles{ display:flex; flex-direction:column; min-width:0; }
  .name{ font-weight:800; letter-spacing:.16em; font-size:clamp(15px,2.7vw,22px); color:var(--engrave);
    text-shadow:0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.05); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; outline:none; }
  .sub{ font-size:clamp(9px,1vw,11px); letter-spacing:.4em; color:var(--engrave-dim); font-weight:600; margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; outline:none; }
  /* the owner edits the name + subtitle in place — click either to type, with a
     subtle hover highlight to show they're editable (no separate edit button). */
  /* just a soft background highlight — no outline/ring border (padding keeps the
     tint off the glyphs) */
  .ident.owner:not(.editing) .name, .ident.owner:not(.editing) .sub{ cursor:text; border-radius:4px; margin:-1px -5px; padding:1px 5px; transition:background .12s; }
  .ident.owner:not(.editing) .name:hover, .ident.owner:not(.editing) .sub:hover{ background:rgba(240,181,74,.10); }
  .ident.editing .name,.ident.editing .sub{ background:rgba(240,181,74,.15); border-radius:4px; margin:-1px -5px; padding:1px 5px;
    overflow:visible; text-overflow:clip; cursor:text; caret-color:var(--amber); -webkit-user-select:text; user-select:text; outline:none; }

  /* plate left cluster: logo + station name sit together */
  .plate-left{ display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); min-width:0; }
  .logo-spot{ position:relative; flex:none; display:flex; align-items:center; }
  .logo-img{ height:clamp(30px,4vw,48px); width:clamp(30px,4vw,48px); object-fit:cover; border-radius:8px;
    border:1px solid #2b2f3a; display:block; }
  .logo-img.clickable{ cursor:pointer; }
  .logo-img.clickable:hover{ border-color:var(--amber-deep); }
  .logo-add{ height:clamp(30px,4vw,48px); width:clamp(30px,4vw,48px); border-radius:8px; border:1px dashed #3a4150;
    background:transparent; color:var(--engrave-dim); font-size:18px; line-height:1; cursor:pointer; }
  .logo-add:hover{ color:var(--amber); border-color:var(--amber-deep); }
  .logo-x{ position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%; padding:0;
    border:1px solid #2b2f3a; background:#11131a; color:var(--label); font-size:10px; line-height:1; }
  .logo-x:hover{ color:var(--amber); border-color:var(--amber-deep); }

  /* the board + its column chrome (separator toggles + section labels) stack together
     so all three size their columns off the same --cell */
  .board-stack{ display:flex; flex-direction:column; align-items:center; }
  .well.portal .board-stack{ align-items:flex-start; }

  /* owner-only: a tiny toggle above each column; on = that column is a separator */
  .col-toolbar{ display:flex; gap:clamp(2px,.45vw,4px); width:max-content; margin:0 0 6px; }
  .col-btn{ width:calc(var(--cell) * .72); height:9px; flex:none; padding:0; border-radius:3px;
    border:1px solid #2b2f3a; background:#1b1e25; cursor:pointer; transition:background .12s, border-color .12s; }
  .col-btn:hover{ border-color:var(--amber-deep); }
  .col-btn.sep{ background:var(--amber-deep); border-color:var(--amber-deep); }

  /* section header labels, aligned to the flap columns; a label overflows to the right
     of its section-start column without shifting the grid */
  .label-row{ display:flex; gap:clamp(2px,.45vw,4px); width:max-content; margin:0 0 8px; height:clamp(34px,3.8vw,48px); }
  /* the empty cells don't catch the pointer, so a label that overflows its one-flap cell
     (its font is ~4× bigger than the placeholder) stays hoverable/clickable full width */
  .label-cell{ width:calc(var(--cell) * .72); flex:none; position:relative; pointer-events:none; }
  .label-text, .label-input{ position:absolute; left:0; bottom:0; white-space:nowrap; pointer-events:auto;
    font-family:'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; line-height:1;
    color:var(--amber); font-weight:700; text-shadow:0 0 8px rgba(240,181,74,.25); }
  /* a real label reads at full size (bumped ~2×); an empty input shows a small placeholder hint */
  .label-text, .label-input:not(:placeholder-shown){ font-size:clamp(26px,3.2vw,40px); }
  .label-input:placeholder-shown{ font-size:clamp(8px,.85vw,10px); }
  .label-input{ background:transparent; border:0; outline:none; padding:0 2px; width:13ch; cursor:text; caret-color:var(--amber); }
  .label-input::placeholder{ color:var(--engrave-dim); opacity:.7; text-shadow:none; letter-spacing:.12em; }
  /* a section label is editable (owner): hint it on hover, and on focus give a clear
     highlight + underline so the blinking amber caret is obvious on the busy board */
  .label-input:hover:not(:focus){ box-shadow:inset 0 -2px 0 rgba(240,181,74,.4); }
  .label-input:focus{ background:rgba(240,181,74,.14); box-shadow:inset 0 -2px 0 var(--amber); caret-color:var(--amber); }

  /* a separator column: a flat background gap, no flap */
  .cell.sep{ background:transparent; box-shadow:none; }
  .cell.sep .static, .cell.sep .leaf{ display:none; }
  .cell.sep::after{ display:none; }

  .well{ background:var(--well); border-radius:8px; padding:clamp(11px,1.7vw,18px) clamp(7px,1.3vw,14px);
    box-shadow:inset 0 2px 10px rgba(0,0,0,.55); overflow-x:auto; scrollbar-width:none; }
  .well::-webkit-scrollbar{ display:none }
  /* portal: on a small screen the board is bigger than the well — pan to read it */
  .well.portal{ overflow:auto; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior:contain; }
  .well.portal .frow{ margin:0; }                 /* pin to the left so panning reaches col 0 */
  .well.portal.dragging{ cursor:grabbing; }
  .well.portal #board{ width:max-content; }

  .frow{ display:flex; gap:clamp(2px,.45vw,4px); justify-content:flex-start; perspective:900px; width:max-content; margin:0 auto; border-radius:5px; }
  .frow + .frow{ margin-top:clamp(2px,.55vw,6px); }
  .headline-row{ justify-content:center; }
  /* rows invite a click only while edit mode is on (the caret then lands there) */
  #board.editing .frow{ cursor:text; transition:box-shadow .15s; }
  #board.editing .frow:hover{ box-shadow:0 0 0 1px var(--amber-deep), 0 0 16px rgba(240,181,74,.14); }

  .cell{ position:relative; flex:none; width:calc(var(--cell) * .72); height:var(--cell); border-radius:calc(var(--cell) * .1);
    background:#070809; box-shadow:0 2px 5px rgba(0,0,0,.55); }
  .cell .static,.cell .leaf{ position:absolute; left:0; right:0; height:50%; overflow:hidden; background:linear-gradient(180deg,var(--flap-hi),var(--flap-lo)); }
  .cell .static.top,.cell .leaf.top{ top:0; border-radius:calc(var(--cell)*.1) calc(var(--cell)*.1) 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
  .cell .static.bot,.cell .leaf.bot{ bottom:0; border-radius:0 0 calc(var(--cell)*.1) calc(var(--cell)*.1); background:linear-gradient(180deg,#101116,#0b0c10); }
  .cell::after{ content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:var(--hinge); z-index:5; pointer-events:none; }
  .cell span{ position:absolute; left:0; right:0; height:var(--cell); font-size:calc(var(--cell) * .62); line-height:var(--cell);
    font-weight:700; text-align:center; color:var(--ic, var(--ink)); text-shadow:0 1px 0 rgba(0,0,0,.45); }
  .cell .top span{ top:0 } .cell .bot span{ bottom:0 }
  .cell .leaf{ z-index:4; backface-visibility:hidden; will-change:transform; }
  .cell .leaf.top{ transform-origin:50% 100%; } .cell .leaf.bot{ transform-origin:50% 0%; transform:rotateX(90deg); }
  .headline-row .cell span,.clock .cell span{ color:var(--ic, var(--amber)); text-shadow:0 0 9px rgba(240,181,74,.28),0 1px 0 rgba(0,0,0,.5); }
  .clock{ --cell:clamp(18px,2.5vw,33px); }
  .clock .frow{ perspective:480px; }
  /* tap the clock to mute just its (already faint) per-second tick; hover shows a hint */
  .clock-wrap{ position:relative; cursor:pointer; display:flex; align-items:center; }
  .clock-wrap.muted .clock{ opacity:.5; transition:opacity .15s; }
  .clock-tip{ position:absolute; top:calc(100% + 8px); right:0; z-index:30; white-space:nowrap;
    background:#11131a; border:1px solid var(--amber-deep); color:var(--amber);
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
    padding:6px 9px; border-radius:7px; box-shadow:0 14px 30px -14px #000;
    opacity:0; transform:translateY(-3px); pointer-events:none; transition:opacity .14s, transform .14s; }
  .clock-wrap:hover .clock-tip{ opacity:1; transform:translateY(0); }

  /* page nav — clickable page numbers (a bigger hit target than dots); a trailing ＋
     adds a page while editing */
  .pagenav{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; align-items:center; margin-top:12px; }
  .pnum{ min-width:30px; height:30px; padding:0 8px; border-radius:8px; border:1px solid #262a34; background:#171a21;
    color:var(--engrave); font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:0;
    font-variant-numeric:tabular-nums; line-height:1; transition:color .15s, border-color .15s, background .15s; }
  .pnum:hover{ color:var(--ink); border-color:#3a4150; }
  .pnum.on{ color:#1a1205; background:var(--amber); border-color:var(--amber-deep); }
  .pnum-add{ color:var(--amber); background:transparent; border-style:dashed; border-color:var(--amber-deep); font-size:16px; }
  .pnum-add:hover{ color:#1a1205; background:var(--amber); border-style:solid; }

  /* inline row editor (owner) */
  .row-edit{ position:fixed; z-index:60; display:none; background:#0b0d11; border:1px solid var(--amber-deep); color:var(--amber);
    font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.1em;
    border-radius:6px; outline:none; box-shadow:0 0 0 3px rgba(240,181,74,.16); padding:0 8px; }

  /* ---- direct on-board editing (owner types on the flaps) ---------------- */
  .well{ position:relative; }                     /* anchor the hidden key-catch input */
  /* the caret: an amber ring that blinks on the cell you're typing into */
  .cell.cursor{ z-index:6; box-shadow:0 2px 5px rgba(0,0,0,.55), 0 0 0 2px var(--amber), 0 0 14px rgba(240,181,74,.5);
    animation:flap-caret 1.05s steps(1,end) infinite; }
  @keyframes flap-caret{ 50%{ box-shadow:0 2px 5px rgba(0,0,0,.55); } }
  @media (prefers-reduced-motion: reduce){ .cell.cursor{ animation:none; } }
  /* invisible input that holds focus so the keyboard (incl. mobile) reaches the board */
  .edit-catch{ position:absolute; z-index:2; opacity:0; margin:0; padding:0; border:0; background:transparent;
    color:transparent; caret-color:transparent; font-size:16px; pointer-events:none; }

  /* the edit bar under the board: pages, grid size, done */
  .edit-bar{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; margin-top:13px; }
  .eb-group{ display:inline-flex; align-items:center; gap:7px; background:#12141b; border:1px solid #23262f; border-radius:9px; padding:5px 9px; }
  .eb-label{ color:var(--engrave-dim); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
  .eb-btn{ width:26px; height:24px; border-radius:6px; border:1px solid var(--steel-edge); background:linear-gradient(180deg,#272b34,#171a20);
    color:var(--ink); font-size:14px; line-height:1; padding:0; letter-spacing:0; }
  .eb-btn:hover:not(:disabled){ color:var(--amber); border-color:var(--amber-deep); }
  .eb-val{ min-width:2.6ch; text-align:center; color:var(--ink); font-size:12.5px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
  .eb-done{ padding:7px 16px; color:#1a1205; background:var(--amber); border-color:var(--amber-deep); font-size:12px; }
  .eb-done:hover{ background:#f3bd57; }
  .edit-tip{ text-align:center; color:var(--engrave-dim); font-size:12px; letter-spacing:.02em; text-transform:none; margin:8px 0 0; }


  /* fullscreen control + takeover ----------------------------------------- */
  .plate-right{ display:flex; align-items:center; gap:clamp(8px,1.3vw,13px); flex:none; }
  .fs-btn{ flex:none; width:29px; height:26px; border-radius:7px; border:1px solid var(--steel-edge);
    background:linear-gradient(180deg,#272b34,#171a20); color:var(--engrave); font-size:15px; line-height:1; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07); transition:color .15s, border-color .15s; }
  .fs-btn:hover{ color:var(--amber); border-color:var(--amber-deep); }
  .fs-btn.on{ color:var(--amber); border-color:var(--amber-deep); }
  /* the sound toggle gets its OWN highlight: hovering it while OFF glows off-white
     (not amber), so it never looks "active" until the sound is actually on. */
  .fs-btn.snd:hover:not(.on){ color:var(--ink); border-color:#3a4150; }
  /* the delete-page control: an outline SVG trash, glows danger-red on hover */
  .fs-btn.fs-danger{ display:inline-flex; align-items:center; justify-content:center; }
  .fs-btn.fs-danger:hover{ color:#ff6b6b; border-color:#c0392b; }
  .fs-hint{ display:none; text-align:center; color:var(--engrave-dim); font-size:13px; letter-spacing:.34em; text-transform:uppercase; margin:0; }
  .housing:fullscreen, .housing:-webkit-full-screen{
    max-width:none; width:100vw; height:100vh; border-radius:0; display:flex; flex-direction:column; justify-content:center;
    gap:clamp(8px,1.5vh,22px); padding:2.5vh clamp(18px,3.5vw,64px); --cell:min(3.7vw, 5.2vh); }
  .housing:fullscreen .plate, .housing:-webkit-full-screen .plate{ margin-bottom:0; padding:clamp(9px,1vh,14px) clamp(14px,1.5vw,26px); border-radius:clamp(10px,.8vw,14px); gap:clamp(14px,1.5vw,24px); }
  /* Keep fullscreen chrome legible without letting it crowd the board. */
  .housing:fullscreen .name, .housing:-webkit-full-screen .name{ font-size:clamp(15px,1.65vw,34px); letter-spacing:.18em; }
  .housing:fullscreen .sub, .housing:-webkit-full-screen .sub{ font-size:clamp(9px,.72vw,15px); margin-top:clamp(2px,.32vh,5px); }
  .housing:fullscreen .lamp, .housing:-webkit-full-screen .lamp{ width:clamp(9px,.7vw,13px); height:clamp(9px,.7vw,13px); }
  .housing:fullscreen .ident, .housing:-webkit-full-screen .ident{ gap:clamp(11px,.9vw,16px); }
  .housing:fullscreen .plate-right, .housing:-webkit-full-screen .plate-right{ gap:clamp(8px,.9vw,16px); }
  .housing:fullscreen .fs-btn, .housing:-webkit-full-screen .fs-btn{ width:clamp(29px,2vw,42px); height:clamp(26px,1.8vw,38px); font-size:clamp(15px,1.1vw,22px); border-radius:clamp(7px,.55vw,10px); }
  .housing:fullscreen .edit-btn, .housing:-webkit-full-screen .edit-btn{ width:clamp(25px,1.75vw,36px); height:clamp(23px,1.6vw,33px); font-size:clamp(12px,1vw,20px); }
  .housing:fullscreen .clock, .housing:-webkit-full-screen .clock{ --cell:min(2.25vw, 3.2vh, 34px); }
  .housing:fullscreen .well, .housing:-webkit-full-screen .well{ overflow:hidden; }
  .housing:fullscreen .fs-hint, .housing:-webkit-full-screen .fs-hint{ display:block; font-size:clamp(13px,.95vw,20px); }

  /* ---- controls ---------------------------------------------------------- */
  .panel{ width:100%; max-width:560px; margin:18px auto 0; }
  .status{ text-align:center; color:var(--engrave-dim); font-size:11.5px; letter-spacing:.08em; margin:0 0 13px; min-height:1.1em; }
  .status b{ color:var(--label); font-weight:600; } .status.flash{ color:var(--amber); }
  .field{ position:relative; }
  .field input{ width:100%; background:#0c0e12; border:1px solid #23262f; color:var(--ink); border-radius:12px;
    padding:14px 64px 14px 16px; font-family:inherit; font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
    outline:none; transition:border-color .15s, box-shadow .15s; }
  .field input::placeholder{ color:#4a505d; letter-spacing:.12em; }
  .field input:focus{ border-color:var(--amber-deep); box-shadow:0 0 0 3px rgba(240,181,74,.12); }
  .count{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:11px; color:#5b616f; letter-spacing:.08em; font-variant-numeric:tabular-nums; pointer-events:none; }
  .row{ display:flex; gap:10px; margin-top:12px; }
  button{ font-family:inherit; cursor:pointer; border:1px solid #23262f; border-radius:6px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; transition:transform .06s, filter .15s, background .15s, border-color .15s; }
  button:active{ transform:translateY(1px) } button:disabled{ opacity:.45; cursor:default; }
  .btn-send{ flex:1; padding:13px 16px; color:#1a1205; background:var(--amber); border-color:var(--amber-deep); }
  .btn-send:hover:not(:disabled){ background:#f3bd57 }
  .btn-weather{ flex:1; padding:13px 16px; color:var(--ink); background:#1b1e25; }
  .btn-weather:hover:not(:disabled){ border-color:#33384a; background:#20242d }
  .btn-sound{ width:46px; color:var(--label); background:#1b1e25; font-size:15px; letter-spacing:0; }
  .btn-sound.on{ color:var(--amber); border-color:var(--amber-deep); }
  .note{ text-align:center; color:#4f5564; font-size:11.5px; letter-spacing:.06em; margin:18px auto 0; max-width:500px; line-height:1.7; }
  .note b{ color:var(--label); font-weight:600 }
  .foot{ margin-top:24px; font-size:10.5px; letter-spacing:.34em; color:#3c4250; text-transform:uppercase; }
  .foot a{ color:#586073; text-decoration:none; } .foot a:hover{ color:var(--amber) }
  @media (prefers-reduced-motion: reduce){ .lamp{ animation:none } }

  /* ---- mobile pass ------------------------------------------------------- */
  @media (max-width:600px){
    body{ padding:10px 6px 22px; }
    .housing{ max-width:100%; border-radius:11px; padding:6px; }
    .bolt{ display:none; }                       /* bezel is too slim for bolts now */
    .plate{ padding:8px 10px; gap:9px; margin-bottom:7px; }
    .name{ font-size:12px; letter-spacing:.1em; }
    .sub{ letter-spacing:.26em; }
    .plate-right{ gap:7px; }
    .clock{ --cell:clamp(12px,3.6vw,17px); }
    .well{ padding:10px 6px; }
    .panel{ margin-top:14px; }
    .note{ font-size:11px; margin-top:14px; }
    .modal{ padding:10px; }
    .modal-body{ padding:16px 16px 18px; }
    .foot{ margin-top:18px; letter-spacing:.26em; }
  }
  @media (max-width:380px){
    .clock{ display:none; }                       /* give the station name the row */
    .name{ font-size:13px; }
  }

  /* ═══ Flipboards — Solari-era terminal (1930s–60s) ════════════════════════ */
  :root{
    --font-display:'Poiret One','JetBrains Mono',monospace;   /* deco/mid-century wordmark + titles */
    --font-body:'Josefin Sans',ui-sans-serif,system-ui,sans-serif;  /* warm friendly copy */
    --brass:var(--amber); --brass-deep:var(--amber-deep);
    --hair:rgba(240,181,74,.30);         /* gold hairline */
    --hair-soft:rgba(240,181,74,.14);
  }

  /* --- board fills the space: the wrapper must stretch, not shrink-wrap ----- */
  /* the Vue mount point sits between <body> (a centered flex column) and #boardApp,
     so it must fill the width or align-items:center shrink-wraps the whole board. */
  #app{ width:100%; }
  #boardApp{ width:100%; display:flex; flex-direction:column; align-items:center; }
  /* the flaps + plate are display chrome, not text to select — so a click that opens
     a dialog never leaves flap letters highlighted (name-edit re-enables selection). */
  #board, #bgBoard, .plate, .dots, .fs-hint, .foot{ -webkit-user-select:none; user-select:none; }
  /* page dots: hidden by the app when a board has a single page (see Dots.js) */
  #boardApp[hidden], #landing[hidden]{ display:none; }