/* ── THE CHROME ─────────────────────────────────────────────────────────
   One frame + menu for every cards page. Two layers:

   · the SKELETON — dimensions, positions, the collapse machinery — is one
     structure shared by every page and never varies;
   · the SKIN — colors, materials, button dress — varies by section.
     body.ch-skin-a = The Double Rule (the print shop: cream, ink, crimson);
     body.ch-skin-b = The Gilt Cartouche (Demonocracy: walnut, gold,
     parchment). cards-chrome.js stamps the skin class per section.

   Every metric is explicit (box-sizing, line-height, font) so host pages
   with different resets cannot resize the chrome. */

:root {
  --ch-pad: 14px;           /* frame thickness */
  /* One width everywhere, sized for the longest label we expect: room for
     "PSYCHOPOLITICA" plus a couple more letters, never per-page. */
  --ch-menu: 168px;
}

.ch-frame, .ch-menu, .ch-menu *, .ch-tog, #chrome, #win, #winshade {
  box-sizing: border-box;
}

/* ══ SKELETON ══════════════════════════════════════════════════════════ */

/* the frame (overlay pages; the desk's #chrome plays this role there) */
.ch-frame { position: fixed; inset: 0; pointer-events: none; z-index: 98000;
  border: var(--ch-pad) solid transparent; }
.ch-frame::before { content: ''; position: absolute; inset: -8px; }
.ch-frame::after  { content: ''; position: absolute; inset: -4px; }

/* the menu column */
.ch-menu { position: fixed; left: var(--ch-pad); top: var(--ch-pad); bottom: var(--ch-pad);
  width: var(--ch-menu); z-index: 98001;
  display: flex; flex-direction: column; gap: 8px; padding: 14px 12px;
  overflow: hidden;
  transition: width .28s cubic-bezier(.22,.61,.36,1), padding .28s cubic-bezier(.22,.61,.36,1); }
.ch-menu nav { display: flex; flex-direction: column; gap: 8px; transition: opacity .18s; }
/* ← on board pages: back to the desk view the board was opened from */
.ch-back { display: block; text-align: center; text-decoration: none; cursor: pointer;
  font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1;
  padding: 2px 0 12px; color: inherit; transition: opacity .18s; }
body.ch-skin-a .ch-back { color: #2a2620; }  body.ch-skin-a .ch-back:hover { color: #b3251c; }
body.ch-skin-b .ch-back { color: #4a3416; }  body.ch-skin-b .ch-back:hover { color: #2e1d0f; }
body.ch-closed .ch-menu .ch-back { opacity: 0; pointer-events: none; }
body.ch-closed .ch-menu { width: 0; padding-left: 0; padding-right: 0; }
body.ch-closed .ch-menu nav, body.ch-closed .ch-menu .ch-dock,
body.ch-closed .ch-menu .ch-id { opacity: 0; pointer-events: none; }

/* menu items: the skin dresses them; the skeleton fixes their box */
.ch-btn { display: block; padding: 10px 6px; text-align: center; white-space: nowrap;
  font-size: 10.5px; line-height: 1.5; letter-spacing: 2.2px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  background: none; }

/* the collapse button: a small round thing riding the seam between the
   menu and the window; cards-chrome.js keeps it exactly on the seam */
.ch-tog { position: fixed; z-index: 98002;
  left: calc(var(--ch-pad) + var(--ch-menu)); top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 13px; line-height: 1; padding: 0 1px 1px 0;
  cursor: pointer;
  transition: left .28s cubic-bezier(.22,.61,.36,1); }
body.ch-closed .ch-tog { left: var(--ch-pad); }
/* .ch-round: other small round chrome buttons (the boards' ?), same dress
   as the toggle, riding the window's top rule at the right corner */
.ch-round { position: fixed; z-index: 98002;
  top: calc(var(--ch-pad) + 12px); right: calc(var(--ch-pad) + 12px);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 12px; line-height: 1; padding: 0;
  cursor: pointer; }
/* .ch-coin: the same little round button with NO position of its own —
   host pages place it (e.g. the stack view's back button) */
.ch-coin { width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 13px; line-height: 1; padding: 0 1px 1px 0;
  cursor: pointer; box-sizing: border-box; }

/* overlay mode (every page but the desk): clear the page content */
body.ch-overlay { transition: margin-left .28s cubic-bezier(.22,.61,.36,1); }
body.ch-overlay { margin: calc(var(--ch-pad) + 2px) !important;
  margin-left: calc(var(--ch-pad) + var(--ch-menu) + 2px) !important; }
body.ch-overlay.ch-closed { margin-left: calc(var(--ch-pad) + 2px) !important; }

/* desk mode: cards-home brings its own #chrome/#win flex; skeleton sizes it */
#chrome { position: fixed; inset: 0; display: flex; gap: 0;
  padding: var(--ch-pad); }
#chrome .ch-menu { position: static; width: auto; flex: 0 0 var(--ch-menu);
  transition: flex-basis .28s cubic-bezier(.22,.61,.36,1), padding .28s cubic-bezier(.22,.61,.36,1); }
