/* saka.css — the Saka Control Center: a drop-in, customizable tile board.
   Usage: add <div class="saka-board" id="..."></div> + an Edit button, then
   Saka.mount({ board, editButton, tiles, ... }). Theme it by overriding the
   --saka-* vars on the .saka-board element (see the defaults below). */
.saka-board {
  --saka-surface: #ffffff; --saka-surface-2: #f4f4f5; --saka-text: #18181b;
  --saka-muted: #6b7280; --saka-faint: #a1a1aa;
  --saka-accent: #4f46e5; --saka-accent-weak: #eef2ff; --saka-on-accent: #ffffff;
  --saka-border: #e5e7eb; --saka-border-2: #d4d4d8;
  --saka-green: #15803d; --saka-green-weak: #e7f6ec; --saka-red: #dc2626; --saka-amber: #b45309;
  --saka-radius: 14px; --saka-row-h: 78px; --saka-font: inherit;
  display: block;
}
.saka-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--saka-row-h); grid-auto-flow: row dense; gap: 9px; }
.saka-w { position: relative; background: var(--saka-surface); border: 1px solid var(--saka-border); border-radius: var(--saka-radius); padding: 11px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, transform .06s; font-family: var(--saka-font); }
.saka-w:hover { border-color: var(--saka-border-2); } .saka-w:active { transform: scale(.985); }
.saka-w.q { grid-column: span 1; grid-row: span 1; padding: 9px; }
.saka-w.h { grid-column: span 2; grid-row: span 1; }
.saka-w.v { grid-column: span 2; grid-row: span 2; }
.saka-w.f { grid-column: span 4; grid-row: span 1; }
.saka-w.ft { grid-column: span 4; grid-row: span 2; }
.saka-wt { font-weight: 600; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--saka-accent); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.saka-lk { margin-left: auto; font-size: .58rem; color: var(--saka-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.saka-w.q .saka-wt { font-size: .56rem; margin-bottom: 3px; }
/* The suffix must be able to drop to its own line. A headline of $190 and a
   suffix of "of $600" fits side by side; $3,290 and "of $4,000" does not, and
   without wrapping the second one is simply cut off — a bug that only appears
   once a shop starts earning four figures, which is the worst possible time. */
.saka-headrow { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.saka-big { font-weight: 700; font-size: 1.7rem; color: var(--saka-text); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.saka-big.g { color: var(--saka-green); } .saka-big.gold { color: var(--saka-accent); } .saka-big.red { color: var(--saka-red); } .saka-big.amb { color: var(--saka-amber); }
.saka-hsuf { font-size: .72rem; color: var(--saka-muted); font-weight: 500; min-width: 0; }
.saka-sub { font-size: .7rem; color: var(--saka-muted); font-weight: 500; margin-top: 3px; }
.saka-w.q .saka-sub { font-size: .62rem; margin-top: 2px; }
.saka-foot { margin-top: auto; padding-top: 5px; font-size: .66rem; color: var(--saka-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saka-arrow { position: absolute; top: 10px; right: 11px; color: var(--saka-faint); font-size: .85rem; font-weight: 700; z-index: 2; }
.saka-srow { display: flex; align-items: center; gap: 8px; padding: 3.5px 0; font-size: .76rem; }
.saka-srow + .saka-srow { border-top: 1px solid var(--saka-border); }
.saka-rtap { cursor: pointer; margin: 0 -5px; padding-left: 5px; padding-right: 5px; border-radius: 8px; }
.saka-rtap:active { background: var(--saka-surface-2); }
.saka-rgo { color: var(--saka-faint); font-weight: 700; font-size: .8rem; flex: none; }
.saka-mini { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0; font-size: .6rem; }
.saka-mx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--saka-muted); font-weight: 500; }
.saka-mv { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--saka-text); white-space: nowrap; }
.saka-mv.g { color: var(--saka-green); } .saka-mv.gold { color: var(--saka-accent); } .saka-mv.red { color: var(--saka-red); } .saka-mv.amb { color: var(--saka-amber); }
.saka-bars { margin-top: 4px; display: flex; flex-direction: column; gap: 5px; }
.saka-brow { display: flex; align-items: center; gap: 7px; font-size: .66rem; }
.saka-bx { flex: none; width: 36px; color: var(--saka-muted); font-weight: 600; overflow: hidden; white-space: nowrap; }
.saka-btrack { flex: 1; height: 5px; border-radius: 3px; background: var(--saka-surface-2); overflow: hidden; }
.saka-bfill { display: block; height: 100%; border-radius: 3px; background: var(--saka-accent); }
.saka-bv { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--saka-text); font-size: .62rem; }
.saka-sx { flex: 1; min-width: 0; color: var(--saka-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saka-sv { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--saka-muted); white-space: nowrap; }
.saka-sv.g { color: var(--saka-green); } .saka-sv.gold { color: var(--saka-accent); } .saka-sv.red { color: var(--saka-red); } .saka-sv.amb { color: var(--saka-amber); }
.saka-w.act { background: var(--saka-accent-weak); border-color: transparent; }
.saka-qa { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 2px; }
.saka-qa .saka-ic { font-size: 1.2rem; } .saka-qa b { font-weight: 600; font-size: .78rem; color: var(--saka-text); line-height: 1.1; } .saka-qa span { font-size: .62rem; color: var(--saka-muted); }
.saka-ha { display: flex; align-items: center; height: 100%; gap: 12px; }
.saka-ha .saka-ic { font-size: 1.5rem; } .saka-ha b { font-weight: 600; font-size: .9rem; color: var(--saka-text); display: block; } .saka-ha span { font-size: .68rem; color: var(--saka-muted); }
.saka-board.editing .saka-w { animation: saka-jig .9s infinite ease-in-out; }
.saka-board.editing .saka-w:nth-child(2n) { animation-delay: .12s; }
@keyframes saka-jig { 0%,100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg); } }
.saka-rm, .saka-rsz { display: none; position: absolute; z-index: 6; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--saka-surface); font-size: 13px; font-weight: 800; line-height: 1; align-items: center; justify-content: center; cursor: pointer; }
.saka-rm { top: -6px; left: -6px; background: var(--saka-red); color: #fff; }
.saka-rsz { bottom: -6px; right: -6px; background: var(--saka-accent); color: var(--saka-on-accent); font-size: 12px; }
.saka-board.editing .saka-rm { display: flex; } .saka-board.editing .saka-w.resizable .saka-rsz { display: flex; } .saka-board.editing .saka-arrow { display: none; }
.saka-addtile { min-height: 54px; border: 1.5px dashed var(--saka-border-2); background: var(--saka-surface-2); border-radius: var(--saka-radius); display: none; align-items: center; justify-content: center; gap: 8px; color: var(--saka-accent); font-weight: 600; font-size: .85rem; cursor: pointer; margin-top: 10px; }
.saka-board.editing .saka-addtile { display: flex; }
.saka-w.dragging { opacity: .4; } .saka-w.dropbefore { box-shadow: 0 0 0 2px var(--saka-accent); }
.saka-hint { font-size: .78rem; color: var(--saka-muted); text-align: center; margin-top: 14px; line-height: 1.5; }
.saka-board.editing .saka-hint { display: none; }
.saka-sheet { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.4); }
.saka-sheet.show { display: flex; }
.saka-card { position: relative; width: 100%; max-width: 560px; max-height: 82%; overflow: auto; background: var(--saka-surface); border: 1px solid var(--saka-border); border-radius: 20px 20px 0 0; padding: 18px 16px 28px; }
.saka-card h3 { font-weight: 600; font-size: 1.1rem; color: var(--saka-text); margin-bottom: 2px; }
.saka-hh { font-size: .8rem; color: var(--saka-muted); margin-bottom: 12px; }
.saka-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; background: var(--saka-surface-2); color: var(--saka-muted); border-radius: 9px; font-size: 18px; cursor: pointer; }
.saka-gcat { font-weight: 600; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--saka-accent); margin: 14px 0 7px; }
.saka-gitem { display: flex; align-items: center; gap: 11px; background: var(--saka-surface-2); border: 1px solid var(--saka-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.saka-gitem:hover { border-color: var(--saka-border-2); }
.saka-gi { width: 34px; height: 34px; border-radius: 10px; background: var(--saka-accent-weak); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.saka-gm { flex: 1; min-width: 0; } .saka-gm b { font-size: .9rem; font-weight: 600; color: var(--saka-text); display: block; } .saka-gm span { font-size: .72rem; color: var(--saka-muted); }
.saka-gsz { font-size: .62rem; font-weight: 600; color: var(--saka-accent); background: var(--saka-accent-weak); border-radius: 6px; padding: 3px 7px; flex: none; }
.saka-gitem.added { opacity: .55; } .saka-gitem.added .saka-gsz { color: var(--saka-green); background: var(--saka-green-weak); }
.saka-reset { display: block; width: 100%; margin-top: 14px; padding: 11px; border: 1px solid var(--saka-border); background: var(--saka-surface-2); color: var(--saka-muted); border-radius: 12px; font-weight: 600; font-size: .85rem; cursor: pointer; }
.saka-reset:active { transform: scale(.98); }
.saka-w.saka-flip { z-index: 5; }
/* The edit-mode jiggle is a keyframe animation on `transform`, and animations
   outrank author declarations — including inline style — in the cascade. So
   flipTile()'s inline translate+scale was being silently overridden on every
   resize, and since the resize button only exists in edit mode, the spring-grow
   had never once rendered. The tile stops wobbling for the 340ms it is growing,
   which is right: it is being handled. */
.saka-board.editing .saka-w.saka-flip { animation: none !important; }
.saka-w.saka-flip .saka-srow, .saka-w.saka-flip .saka-bars, .saka-w.saka-flip .saka-foot { animation: sakaRowIn .32s .12s both; }
@keyframes sakaRowIn { from { opacity: 0; transform: translateY(5px); } }
.saka-big.saka-pop { animation: sakaNumIn .38s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sakaNumIn { from { transform: translateY(46%); opacity: 0; } }
.saka-w.saka-gain::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--saka-green); opacity: 0; animation: sakaGain 1s ease-out; pointer-events: none; }
@keyframes sakaGain { from { opacity: .13; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saka-board *, .saka-board *::before, .saka-board *::after { animation: none !important; transition: none !important; } }