/* BKK Guide — every value here comes from design/design-system.md. */

:root{
  /* Neutrals */
  --page:#EFEFEE;
  --surface:#FFFFFF;
  --ink:#262626;
  --body:#5A5A57;
  --meta:#8A8A87;
  --hair:#DEDEDB;
  --hair-strong:#C8C8C4;
  --disabled-fill:#E4E4E1;
  --disabled-text:#A9A9A5;
  --tint:#F4F4F2;
  --track:#E7E7E4;
  /* Accents */
  --teal:#0F6E62;
  --teal-pressed:#0B5449;
  --teal-tint:#DCEDE9;
  --date-spot:#F7A8C4;
  --fave:#A9D8F5;
  --clay:#A83E2C;
  --clay-border:#E3C7C1;
  --clay-tint:#FCF6F4;
  --mint:#8FCAB6;
  --clay-light:#E3A99C;
  /* Faces */
  /* Safe areas. Named so they can be overridden to test iPhone insets in a
     desktop browser, where env() is always 0. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* A class that sets display would otherwise beat the browser's [hidden] rule. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:var(--sans);font-size:14px;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit}
a{text-decoration:none;color:inherit}
input,textarea{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}

.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding-top:var(--sat);
  background:var(--page);
}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}

/* ---------- Bars and headers ---------- */

.stk{
  background:var(--surface);border-bottom:1px solid var(--hair);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  height:57px;flex:none;
}
.stkt{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.11em;color:var(--ink);text-transform:uppercase}
.stkc{font-size:11px;color:var(--meta);margin-top:3px}
.stk .grow{flex:1}
.stk .right{text-align:right;opacity:0;transition:opacity .15s ease}
.stk .right.on{opacity:1}
.parent{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--meta);text-transform:uppercase}
.back{width:32px;height:32px;color:var(--ink);background:var(--tint);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:17px}
.back:active{background:var(--hair)}

.pinned{background:var(--page);padding:14px 16px 12px;border-bottom:1px solid var(--hair);flex:none}

.bd{flex:1;min-height:0;padding:8px 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bdh{flex:1;min-height:0;padding:14px 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.noscroll{overflow:hidden}

/* ---------- Type ---------- */

.srf{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--ink);line-height:1.05}
.wordmark{font-family:var(--serif);font-size:42px;line-height:1.05;color:var(--teal);text-transform:uppercase}
.lockup{margin-bottom:20px}
.lockup-accent{display:flex;align-items:center;gap:7px;margin-top:6px}
.lockup-rule{width:137px;height:8px;border-radius:4px;background:var(--date-spot)}
.lockup-dot{width:12px;height:12px;border-radius:50%;background:var(--fave)}

.sl{display:flex;align-items:center;gap:8px;margin:0 0 11px}
.sbar{width:3px;height:14px;border-radius:2px;background:var(--teal);flex:none}
.stx{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--ink);text-transform:uppercase}

.mt{font-size:12.5px;color:var(--meta);margin-top:5px}
.count{font-size:12.5px;color:var(--meta);margin-top:5px;margin-bottom:18px}
.count.tight{margin-bottom:14px}
.count.warnline{margin-bottom:6px}
.warn{font-size:13px;color:var(--clay);margin-bottom:14px}

/* ---------- Card ---------- */

.cd{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:14px;margin-bottom:9px}
.cdx{border-color:var(--hair-strong)}
.cd-head{display:flex;align-items:flex-start;gap:12px;width:100%}
.cd-head .grow{flex:1;min-width:0}
.nm{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.blurb{font-size:13.5px;line-height:1.55;color:var(--body);margin:12px 0 13px}
.cv{width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--body);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.cd-head .cv{margin-top:2px}

.tagrow{display:flex;gap:7px;margin-top:4px;margin-bottom:-9px}
.tagrow.expanded{margin-top:-9px}
.taghit{padding:9px 0;display:flex}
.tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;border-radius:8px;padding:6px 11px;border:1px solid var(--disabled-fill);background:var(--tint);color:var(--disabled-text);display:inline-block}
.tagD{background:var(--date-spot);color:var(--ink);border-color:transparent}
.tagF{background:var(--fave);color:var(--ink);border-color:transparent}

/* ---------- Rows, tiles, chips ---------- */