body.ch-closed #chrome .ch-menu { flex-basis: 0; width: auto; }
#win { flex: 1 1 auto; position: relative; }
#winshade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* the dock: page tools that live at the menu's foot (the map's minimap,
   the building tray, ?) */
.ch-dock { margin-top: 14px; display: flex; flex-direction: column; gap: 8px;
  padding: 4px 4px 0;
  flex: 1 1 auto; min-height: 0; }
/* ── THE PLATE ──────────────────────────────────────────────────────────
   The minimap is not a game HUD on this table: it's a printer's plate —
   the sheet seen small, marks where the work sits, a hairline showing the
   part in the window. Its palette is tokens so the canvas painting (in
   cards.html / cards-home.html) follows whichever skin it lands in. */
:root {
  --mm-ground: #f2ece0;      /* the plate's paper */
  --mm-mark:   rgba(58,52,44,.62);   /* work, in ink */
  --mm-mark-2: rgba(139,26,26,.20);  /* the second hand: written things, quieter */
  --mm-view:   #b3251c;      /* the window, in crimson */
  --mm-edge:   #2a2620;
}
body.ch-skin-b {
  --mm-ground: #efe3c6;
  --mm-mark:   rgba(64,42,24,.66);
  --mm-mark-2: rgba(138,109,34,.5);
  --mm-view:   #8a6d22;
  --mm-edge:   #8a6d22;
}
/* the tile world keeps its night: parchment marks on dark, gilt window */
body.cosmos {
  --mm-ground: #14161f;
  --mm-mark:   rgba(230,216,182,.82);
  --mm-mark-2: rgba(176,141,46,.7);
  --mm-view:   #e0a418;
  --mm-edge:   rgba(216,185,106,.55);
}

.ch-menu .ch-dock .minimap { margin-top: auto; position: static; width: 100%; height: auto;
  border-radius: 2px; flex: 0 0 auto;
  display: block;               /* shown on every board once docked */
  background: var(--mm-ground); cursor: pointer; }
.ch-menu .ch-dock .tile-tray { position: static; display: flex !important;
  left: auto; top: auto; bottom: auto; transform: none; width: 100%; max-width: none;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  flex-direction: column; align-items: stretch; gap: 6px;
  box-shadow: none; }
body.readonly .ch-menu .ch-dock .tile-tray { display: none !important; }



/* ══ SKIN A · THE DOUBLE RULE ══════════════════════════════════════════
   The print shop: cream band, hairline ink rule outside, crimson rule
   inside, menu as set type. Default skin. */