.row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:13px 15px;margin-bottom:7px;width:100%}
.row:last-child{margin-bottom:0}
.rn{font-size:15px;font-weight:500;color:var(--ink)}
.rc{font-family:var(--mono);font-size:12px;color:var(--meta)}
.rd{font-size:13px;color:var(--meta)}
.row .tail{display:flex;align-items:center;gap:11px}
.row .lead{display:flex;align-items:center;gap:11px}
.gripc{color:var(--hair-strong);font-size:18px}
/* Reorder handle: a 44px target, and the row follows your finger. */
.grip{display:flex;align-items:center;justify-content:center;width:34px;height:44px;margin:-13px 0 -13px -9px;touch-action:none;flex:none}
.reorder{position:relative}
.reorder .row{will-change:transform}
.reorder .row.shifting{transition:transform .16s ease}
.reorder .row.dragging{position:relative;z-index:2;box-shadow:0 1px 2px rgba(38,38,38,.10);border-color:var(--hair-strong)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:13px;text-align:left}
.tn{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.tc{font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:5px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:9px 12px;color:var(--body);white-space:nowrap}

/* ---------- Buttons ---------- */

.btnP{background:var(--ink);color:#FFF;border-radius:11px;padding:14px;text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;display:block;width:100%}
.btnP:active{background:var(--teal)}
.btnS{background:var(--surface);border:1px solid var(--hair-strong);color:var(--ink);border-radius:11px;padding:13px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;display:block;width:100%}
.btnD{background:var(--surface);border:1px solid var(--clay-border);color:var(--clay);border-radius:11px;padding:13px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;display:block;width:100%}
.btnX{background:var(--disabled-fill);color:var(--disabled-text);border-radius:11px;padding:14px;text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;display:block;width:100%}
.btnDash{border:1px dashed var(--hair-strong);border-radius:11px;padding:14px;text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--ink);display:block;width:100%}
.btnrow{display:flex;gap:8px;margin-top:8px}
.btnrow > *{flex:1}
.btn-inline{display:inline-block;width:auto;padding:12px 22px}

.reset{text-align:center;margin-top:16px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--clay);display:block;width:100%}
.lastexport{text-align:center;font-size:12px;color:var(--meta);margin-top:14px}

/* ---------- Search ---------- */

.srch{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;font-size:14px;display:flex;align-items:center;gap:9px}
.srch i{color:var(--meta);font-size:16px;flex:none}
.srch input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px;color:var(--ink);padding:0}
.srch input::placeholder{color:var(--disabled-text)}
.srch .clear{color:var(--meta);flex:none;font-size:16px;display:flex}

/* ---------- Toggle ---------- */

.seg{display:flex;background:var(--track);border:1px solid var(--hair-strong);border-radius:99px;padding:4px}
.segh{flex:1;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;padding:10px 14px 8px;border-radius:99px;color:var(--meta)}
.sega{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(38,38,38,.10)}
.segn{opacity:.55;margin-left:7px}
.segu{width:36px;height:3px;border-radius:2px;margin:5px auto 0}
.segsp{height:8px}

/* ---------- Bottom nav ---------- */

.nv{display:flex;background:var(--surface);border-top:1px solid var(--hair);padding:8px 8px 10px;gap:5px;flex:none;
  height:calc(72px + var(--sab));padding-bottom:calc(10px + var(--sab))}
.nvi{flex:1;text-align:center;color:var(--meta);border-radius:14px;padding:6px 2px}
.nvi i{font-size:21px;display:block}
.nvl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;margin-top:4px;text-transform:uppercase}
.nva{background:var(--teal-tint);color:var(--teal-pressed)}
.nd{width:5px;height:5px;border-radius:50%;margin:0 auto 3px;background:transparent}
.ndo{background:var(--teal)}

/* ---------- Pinned footer ---------- */

.foot{background:var(--surface);border-top:1px solid var(--hair);padding:11px 16px;display:flex;gap:8px;flex:none}
.foot > *{flex:1}

/* ---------- Empty states ---------- */

.empt{background:var(--surface);border:1px dashed var(--hair-strong);border-radius:14px;padding:26px 18px;text-align:center}
.empth{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.emptb{font-size:13px;color:var(--meta);line-height:1.55;margin-bottom:16px}

/* ---------- Carousel ---------- */

.carousel{overflow:hidden;touch-action:pan-y}
.carousel-track{display:flex;transition:transform .28s ease}
.carousel-slide{flex:0 0 100%;min-width:0}
.carousel .cd{margin-bottom:0;width:100%;display:block}
.dots{display:flex;gap:5px;justify-content:center;margin:11px 0 20px}
.dot{width:5px;height:5px;border-radius:3px;background:var(--hair)}
.dot.on{width:18px;background:var(--teal)}

/* ---------- Sheets ---------- */

#overlays{position:fixed;inset:0;pointer-events:none;z-index:40}
#overlays > *{pointer-events:auto}
.scrim{position:fixed;inset:0;background:rgba(38,38,38,.42)}
.scrimLight{position:fixed;inset:0;background:rgba(38,38,38,.28)}
.dim{position:absolute;inset:0;background:rgba(239,239,238,.72);border-radius:20px 20px 0 0}
.sheet{
  position:fixed;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:20px 20px 0 0;padding:18px 16px 22px;
  padding-bottom:calc(22px + var(--sab));
  max-height:calc(100% - var(--sat));
  display:flex;flex-direction:column;
  animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--hair);margin:0 auto 16px;flex:none}