body.ch-skin-a .ch-frame { border-color: #faf7ef; }
/* the crimson rule is the big outer frame; the ink hairline is the WINDOW:
   its left side is the menu seam, meeting top and bottom at the corners,
   and it slides with the collapse. Collapsed, only the red line remains. */
body.ch-skin-a .ch-frame::before { border: 1.5px solid #b3251c;
  transition: opacity .2s; }
body.ch-skin-a.ch-closed .ch-frame::before { opacity: 0; }
body.ch-skin-a .ch-frame::after  { inset: 0; left: var(--ch-menu);
  border: 1px solid #2a2620;
  transition: left .28s cubic-bezier(.22,.61,.36,1), opacity .2s; }
body.ch-skin-a.ch-closed .ch-frame::after { opacity: 0; }
body.ch-skin-a .ch-menu { background: #faf7ef; }
/* collapsed: the frame vanishes entirely; the button stays, whole, at
   the screen's left edge */
body.ch-skin-a.ch-closed .ch-tog { left: 19px; }   /* a little air off the edge */
body.ch-skin-a.ch-overlay { transition: margin .28s cubic-bezier(.22,.61,.36,1); }
body.ch-skin-a.ch-overlay.ch-closed { margin: 0 !important;
  margin-left: 0 !important; }
body.ch-skin-a .ch-btn { font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px; letter-spacing: 2.4px; color: #2a2620; }
body.ch-skin-a .ch-btn:hover { color: #b3251c; }
body.ch-skin-a .ch-btn.on { color: #b3251c; position: relative; }
body.ch-skin-a .ch-btn.on::after { content: ''; position: absolute; left: 50%;
  bottom: 3px; width: 26px; height: 1.5px; margin-left: -13px; background: #b3251c; }
body.ch-skin-a .ch-tog, body.ch-skin-a .ch-round, body.ch-skin-a .ch-coin {
  background: radial-gradient(circle at 36% 30%, #fffdf6, #faf7ef 58%, #ece5d2);
  border: 1.5px solid #b3251c; color: #b3251c;
  box-shadow: 0 2px 6px rgba(60,50,36,.35), inset 0 1px 0 rgba(255,255,255,.85); }
body.ch-skin-a .ch-tog:hover, body.ch-skin-a .ch-round:hover, body.ch-skin-a .ch-coin:hover {
  background: radial-gradient(circle at 36% 30%, #ffffff, #fdfbf4 58%, #efe8d6); }
body.ch-skin-a .ch-menu .ch-dock .minimap {
  border: 1px solid var(--mm-edge);
  box-shadow: 0 0 0 2.5px #faf7ef, 0 0 0 3.5px rgba(179,37,28,.75),
              0 2px 5px rgba(60,50,36,.18);
  border-radius: 0;
}
/* desk mode in skin A: red outer frame, ink window; collapsed, the band
   shrinks to the red line and the window rule fades */
body.ch-skin-a #chrome { background: #faf7ef;
  transition: padding .28s cubic-bezier(.22,.61,.36,1); }
body.ch-skin-a #chrome::before { content: ''; position: absolute; inset: 6px;
  pointer-events: none; z-index: 5; border: 1.5px solid #b3251c;
  transition: opacity .2s; }
body.ch-skin-a #win { border: 1px solid #2a2620; transition: border-color .2s; }
body.ch-skin-a #chrome .ch-menu { background: none; }
/* collapsed: no frame at all — the desk fills the screen */
body.ch-skin-a.ch-closed #chrome { padding: 0; }
body.ch-skin-a.ch-closed #chrome::before { opacity: 0; }
body.ch-skin-a.ch-closed #win { border: 0; }
body.ch-skin-a #winshade { box-shadow: inset 0 0 18px rgba(60,50,36,.2); }

/* ══ SKIN B · THE GILT CARTOUCHE ═══════════════════════════════════════
   Demonocracy: walnut band, beaded gold fillet, parchment menu panel,
   beveled buttons. */

body.ch-skin-b .ch-frame { border-color: transparent;
  border-image: linear-gradient(120deg, #402a18, #2e1d0f) 1; }
body.ch-skin-b .ch-frame::before { inset: -9px; border: 1px solid rgba(216,185,106,.85); }
body.ch-skin-b .ch-frame::after { inset: -4px; border: 1px solid rgba(216,185,106,.45);
  background:
    linear-gradient(90deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px) 0 0 / 9px 1px repeat-x,
    linear-gradient(90deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px) 0 100% / 9px 1px repeat-x,
    linear-gradient(0deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px) 0 0 / 1px 9px repeat-y,
    linear-gradient(0deg, rgba(216,185,106,.5) 0 3px, transparent 3px 9px) 100% 0 / 1px 9px repeat-y; }
body.ch-skin-b .ch-menu {
  background:
    radial-gradient(120% 100% at 40% 10%, rgba(255,248,222,.5), rgba(0,0,0,0) 55%),
    linear-gradient(160deg, #ead9b7, #d9c497 60%, #cbb383);
  border-right: 1px solid rgba(138,109,34,.6);
  box-shadow: inset 0 0 16px rgba(64,42,24,.28); }
body.ch-skin-b .ch-btn { font-family: Georgia, 'Times New Roman', serif;
  font-size: 10.5px; letter-spacing: 2px; color: #4a3416;
  background: linear-gradient(180deg, #f2e4c4, #dcc79b 55%, #cdb684);
  border: 1px solid #a98f5a;
  box-shadow: inset 0 1px 0 rgba(255,248,222,.9), inset 0 -2px 3px rgba(90,62,30,.28),
              0 1px 3px rgba(64,42,24,.25); }
body.ch-skin-b .ch-btn:hover { filter: brightness(1.05); }
body.ch-skin-b .ch-btn:active { box-shadow: inset 0 2px 5px rgba(90,62,30,.4); }
body.ch-skin-b .ch-btn.on { border-color: #8a6d22; color: #2e1d0f;
  box-shadow: inset 0 0 0 1.5px rgba(216,185,106,.95), inset 0 1px 0 rgba(255,248,222,.9),
              inset 0 -2px 3px rgba(90,62,30,.28); }
body.ch-skin-b .ch-tog, body.ch-skin-b .ch-round, body.ch-skin-b .ch-coin {
  background: radial-gradient(circle at 36% 30%, #f6ecd2, #d9c497 62%, #b99a62);
  border: 2px solid #b08d2e; color: #4a3416;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); }
body.ch-skin-b .ch-tog:hover, body.ch-skin-b .ch-round:hover, body.ch-skin-b .ch-coin:hover { border-color: #d8b96a; }
body.ch-skin-b .ch-menu .ch-dock .minimap {
  border: 1px solid var(--mm-edge);
  box-shadow: 0 0 0 2.5px rgba(234,217,183,.85), 0 0 0 3.5px rgba(138,109,34,.75),
              0 2px 6px rgba(64,42,24,.4);
  border-radius: 0;
}
body.ch-skin-b .ch-menu .ch-dock .tile-tray { background: none; border: 0; }
/* desk mode in skin B (unused today; the desk is skin A) */
body.ch-skin-b #chrome { background: linear-gradient(120deg, #402a18, #2e1d0f); }
body.ch-skin-b #win { border: 1px solid rgba(216,185,106,.7); }
body.ch-skin-b #winshade { box-shadow: inset 0 0 22px rgba(20,10,4,.4); }

/* ══ WHO'S HERE ════════════════════════════════════════════════════════
   The identity line at the menu's foot, and the sign-in box. One dress for
   both skins: the cream card reads as paper on the print shop and as a
   calling card on the walnut. */

/* the menu's "doing" entry (+ New board): same dress as the places, but a
   button, and quieter — an aside, not a destination */
.ch-btn-act { width: 100%; opacity: .62; }
.ch-btn-act:hover { opacity: 1; }

/* "+ add view": at the menu's foot, above the minimap (or above the name) */
.ch-menu .ch-addview { margin-top: auto; flex: 0 0 auto; transition: opacity .18s; }
.ch-menu .ch-dock .ch-addview + .minimap { margin-top: 6px; }
.ch-menu .ch-addview + .ch-id { margin-top: 14px; }
body.ch-closed .ch-menu .ch-addview { opacity: 0; pointer-events: none; }
.ch-id { margin-top: 14px; text-align: center; transition: opacity .18s; }
/* a person's title, under their name */
.ch-id-title { font-family: Georgia, serif; font-style: italic; font-size: 11px; letter-spacing: .4px;
  opacity: .7; margin: 2px 0 3px; }
/* the owner inside another's account: the frame says so, on every page */
body.ch-acting .ch-id-name { background: #b3251c; color: #fff !important; padding: 3px 6px; display: inline-block; }
.ch-menu nav + .ch-id { margin-top: auto; }   /* no dock: sink to the foot */
.ch-id-name { font-family: Georgia, serif; font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; margin-bottom: 4px; }
body.ch-skin-a .ch-id-name { color: #b3251c; }
body.ch-skin-b .ch-id-name { color: #4a3416; }
.ch-id-act { display: inline-block; background: none; border: 0; cursor: pointer;
  font-family: Georgia, serif; font-size: 9px; letter-spacing: 1.8px;
  text-transform: uppercase; padding: 4px 6px; opacity: .65; }
.ch-id-act:hover { opacity: 1; }
body.ch-skin-a .ch-id-act { color: #2a2620; }
body.ch-skin-b .ch-id-act { color: #4a3416; }

.ch-login { position: fixed; inset: 0; z-index: 99500;
  background: rgba(42,38,32,.45); display: flex; align-items: center;
  justify-content: center; }
.ch-login-box { background: #faf7ef; border: 1px solid #2a2620;
  box-shadow: 0 0 0 4px #faf7ef, 0 0 0 5.5px #b3251c, 0 14px 40px rgba(20,14,8,.4);
  padding: 26px 28px 22px; width: min(300px, 84vw);
  display: flex; flex-direction: column; gap: 10px; }
.ch-login-t { font-family: Georgia, serif; font-size: 13px; letter-spacing: 2.6px;
  text-transform: uppercase; color: #2a2620; text-align: center; margin-bottom: 6px; }
.ch-in { display: block; width: 100%; box-sizing: border-box;
  font-family: Georgia, serif; font-size: 14px; color: #2a2620;
  background: #fffdf6; border: 1px solid #b9b1a0; padding: 9px 10px; outline: none; }
.ch-in:focus { border-color: #b3251c; }
.ch-login-err { min-height: 14px; font-family: Georgia, serif; font-style: italic;
  font-size: 11.5px; color: #b3251c; text-align: center; }
.ch-login-row { display: flex; gap: 8px; justify-content: space-between; }
.ch-login-row .ch-btn { flex: 1; font-family: Georgia, serif; font-size: 10px;
  letter-spacing: 2px; color: #2a2620; border: 1px solid #b9b1a0; background: #fffdf6; }
.ch-login-row .ch-btn:hover { color: #b3251c; border-color: #b3251c; }
.ch-login-box.shake { animation: ch-shake .4s; }
@keyframes ch-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}

/* ══ NARROW SCREENS ════════════════════════════════════════════════════
   Declared last so the shrink outranks every skin's own type size. The
   real mobile pass is its own future session; this only keeps the labels
   whole. */
@media (max-width: 640px) {
  :root { --ch-menu: 118px; }
  body.ch-skin-a .ch-btn, body.ch-skin-b .ch-btn, .ch-btn {
    padding: 9px 2px; font-size: 8px; letter-spacing: 1.1px; }
}

/* ── touch: the lifted piece, and no iOS link-callout on long-press ── */
.tcard, .obj { -webkit-touch-callout: none; }
.touch-lift { opacity: .82; }