.sh{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.3}
.shs{font-size:13px;color:var(--meta);line-height:1.5;margin-bottom:16px}
.sheet-gap{height:8px}
.shead{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:16px;flex:none}
.smono{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--meta)}
.smono.save{color:var(--teal)}
.smono.discard{color:var(--clay)}
.stitle{font-size:16px;font-weight:600;color:var(--ink)}
.sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
/* The add and edit sheet covers the nav and shortens to sit on the keyboard. */
.sheet-form{
  top:auto;bottom:var(--kb,0px);
  height:calc(100% - var(--sat) - 73px - var(--kb,0px));
  max-height:calc(100% - var(--sat));
  padding-bottom:calc(22px + var(--sab));
}
.opt{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;border-bottom:1px solid var(--page);font-size:15px;color:var(--ink);width:100%}
.opt:last-child{border-bottom:0}
.optA{color:var(--teal);font-weight:600}
.opt i{color:var(--hair);font-size:19px}
.optA i{color:var(--teal)}
.opt.exit{color:var(--meta)}
.warncard{background:var(--clay-tint);border:1px solid var(--clay-border);border-radius:14px;padding:14px;margin-bottom:16px}
.warncard div{font-size:13.5px;color:var(--clay);line-height:1.5}

/* ---------- Form ---------- */

.flb{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--meta);text-transform:uppercase;margin:0 0 6px 2px}
.flb .req{color:var(--clay)}
.fld{background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:13px 14px;font-size:14px;color:var(--ink);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px}
.fld i{color:var(--meta);font-size:18px;flex:none}
.fld input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0}
.fld input::placeholder{color:var(--disabled-text)}
.fld .ph{color:var(--disabled-text)}
.fldE{border-color:var(--clay)}
.note{background:var(--surface);border:1px solid var(--hair);border-radius:11px;padding:13px 14px;font-size:14px;line-height:1.5;min-height:112px;margin-bottom:14px;display:block;width:100%;border-color:var(--hair);resize:none;outline:0;font-family:var(--sans);color:var(--ink);overflow:hidden}
.note::placeholder{color:var(--disabled-text)}
.err{font-size:12px;color:var(--clay);margin:-10px 0 14px 2px}
.tagBigRow{display:flex;gap:9px;width:72%;margin-bottom:16px}
.tagBig{flex:1;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;border-radius:10px;padding:13px 10px;border:1px solid var(--disabled-fill);background:var(--tint);color:var(--disabled-text)}
.tagBig.onD{background:var(--date-spot);color:var(--ink);border-color:transparent}
.tagBig.onF{background:var(--fave);color:var(--ink);border-color:transparent}

/* ---------- Toasts ---------- */

#toasts{position:fixed;left:0;right:0;bottom:calc(72px + var(--sab));z-index:60;pointer-events:none}
.toast{
  position:relative;margin:0 16px 16px;background:var(--ink);color:#FFF;border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;pointer-events:auto;
  animation:toastUp .2s ease;
}
@keyframes toastUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.toast i{flex:none;font-size:18px}
.toastTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tundo{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;flex:none}
.toast .mint{color:var(--mint)}
.toast .claylight{color:var(--clay-light)}

.hidden{display:none !important}

/* Scroll track. The same treatment the area picker is drawn with. */
.scrollwrap{position:relative;flex:1;min-height:0;display:flex}
.scrollwrap > .scroller{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Picker: the list makes room for the track, as drawn. Form: the track sits in
   the sheet's gutter so the fields keep their full width. */
.scrollwrap.inset > .scroller{padding-right:14px}
.strack{position:absolute;top:4px;right:-10px;bottom:4px;width:4px;border-radius:2px;background:var(--track);pointer-events:none}
.scrollwrap.inset .strack{right:2px}
.strack-thumb{width:4px;border-radius:2px;background:var(--hair-strong)}