/* ── Self-hosted fonts (latin + latin-ext subsets from Google Fonts, unicode-range-gated). Removes the last non-essential third-party request — see docs/design.md. */
/* Alegreya Sans 400 italic — latin-ext */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alegreya-sans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alegreya Sans 400 italic — latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alegreya-sans-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alegreya Sans 400 normal — latin-ext */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alegreya Sans 400 normal — latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alegreya Sans 500 normal — latin-ext */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/alegreya-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alegreya Sans 500 normal — latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alegreya Sans 700 normal — latin-ext */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Alegreya Sans 700 normal — latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 400 italic — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400 italic — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 400 normal — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400 normal — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 500 normal — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 500 normal — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EB Garamond 600 normal — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/eb-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 600 normal — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/eb-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 400 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 normal — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 normal — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 normal — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* IM Fell English 400 normal — latin */
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/im-fell-english-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font-ui);
  transition:background .25s,color .25s;
  font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Design tokens — Brambletally.
   Palette: Bramble (default) / Hearth / Fen, each light + dark.
   Selector: :root[data-theme="<palette>-<mode>"]; bare :root = bramble-light.
   Type: EB Garamond headings / Alegreya Sans body / IBM Plex Mono / IM Fell
   English (display). Contrast-checked against WCAG 2.1 AA. Full spec:
   docs/design.md ────────────────────────────────────────────────────────── */
:root{
  --font-ui:'Alegreya Sans',system-ui,-apple-system,sans-serif;
  --font-head:'EB Garamond',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --font-display:'IM Fell English','EB Garamond',Georgia,serif;

  /* type scale — 12px floor; see docs/design.md → Type sizes */
  --fs-label:12px;
  --fs-xs:13px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-body:16px;
  --fs-md:18px;
  --fs-lg:20px;
  --fs-xl:23px;
  --fs-2xl:27px;

  /* Bramble — light (also the fallback palette when no data-theme is set) */
  --bg:#f3ecdc;
  --card:#fbf6ea;
  --elevated:#eadfc8;
  --input:#f8f2e3;
  --border:#e0d4b8;
  --border-strong:#a89670;
  --text:#2a2230;
  --text-sub:#4a3f4e;
  --text-muted:#6f6374;
  --text-disabled:#b3a9b0;
  --accent:#6b3457;      /* elderberry — primary */
  --accent-2:#4b6b3a;    /* bramble leaf — secondary */
  --on-accent:#ffffff;   /* label colour on filled accent buttons */
  --gold:#9a7526;
  --danger:#a3402f;
  --warn-bg:#f5e8cf;
  --warn-border:#dcc08a;
  --warn-text:#785412;
  --header-bg:#efe6cf;
  --shadow:0 1px 3px rgba(42,34,48,.10),0 1px 2px rgba(42,34,48,.06);
}
:root[data-theme="bramble-dark"]{
  --bg:#1e1a22;
  --card:#292330;
  --elevated:#342c3c;
  --input:#2c2633;
  --border:#3d3545;
  --border-strong:#625770;
  --text:#ece3d6;
  --text-sub:#c7bcae;
  --text-muted:#948a83;
  --text-disabled:#5c5566;
  --accent:#c17ba3;
  --accent-2:#8fb073;
  --on-accent:#241a20;
  --gold:#d8b768;
  --danger:#e08a76;
  --warn-bg:#2c2417;
  --warn-border:#5c4a22;
  --warn-text:#dcbd6a;
  --header-bg:#1e1a22;
  --shadow:0 1px 3px rgba(0,0,0,.38);
}
:root[data-theme="hearth-light"]{
  --bg:#f6eede;
  --card:#fdf8ec;
  --elevated:#f0e2c9;
  --input:#faf3e4;
  --border:#e6d7bb;
  --border-strong:#b7a074;
  --text:#33261c;
  --text-sub:#544335;
  --text-muted:#7a6857;
  --text-disabled:#b9ab98;
  --accent:#a8482b;
  --accent-2:#8a6a1f;
  --on-accent:#ffffff;
  --gold:#a9781f;
  --danger:#8f2f28;
  --warn-bg:#f7ead0;
  --warn-border:#e0be82;
  --warn-text:#7c5312;
  --header-bg:#f2e7d1;
  --shadow:0 1px 3px rgba(51,38,28,.10),0 1px 2px rgba(51,38,28,.06);
}
:root[data-theme="hearth-dark"]{
  --bg:#211a15;
  --card:#2c2319;
  --elevated:#382d20;
  --input:#2f261b;
  --border:#423525;
  --border-strong:#6b5a40;
  --text:#efe4d2;
  --text-sub:#cdbfa8;
  --text-muted:#a1917a;
  --text-disabled:#5c5142;
  --accent:#d97a55;
  --accent-2:#d0a94e;
  --on-accent:#241a12;
  --gold:#dcb35f;
  --danger:#e2896f;
  --warn-bg:#2f2614;
  --warn-border:#5f4c22;
  --warn-text:#ddba64;
  --header-bg:#211a15;
  --shadow:0 1px 3px rgba(0,0,0,.40);
}
:root[data-theme="fen-light"]{
  --bg:#e9ece4;
  --card:#f4f6ef;
  --elevated:#dde2d5;
  --input:#eef1e9;
  --border:#d0d6c6;
  --border-strong:#97a186;
  --text:#20302b;
  --text-sub:#3b4a44;
  --text-muted:#5f6d66;
  --text-disabled:#a6b0a8;
  --accent:#2f6b6b;
  --accent-2:#54763a;
  --on-accent:#ffffff;
  --gold:#8f7d33;
  --danger:#a44634;
  --warn-bg:#eee9d4;
  --warn-border:#c9c089;
  --warn-text:#6d5f2a;
  --header-bg:#e2e6da;
  --shadow:0 1px 3px rgba(32,48,43,.10),0 1px 2px rgba(32,48,43,.06);
}
:root[data-theme="fen-dark"]{
  --bg:#161c1a;
  --card:#1f2724;
  --elevated:#29332f;
  --input:#222b28;
  --border:#333f3a;
  --border-strong:#57655e;
  --text:#e4e9df;
  --text-sub:#bdc5ba;
  --text-muted:#87918a;
  --text-disabled:#535b56;
  --accent:#5cb0ab;
  --accent-2:#8bab63;
  --on-accent:#131c17;
  --gold:#c3b06a;
  --danger:#df8672;
  --warn-bg:#262a17;
  --warn-border:#4c5327;
  --warn-text:#c9bd6a;
  --header-bg:#161c1a;
  --shadow:0 1px 3px rgba(0,0,0,.38);
}
body{background:var(--bg);color:var(--text)}

/* ── Layout ───────────────────────────────────────────────────────────────── */
#bt-app{max-width:560px;margin:0 auto;min-height:100vh;position:relative}

/* ── Header ───────────────────────────────────────────────────────────────── */
.header{
  padding:16px 16px 0;
  position:sticky;top:0;
  background:var(--header-bg);
  z-index:10;
  border-bottom:1px solid var(--border);
  transition:background .2s;
}
.header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.wordmark{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text)}
.wordmark span{color:var(--accent-2)}
.tagline{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.header-actions{display:flex;gap:8px;align-items:center}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-icon{
  width:40px;height:40px;border-radius:8px;border:none;
  background:var(--elevated);color:var(--text-muted);
  font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.btn-primary{
  padding:13px;border-radius:10px;border:none;width:100%;
  background:var(--accent);color:var(--on-accent);
  font-size:16px;font-weight:700;font-family:var(--font-ui);
  cursor:pointer;transition:opacity .15s;
}
.btn-primary:disabled{background:var(--elevated);color:var(--text-disabled);cursor:not-allowed}
.btn-sm{padding:10px 16px;border-radius:7px;border:none;font-size:16px;font-weight:600;font-family:var(--font-ui);cursor:pointer}
.btn-sm-sage{background:var(--accent);color:var(--on-accent)}
.btn-sm-ghost{background:var(--elevated);color:var(--text-sub)}
.btn-sm-amethyst{background:var(--accent-2);color:var(--on-accent)}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:5px 10px;border-radius:8px;border:1px solid transparent;
  font-size:14px;font-weight:600;font-family:var(--font-ui);
  cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  background:transparent;color:var(--text-disabled);
  transition:all .15s;flex-shrink:0;
}
.tab.active{border-color:var(--tab-color,var(--accent))4d;background:var(--tab-color,var(--accent))18;color:var(--tab-color,var(--accent))}
.tab-count{border-radius:99px;font-size:12px;padding:1px 6px;font-weight:700;background:var(--elevated);color:var(--text-disabled)}
.tab.active .tab-count{background:var(--tab-color,var(--accent))2a;color:var(--tab-color,var(--accent))}

/* ── Project list ─────────────────────────────────────────────────────────── */
.project-list{padding:14px 16px 80px}

/* ── New-project bar ──────────────────────────────────────────────────────── */
.newbar{display:flex;justify-content:flex-end;margin-bottom:14px}

/* ── Project card ─────────────────────────────────────────────────────────── */
.card{
  background:var(--card);border-radius:14px;
  padding:14px;margin-bottom:10px;
  border:1px solid var(--border);
  cursor:pointer;transition:border-color .15s,background .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  position:relative;
}
.card-top{display:flex;gap:12px;margin-bottom:10px}
.cover-swatch{width:50px;height:50px;border-radius:10px;flex-shrink:0}
.card-meta{flex:1;min-width:0}
.card-title{font-size:17px;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:5px}
.card-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.status-pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.04em}
.card-deadline{font-size:13px;color:var(--text-muted)}
.card-menu-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:18px;cursor:pointer;user-select:none;flex-shrink:0;border:none;background:transparent}
.pickup-note{
  background:var(--elevated);border-radius:8px;
  padding:8px 10px;font-size:14px;color:var(--text-sub);
  margin-bottom:8px;line-height:1.45;
  border-left:3px solid var(--accent-2);
}
.card-footer{display:flex;justify-content:space-between;align-items:center}
.step-indicator{font-size:14px;flex:1;min-width:0;padding-right:8px}
.step-count{font-size:13px;color:var(--text-disabled);flex-shrink:0}

/* ── Status menu ──────────────────────────────────────────────────────────── */
.menu-wrap{position:relative}
.status-menu{
  position:absolute;right:0;top:32px;
  background:var(--elevated);border-radius:12px;
  border:1px solid var(--border-strong);
  z-index:100;min-width:150px;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  display:none;
}
.status-menu.open{display:block}
.status-menu-item{
  padding:10px 14px;font-size:14px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--font-ui);
}
.status-menu-item.danger{color:#ef4444}
.status-menu-divider{height:1px;background:var(--border);margin:4px 0}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:16px;font-style:italic}
.btn-empty{
  margin-top:14px;padding:9px 18px;border-radius:10px;border:none;
  background:transparent;border:1px solid color-mix(in srgb, var(--accent) 27%, transparent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);color:var(--accent);
  font-size:14px;font-weight:600;font-family:var(--font-ui);cursor:pointer;
  display:inline-block;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:200;display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  width:100%;background:var(--card);
  border-radius:20px 20px 0 0;
  padding:20px 20px 44px;
  max-height:90vh;overflow-y:auto;
  border:1px solid var(--border);
  transform:translateY(20px);transition:transform .2s;
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-handle{width:36px;height:4px;border-radius:99px;background:var(--border-strong);margin:0 auto 20px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{font-size:18px;font-weight:700;color:var(--text)}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;line-height:1}
.warn-box{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:14px;color:var(--warn-text);line-height:1.5}

/* ── Form fields ──────────────────────────────────────────────────────────── */
label.field-label{display:block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
input,textarea,select{
  width:100%;background:var(--input);border:1px solid var(--border-strong);
  border-radius:8px;padding:10px 12px;color:var(--text);
  font-size:16px;font-family:var(--font-ui);
  margin-bottom:14px;outline:none;
  -webkit-appearance:none;
}
textarea{resize:vertical;min-height:60px}
.field-row{display:flex;gap:12px}
.field-row>div{flex:1}
.swatch-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.color-swatch{width:30px;height:30px;border-radius:7px;cursor:pointer;border:3px solid transparent;transition:border-color .12s;box-sizing:border-box}
.color-swatch.selected{border-color:var(--accent-2)}

/* ── Detail view ──────────────────────────────────────────────────────────── */
#detail{display:none;position:fixed;inset:0;overflow-y:auto;z-index:50;background:var(--bg)}
#detail.open{display:block}
.detail-cover{height:150px;position:relative}
.detail-back{
  position:absolute;top:16px;left:16px;
  background:rgba(0,0,0,.3);border:none;border-radius:8px;
  color:#f1f5f9;padding:6px 12px;font-size:14px;font-weight:600;
  font-family:var(--font-ui);cursor:pointer;
}
.detail-body{padding:16px 16px 120px}
.detail-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 6px;line-height:1.2}
.detail-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-size:14px;color:var(--text-muted)}
.progress-bar-wrap{height:4px;background:var(--elevated);border-radius:99px;overflow:hidden;margin-bottom:18px}
.progress-bar-fill{height:100%;border-radius:99px;transition:width .4s ease;background:var(--accent)}
.pickup-box{
  background:var(--card);border-radius:12px;padding:12px 14px;
  margin-bottom:20px;border:1px solid color-mix(in srgb, var(--accent-2) 20%, transparent);
  border-left:4px solid var(--accent-2);
}
.pickup-label{font-size:12px;font-weight:700;color:var(--accent-2);text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.pickup-text{font-size:16px;color:var(--text);line-height:1.55;cursor:pointer}
.pickup-text.empty{color:var(--text-disabled);font-style:italic}
.pickup-edit-actions{display:flex;gap:8px;margin-top:8px}

/* ── Section header ───────────────────────────────────────────────────────── */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;padding-top:4px}
.section-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em}
.section-count{color:var(--text-disabled)}
.btn-section-add{
  width:26px;height:26px;border-radius:6px;border:none;
  background:color-mix(in srgb, var(--accent) 13%, transparent);color:var(--accent);
  font-size:18px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ── Step / Supply rows ───────────────────────────────────────────────────── */
.check-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;
  position:relative;touch-action:none;
}
.drag-handle{
  display:flex;align-items:center;padding:2px 2px 2px 0;
  color:var(--text-muted);font-size:16px;cursor:grab;flex-shrink:0;
  touch-action:none;user-select:none;
}
.edit-mode-hidden{display:none}
.btn-edit-mode{
  padding:3px 10px;border-radius:6px;border:1px solid var(--border-strong);
  font-size:13px;font-weight:700;font-family:var(--font-ui);
  background:var(--elevated);color:var(--text-muted);cursor:pointer;
  transition:all .15s;
}
.btn-edit-mode.active{background:var(--accent-2);color:var(--on-accent);border-color:var(--accent-2)}
.check-row.dragging{opacity:.4}
.check-row.drag-over{border-top:2px solid var(--accent-2)}
.check-row:last-child{border-bottom:none}
.checkbox{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.checkbox.unchecked{border:2px solid var(--border-strong);background:transparent}
.checkbox.checked-sage{background:var(--accent);border:none}
.checkbox.checked-amethyst{background:var(--accent-2);border:none}
.check-icon{font-size:16px;color:var(--on-accent);font-weight:700;line-height:1}
.check-content{flex:1}
.check-title{font-size:16px;line-height:1.4;color:var(--text)}
.check-title.done{text-decoration:line-through;color:var(--text-disabled)}
.check-sub{font-size:14px;color:var(--text-muted);margin-top:2px}
.check-cost{font-size:14px;color:var(--text-muted);flex-shrink:0;align-self:center}
.shortfall{color:#f59e0b;margin-left:6px}
.empty-section{font-size:14px;color:var(--text-muted);padding:8px 0 12px;font-style:italic}

/* ── Profile panel ────────────────────────────────────────────────────────── */
.profile-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:300;opacity:0;pointer-events:none;transition:opacity .2s;
}
.profile-overlay.open{opacity:1;pointer-events:all}
.profile-panel{
  position:absolute;top:0;right:0;bottom:0;width:82%;max-width:320px;
  background:var(--card);
  transform:translateX(100%);transition:transform .25s ease;
  overflow-y:auto;
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
}
.profile-overlay.open .profile-panel{transform:translateX(0)}
.profile-panel-head{
  padding:52px 20px 16px;
  border-bottom:1px solid var(--border);
}
.profile-section{padding:0}
.profile-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;cursor:pointer;
  font-size:16px;font-weight:500;color:var(--text);
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.profile-row:last-child{border-bottom:none}
.profile-row:active{background:var(--elevated)}
.profile-row-left{display:flex;align-items:center;gap:12px}
.profile-row-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.profile-row-arrow{color:var(--text-muted);font-size:16px}
.profile-toggle{
  width:44px;height:26px;border-radius:99px;border:none;cursor:pointer;
  background:var(--elevated);position:relative;transition:background .2s;flex-shrink:0;
}
.profile-toggle.on{background:var(--accent)}
.profile-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.profile-toggle.on::after{transform:translateX(18px)}
.detail-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0}
.detail-tab{
  padding:8px 18px;border:none;background:transparent;
  font-size:16px;font-weight:600;font-family:var(--font-ui);
  color:var(--text-disabled);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;
}
.detail-tab.active{color:var(--accent-2);border-bottom-color:var(--accent-2)}

/* ── Export button ────────────────────────────────────────────────────────── */
.detail-export{
  position:absolute;top:16px;right:16px;
  background:rgba(0,0,0,.3);border:none;border-radius:8px;
  color:#f1f5f9;padding:6px 12px;font-size:14px;font-weight:600;
  font-family:var(--font-ui);cursor:pointer;
  display:flex;align-items:center;gap:6px;
}

/* ── Export preview modal ─────────────────────────────────────────────────── */
.export-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:600;display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.export-overlay.open{opacity:1;pointer-events:all}
.export-modal{
  width:100%;background:var(--card);
  border-radius:20px 20px 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  border:1px solid var(--border);
  transform:translateY(20px);transition:transform .2s;
}
.export-overlay.open .export-modal{transform:translateY(0)}
.export-modal-head{
  padding:16px 20px 0;flex-shrink:0;
}
.export-modal-title{font-size:17px;font-weight:800;color:var(--text)}
.export-modal-sub{font-size:14px;color:var(--text-muted);margin-top:2px;margin-bottom:12px}
.export-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0}
.export-tab{
  padding:10px 16px;border:none;background:transparent;
  font-size:14px;font-weight:600;font-family:var(--font-ui);
  color:var(--text-disabled);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;white-space:nowrap;
}
.export-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.export-preview{flex:1;overflow-y:auto;padding:0}
.export-table{width:100%;border-collapse:collapse;font-size:14px}
.export-table th{
  background:var(--elevated);color:var(--text-muted);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
.export-table td{
  padding:9px 12px;border-bottom:1px solid var(--border);
  color:var(--text);vertical-align:top;line-height:1.4;
}
.export-table tr:last-child td{border-bottom:none}
.export-strike{text-decoration:line-through;color:var(--text-disabled)}
.export-header-block{
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:var(--elevated);
}
.export-header-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px}
.export-header-meta{font-size:14px;color:var(--text-muted);line-height:1.6}
.export-footer{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;gap:10px;flex-shrink:0;
}
.export-note{font-size:13px;color:var(--text-muted);padding:10px 16px;font-style:italic}
.export-totals td{font-weight:700;background:var(--elevated);color:var(--text)}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.timeline-empty{font-size:16px;color:var(--text-muted);padding:20px 0;font-style:italic}
.timeline-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px}
.timeline-content{flex:1}
.timeline-title{font-size:16px;color:var(--text);font-weight:600}
.timeline-sub{font-size:14px;color:var(--text-muted);margin-top:2px}
.step-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.step-modal-overlay.open{opacity:1;pointer-events:all}
.step-modal{
  width:100%;max-width:360px;background:var(--card);
  border-radius:16px;padding:22px 20px 20px;
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  transform:scale(.96);transition:transform .18s;
}
.step-modal-overlay.open .step-modal{transform:scale(1)}
.supply-add-row{display:flex;gap:8px}
.supply-add-row input{flex:1}

/* ── Upgrade box ──────────────────────────────────────────────────────────── */
.btn-upgrade{
  background:var(--accent);border:none;border-radius:10px;
  padding:9px 20px;font-size:14px;font-weight:700;
  color:var(--on-accent);cursor:pointer;font-family:var(--font-ui);
}

/* ── Step notes (tap to expand) ───────────────────────────────────────────── */
.step-notes-toggle{font-size:13px;color:var(--accent-2);cursor:pointer;margin-top:3px;display:inline-block;user-select:none}
.step-notes-body{font-size:14px;color:var(--text-muted);line-height:1.5;margin-top:5px;padding:7px 10px;background:var(--elevated);border-radius:6px;display:none}
.step-notes-body.open{display:block}

/* ── Journal entries ──────────────────────────────────────────────────────── */
.journal-locked{font-size:14px;color:var(--text-muted);padding:10px 0;font-style:italic;text-align:center}
.journal-add-form{margin-top:12px;display:none}

/* ── Category / priority badges ──────────────────────────────────────────── */
.cat-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:13px;font-weight:600;background:var(--elevated);color:var(--text-muted)}
.priority-badge-high{color:#ef4444}
.priority-badge-medium{color:#E8A020}
.priority-badge-low{color:var(--text-muted)}

/* ── New project category bubbles ─────────────────────────────────────────── */
.cat-bubble-wrap{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;align-items:center;
  margin-bottom:20px;
  padding:8px 4px;
}
.cat-bubble{
  padding:7px 15px;border-radius:99px;border:1.5px solid var(--border-strong);
  background:var(--card);color:var(--text-sub);
  font-size:14px;font-weight:600;font-family:var(--font-ui);
  cursor:pointer;transition:all .15s;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.cat-bubble:active{transform:scale(.94)}
.cat-bubble.selected{
  border-color:var(--accent-2);
  background:color-mix(in srgb, var(--accent-2) 13%, transparent);color:var(--accent-2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 9%, transparent);
}
.cat-bubble-add{
  width:32px;height:32px;border-radius:50%;
  border:1.5px dashed var(--border-strong);
  background:var(--card);color:var(--text-muted);
  font-size:20px;font-weight:300;font-family:var(--font-ui);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.cat-bubble-add:active{transform:scale(.94)}
.cat-bubble-add:hover{border-color:var(--accent-2);color:var(--accent-2)}

/* ── Category chips ──────────────────────────────────────────────────────── */
.cat-chip{display:inline-flex;align-items:center;gap:5px;background:var(--elevated);border-radius:99px;padding:4px 10px 4px 12px;font-size:14px;color:var(--text-sub);margin:4px}
.cat-chip-remove{border:none;background:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:0;line-height:1}

/* ── Sub-panels (slide over profile panel) ────────────────────────────────── */
.subpanel{
  position:fixed;inset:0;z-index:500;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.subpanel.open{opacity:1;pointer-events:all}
.subpanel-inner{
  position:absolute;top:0;right:0;bottom:0;width:100%;max-width:430px;
  background:var(--card);
  transform:translateX(100%);transition:transform .25s ease;
  overflow-y:auto;border-left:1px solid var(--border);
}
.subpanel.open .subpanel-inner{transform:translateX(0)}
.subpanel-head{
  display:flex;align-items:center;gap:12px;
  padding:52px 20px 16px;border-bottom:1px solid var(--border);
}
.subpanel-back{
  width:34px;height:34px;border-radius:8px;border:none;
  background:var(--elevated);color:var(--text-muted);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.subpanel-title{font-size:18px;font-weight:800;color:var(--text)}
.subpanel-body{padding:0 0 60px}
.sp-section{padding:8px 0}
.sp-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:14px 20px 4px}
.sp-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;font-size:16px;font-weight:500;color:var(--text);
  border-bottom:1px solid var(--border);
}
.sp-row:last-child{border-bottom:none}
.sp-row-left{display:flex;align-items:center;gap:12px}
.sp-row-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.sp-row-sub{font-size:14px;color:var(--text-muted);margin-top:2px;font-weight:400}
.sp-select{
  background:var(--elevated);border:1px solid var(--border-strong);
  border-radius:7px;padding:5px 8px;font-size:14px;font-family:var(--font-ui);
  color:var(--text);-webkit-appearance:none;outline:none;cursor:pointer;
}
.sp-input{
  background:var(--elevated);border:1px solid var(--border-strong);
  border-radius:8px;padding:9px 12px;font-size:16px;font-family:var(--font-ui);
  color:var(--text);outline:none;width:100%;margin:0;
}
.sp-field{padding:12px 20px;border-bottom:1px solid var(--border)}
.sp-field-label{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.sp-avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--elevated);border:2px solid var(--border-strong);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:34px;cursor:pointer;margin:0 auto 8px;
}
.sp-avatar img{width:100%;height:100%;object-fit:cover;display:none}

/* ── Upgrade panel ────────────────────────────────────────────────────────── */
.plan-card{
  margin:16px 20px;border-radius:14px;
  border:2px solid var(--border);padding:20px;
  cursor:pointer;transition:border-color .15s;
}
.plan-card.featured{border-color:var(--accent-2);background:color-mix(in srgb, var(--accent-2) 4%, transparent)}
.plan-card.selected{border-color:var(--accent)}
.plan-name{font-size:16px;font-weight:800;color:var(--text);margin-bottom:2px}
.plan-price{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.plan-price span{font-size:16px;font-weight:500;color:var(--text-muted)}
.plan-badge{display:inline-block;background:var(--accent-2);color:var(--on-accent);font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;letter-spacing:.04em;margin-bottom:8px}
.plan-features{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.plan-feature{font-size:14px;color:var(--text-sub);display:flex;gap:8px;align-items:flex-start}
.plan-feature-check{color:var(--accent);flex-shrink:0;font-weight:700}
.plan-feature-x{color:var(--text-muted);flex-shrink:0}

/* ── FAQ accordion ────────────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;font-size:16px;font-weight:600;color:var(--text);
  cursor:pointer;user-select:none;
}
.faq-q:active{background:var(--elevated)}
.faq-chevron{color:var(--accent-2);font-size:16px;transition:transform .2s;flex-shrink:0}
.faq-chevron.open{transform:rotate(90deg)}
.faq-a{display:none;padding:0 20px 14px;font-size:16px;color:var(--text-muted);line-height:1.6}
.faq-a.open{display:block}

/* ── Notif timing row ─────────────────────────────────────────────────────── */
.notif-timing{padding:10px 20px 14px 56px;background:var(--elevated);border-bottom:1px solid var(--border);display:none}
.notif-timing.open{display:block}
.notif-timing-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:6px}

/* ── Due today ────────────────────────────────────────────────────────────── */
.due-today-card{
  background:var(--card);border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  margin-bottom:14px;overflow:hidden;
}
.due-today-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--border);
}
.due-today-label{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:#ef4444;display:flex;align-items:center;gap:6px;
}
.due-today-count{
  background:#ef444422;color:#ef4444;
  font-size:12px;font-weight:700;padding:2px 7px;border-radius:99px;
}
.due-today-see-more{
  font-size:14px;font-weight:600;color:var(--accent);
  background:none;border:none;cursor:pointer;font-family:var(--font-ui);padding:0;
}
.due-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;
}
.due-row:last-child{border-bottom:none}
.due-row:active{background:var(--elevated)}
.due-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.due-row-content{flex:1;min-width:0}
.due-row-title{font-size:16px;font-weight:600;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due-row-sub{font-size:14px;color:var(--text-muted);margin-top:2px}
.due-row-badge{font-size:13px;font-weight:700;padding:2px 7px;border-radius:99px;flex-shrink:0;align-self:center}

/* ── Due today full screen ────────────────────────────────────────────────── */
.supply-url-link{font-size:14px;color:var(--accent-2);text-decoration:none;word-break:break-all}


/* ── Search sort popup ────────────────────────────────────────────────────── */
.sort-btn{
  background:none;border:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--accent);
  font-family:var(--font-ui);padding:0;display:flex;align-items:center;gap:3px;
}
.sort-popup{
  position:absolute;right:0;top:22px;
  background:var(--elevated);border:1px solid var(--border-strong);
  border-radius:10px;z-index:100;min-width:140px;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.18);display:none;
}
.sort-popup.open{display:block}
.sort-option{
  padding:10px 14px;font-size:14px;font-weight:500;cursor:pointer;
  color:var(--text);border-bottom:1px solid var(--border);font-family:var(--font-ui);
}
.sort-option:last-child{border-bottom:none}
.sort-option.active{color:var(--accent);font-weight:700}
.sort-option:active{background:var(--card)}
.search-results-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;position:relative;
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-bar{
  display:none;padding:0 16px 10px;
}
.search-bar.open{display:block}
.search-input-wrap{position:relative}
.search-input{
  width:100%;background:var(--elevated);border:1px solid var(--border-strong);
  border-radius:10px;padding:9px 36px 9px 14px;
  font-size:16px;font-family:var(--font-ui);color:var(--text);
  outline:none;margin:0;
}
.search-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--text-muted);font-size:16px;
  cursor:pointer;padding:0;line-height:1;display:none;
}

/* ── Last activity ────────────────────────────────────────────────────────── */
.last-activity{font-size:13px;color:var(--text-muted)}

/* ── Noodle card button ───────────────────────────────────────────────────── */
.focus-card-btn{
  background:none;border:none;font-size:20px;cursor:pointer;
  padding:2px 4px;line-height:1;flex-shrink:0;
  opacity:.55;transition:opacity .15s;
}
.focus-card-btn:hover{opacity:1}

/* ── Noodle detail button ─────────────────────────────────────────────────── */
.focus-detail-btn{
  width:100%;padding:13px;border-radius:12px;border:none;
  background:var(--accent-2);color:var(--on-accent);
  font-size:16px;font-weight:700;font-family:var(--font-ui);
  cursor:pointer;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  opacity:.92;transition:opacity .15s;
}
.focus-detail-btn:hover{opacity:1}

/* ── Noodle screen shared ─────────────────────────────────────────────────── */
#focus-screen{display:none}
#focus-screen.open{display:flex;flex-direction:column}
.focus-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 0;
}
.focus-wordmark{
  font-size:14px;font-weight:800;color:var(--text-muted);
  letter-spacing:.04em;
}
.focus-close{
  background:var(--elevated);border:none;border-radius:8px;
  padding:6px 12px;font-size:14px;font-weight:600;
  color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);
}
.focus-body{
  padding:24px 20px 48px;flex:1;
}
.focus-project-name{
  font-size:14px;font-weight:700;color:var(--accent-2);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;
}
.focus-hero-text{
  font-size:22px;font-weight:800;color:var(--text);
  line-height:1.3;margin-bottom:22px;
}

/* warm-up checklist */
.focus-checklist{margin-bottom:24px}
.focus-check-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:16px;color:var(--text);cursor:pointer;
}
.focus-check-row:last-child{border-bottom:none}
.focus-check-row.checked .focus-check-box{
  background:var(--accent);border-color:var(--accent);
}
.focus-check-row.checked .focus-check-icon{opacity:1}
.focus-check-row.checked .focus-check-label{color:var(--text-muted)}
.focus-check-box{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  border:2px solid var(--border-strong);background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.focus-check-icon{font-size:14px;color:var(--on-accent);font-weight:700;opacity:0;transition:opacity .15s}
.focus-check-label{flex:1;line-height:1.35}

/* up next */
.focus-next-label{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-muted);margin-bottom:8px;
}
.focus-next-step{
  background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--accent-2);
  border-radius:10px;padding:12px 14px;
  font-size:16px;font-weight:600;color:var(--text);
  margin-bottom:24px;line-height:1.4;
}
.focus-next-step.empty{
  color:var(--text-muted);font-style:italic;font-weight:400;
}

/* time picker */
.focus-time-label{
  font-size:14px;font-weight:700;color:var(--text-muted);
  margin-bottom:10px;
}
.focus-time-options{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;
}
.focus-time-btn{
  padding:12px;border-radius:10px;border:2px solid var(--border);
  background:var(--card);color:var(--text);
  font-size:16px;font-weight:700;font-family:var(--font-ui);
  cursor:pointer;transition:all .15s;
}
.focus-time-btn.selected{
  border-color:var(--accent-2);background:color-mix(in srgb, var(--accent-2) 9%, transparent);color:var(--accent-2);
}
.focus-go-btn{
  width:100%;padding:14px;border-radius:12px;border:none;
  background:var(--accent-2);color:var(--on-accent);
  font-size:16px;font-weight:800;font-family:var(--font-ui);
  cursor:pointer;margin-bottom:12px;transition:opacity .15s;
}
.focus-go-btn:disabled{
  background:var(--elevated);color:var(--text-disabled);cursor:not-allowed;
}
.focus-reassure{
  text-align:center;font-size:14px;color:var(--text-muted);line-height:1.5;
}

/* timer phase */
.focus-body-timer{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:20px;
}
.focus-timer-project{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-2);margin-bottom:6px;
}
.focus-timer-step{
  font-size:17px;font-weight:700;color:var(--text);
  margin-bottom:28px;line-height:1.3;max-width:280px;
}
.focus-ring-wrap{
  position:relative;width:200px;height:200px;margin-bottom:24px;
}
.focus-ring{width:200px;height:200px;transform:rotate(-90deg)}
.focus-ring-track{
  fill:none;stroke:var(--elevated);stroke-width:8;
}
.focus-ring-fill{
  fill:none;stroke:var(--accent-2);stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:326.7;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .8s linear;
}
.focus-timer-display{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:42px;font-weight:800;color:var(--text);letter-spacing:-.03em;
}
.focus-timer-nudge{
  font-size:16px;color:var(--text-muted);margin-bottom:20px;
  min-height:22px;font-style:italic;text-align:center;
}
.focus-done-early-btn{
  background:none;border:1px solid var(--border-strong);
  border-radius:10px;padding:11px 24px;
  font-size:16px;font-weight:600;font-family:var(--font-ui);
  color:var(--text-muted);cursor:pointer;
}

/* finish phase */
.focus-finish-emoji{font-size:56px;margin-bottom:12px;line-height:1}
.focus-finish-headline{
  font-size:26px;font-weight:800;color:var(--text);margin-bottom:8px;
}
.focus-finish-time{
  font-size:16px;font-weight:600;color:var(--accent-2);margin-bottom:12px;
}
.focus-finish-msg{
  font-size:16px;color:var(--text-muted);line-height:1.6;
  margin-bottom:32px;
}
.focus-finish-actions{display:flex;flex-direction:column;gap:10px}
.greeting-block{
  padding:18px 16px 4px;
}
.greeting-name{
  font-size:14px;font-weight:700;color:var(--text-muted);
  letter-spacing:.04em;margin-bottom:3px;
}
.greeting-phrase{
  font-size:22px;font-weight:800;color:var(--text);
  line-height:1.2;letter-spacing:-.02em;
}


@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.bt-auth{max-width:380px;margin:0 auto;padding:48px 24px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.bt-auth .wordmark{font-size:32px;margin-bottom:6px}
.bt-auth .tagline{margin-bottom:32px}
.bt-auth h1{font-size:19px;font-weight:700;color:var(--text);margin-bottom:6px}
.bt-auth p.sub{font-size:16px;color:var(--text-muted);line-height:1.5;margin-bottom:20px}
.bt-auth label{display:block;font-size:14px;font-weight:600;color:var(--text-sub);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.bt-auth input[type=email]{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--border-strong);background:var(--input);color:var(--text);font-size:16px;font-family:var(--font-ui);margin-bottom:14px}
.bt-auth .cf-turnstile{margin-bottom:14px;min-height:65px}
.bt-auth .msg{font-size:16px;line-height:1.5;padding:12px 14px;border-radius:9px;margin-bottom:16px}
.bt-auth .msg.err{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text)}
.bt-auth .msg.ok{background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 33%, transparent);color:var(--accent)}
.bt-auth .back{margin-top:28px;font-size:14px;color:var(--text-muted);text-decoration:none;text-align:center}
.bt-auth .back:hover{color:var(--text-muted)}
.bt-signed{max-width:380px;margin:0 auto;padding:48px 24px;text-align:center}
.bt-signed .who{font-size:16px;color:var(--text-muted);margin:16px 0 24px}

/* ── Brambletally rebuilt-screen overrides ──────────────────────────────── */
#bt-app .header .tabs { margin-top: 4px; }
#bt-app .journal-add-form { display: block; margin-bottom: 18px; }
#bt-app .journal-add-form textarea,
#bt-app #bt-inbox-text {
  width: 100%; padding: 12px 14px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--input);
  color: var(--text); font: inherit; font-size:16px; resize: vertical;
}
#bt-app .checkbox {
  border: 2px solid var(--border-strong); background: transparent;
  color:var(--on-accent); font-size:16px; font-weight: 700; cursor: pointer;
}
#bt-app .check-row.checked .checkbox { background: var(--accent); border-color: var(--accent); }
#bt-app .check-row.checked .check-title { text-decoration: line-through; color: var(--text-disabled); }
#bt-app .checkbox[disabled] { opacity: .5; cursor: default; }
#bt-app .card-menu-btn {
  background: none; border: none; color: var(--text-muted);
  font-size:16px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; align-self: center;
}
#bt-app .status-pill { background: var(--tab-color, var(--accent))22; color: var(--tab-color, var(--accent)); }
#bt-app .detail-body { padding: 12px 16px 120px; }
#bt-app .detail-strip { height: 5px; }
#bt-app .detail-topbar { display: flex; justify-content: space-between; margin-bottom: 12px; }
#bt-app .detail-topbar .detail-back {
  position: static; background: none; border: none; padding: 4px 0;
  font-size:16px; font-weight: 600; color: var(--text-sub); cursor: pointer;
}
#bt-app .newbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* Top nav — distinct from the filter chips below it */
#bt-app .topnav { display: flex; gap: 20px; padding-bottom: 0; margin-bottom: 12px; }
#bt-app .topnav-item {
  background: none; border: none; padding: 6px 0 10px; cursor: pointer;
  font: inherit; font-size:16px; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
#bt-app .topnav-item.active { color: var(--text); border-bottom-color: var(--accent); }

/* Pick-up-here inline edit */
#bt-app .pickup-edit-hint { float: right; font-size:12px; color: var(--text-muted); cursor: pointer; }
#bt-app .pickup-text { cursor: pointer; }
#bt-app .pickup-input {
  width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
  font: inherit; font-size:16px; resize: vertical;
}
#bt-app .pickup-edit-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Completed-steps toggle */
#bt-app .done-toggle {
  background: none; border: none; cursor: pointer; font: inherit; font-size:14px;
  font-weight: 600; color: var(--text-muted); padding: 12px 0 4px;
}
#bt-app .done-toggle::before { content: '▸ '; }
#bt-app .done-toggle.open::before { content: '▾ '; }
#bt-app .check-content.tappable { cursor: pointer; }

/* Danger button */
#bt-app .btn-danger, .modal-overlay .btn-danger {
  background: #ef444418; color: #ef4444; border: none;
  padding: 10px 16px; border-radius: 7px; font: inherit; font-size:16px;
  font-weight: 600; cursor: pointer;
}

/* Home "due now" band */
#bt-app .due-band {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 16px;
}
#bt-app .due-band-head {
  font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--warn-text); margin-bottom: 6px;
}
#bt-app .due-band-row {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; font: inherit; padding: 6px 0; border-top: 1px solid var(--warn-border);
}
#bt-app .due-band-row:first-of-type { border-top: none; }
#bt-app .due-band-title { display: block; font-size:16px; color: var(--text); }
#bt-app .due-band-sub { display: block; font-size:14px; color: var(--text-muted); margin-top: 1px; }
#bt-app .due-over { color: #ef4444; font-weight: 600; }
#bt-app .due-today { color: var(--warn-text); font-weight: 600; }

.modal-overlay .sp-input, .modal-overlay .sp-select { margin: 0 20px 2px; width: calc(100% - 40px); }
.modal-overlay .sp-label:first-of-type { padding-top: 2px; }
.modal-overlay form > div:last-child { padding: 0 20px 4px; }

.bt-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px;
  font-size:16px; font-weight: 600; opacity: 0;
  transition: opacity .25s, transform .25s; z-index: 9999; pointer-events: none; max-width: 90vw;
}
.bt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Focus session screen (positioning was inline in noodlr's HTML) ─────── */
#focus-screen {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg); overflow-y: auto; flex-direction: column;
}
#focus-screen > div { max-width: 430px; margin: 0 auto; width: 100%; }
#focus-screen .focus-finish-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; width: 100%; }
#focus-screen .focus-finish-actions .btn-sm { width: 100%; }
#focus-screen .focus-done-early-btn {
  margin-top: 26px; background: none; border: 1px solid var(--border-strong);
  color: var(--text-muted); padding: 10px 20px; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ── Inbox items ──────────────────────────────────────────────────────────── */
#bt-app .inbox-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
#bt-app .inbox-item:last-child { border-bottom: none; }
#bt-app .inbox-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#bt-app .inbox-actions .btn-sm { padding: 5px 10px; font-size:14px; }

/* ── People / sharing ────────────────────────────────────────────────────── */
#bt-app .meta-people {
  background: var(--elevated); border: none; border-radius: 99px;
  padding: 2px 10px; font: inherit; font-size:14px; color: var(--text-muted);
  cursor: pointer;
}
.modal-overlay .person-list { margin-bottom: 8px; }
.modal-overlay .person {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.modal-overlay .person:last-child { border-bottom: none; }
.modal-overlay .person-name { font-size:16px; color: var(--text); }
.modal-overlay .person-sub { font-size:14px; color: var(--text-muted); margin-top: 2px; }
.modal-overlay .person-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.modal-overlay .person-actions .btn-sm,
.modal-overlay .person-actions .sp-select { padding: 5px 8px; font-size:14px; }
.modal-overlay .person-group {
  font-size:12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin: 14px 0 2px;
}
.modal-overlay .person-add { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; }
.modal-overlay .person-add .sp-input,
.modal-overlay .person-add .sp-label { margin-left: 0; margin-right: 0; width: 100%; padding-left: 0; }

/* ── Next actions ────────────────────────────────────────────────────────── */
#bt-app .next-head { margin-bottom: 16px; }
#bt-app .next-line { font-size:19px; font-weight: 800; color: var(--text); line-height: 1.3; }
#bt-app .next-count { font-size:14px; color: var(--text-muted); margin-top: 4px; }
#bt-app .next-surprise {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent); color: var(--accent-2); border: none; border-radius: 10px;
  padding: 11px 14px; font: inherit; font-size:14px; font-weight: 700; cursor: pointer;
  width: 100%; margin-bottom: 18px;
}
#bt-app .next-surprise:hover { background: color-mix(in srgb, var(--accent-2) 16%, transparent); }

/* Each due-bucket is a card, matching the Home surfaces */
#bt-app .next-group {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 2px 14px 6px; margin-bottom: 12px;
}
#bt-app .next-group[data-key="overdue"] {
  background: var(--warn-bg); border-color: var(--warn-border);
}
#bt-app .next-group-head {
  background: none; border: none; cursor: pointer; font: inherit; width: 100%;
  font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); padding: 11px 0; display: flex; gap: 6px; align-items: center;
  border-bottom: 1px solid var(--border);
}
#bt-app .next-group[data-key="overdue"] .next-group-head { color: var(--warn-text); border-bottom-color: var(--warn-border); }
#bt-app .next-group.collapsed .next-group-head { border-bottom: none; }
#bt-app .next-group-head::before { content: '▾'; font-size:11px; }
#bt-app .next-group.collapsed .next-group-head::before { content: '▸'; }
#bt-app .next-group-head span {
  margin-left: auto; background: var(--elevated); border-radius: 99px;
  padding: 1px 7px; font-size:12px; letter-spacing: 0;
}
#bt-app .next-group[data-key="overdue"] .next-group-head span { background: var(--warn-border); }
#bt-app .next-group.collapsed .next-group-body { display: none; }
#bt-app .next-group-body { padding-top: 2px; }
#bt-app .next-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--border);
  max-height: 90px; overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease, padding .3s ease, background .2s;
}
#bt-app .next-group[data-key="overdue"] .next-row { border-bottom-color: var(--warn-border); }
#bt-app .next-group-body .next-row:last-child { border-bottom: none; }
#bt-app .next-row.done { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
#bt-app .next-row.flash { background: color-mix(in srgb, var(--accent-2) 8%, transparent); border-radius: 8px; }
#bt-app .next-row-main { flex: 1; cursor: pointer; min-width: 0; }
#bt-app .next-row-title { font-size:16px; color: var(--text); line-height: 1.35; }
#bt-app .next-row-sub { font-size:14px; color: var(--text-muted); margin-top: 2px; }
#bt-app .next-group[data-key="overdue"] .next-row-sub { color: #ef4444; }
.next-nice {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, 0) scale(.7);
  font-size:30px; font-weight: 800; color: var(--accent);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity .2s ease, transform .25s ease;
}
.next-nice.show { opacity: 1; transform: translate(-50%, -22px) scale(1); }

/* ── Search ──────────────────────────────────────────────────────────────── */
#bt-app .search-row { display: flex; gap: 8px; align-items: center; padding-bottom: 14px; }
#bt-app .search-back {
  background: none; border: none; font-size:20px; color: var(--text-muted);
  cursor: pointer; padding: 4px 4px; line-height: 1; flex-shrink: 0;
}
#bt-app .search-field {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--input);
  color: var(--text); font: inherit; font-size:16px;
}
#bt-app .search-clear {
  background: none; border: none; font-size:16px; color: var(--text-muted);
  cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
#bt-app .s-head {
  font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); margin: 18px 0 8px; display: flex; gap: 6px; align-items: center;
}
#bt-app .s-head:first-child { margin-top: 4px; }
#bt-app .s-head span { background: var(--elevated); border-radius: 99px; padding: 1px 7px; font-size:12px; letter-spacing: 0; }
#bt-app .s-result {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 11px 2px; cursor: pointer;
}
#bt-app .s-result-title { font-size:16px; color: var(--text); line-height: 1.35; }
#bt-app .s-result-title.s-done { text-decoration: line-through; color: var(--text-disabled); }
#bt-app .s-result-sub { font-size:14px; color: var(--text-muted); margin-top: 2px; }

/* ── Manage categories ──────────────────────────────────────────────────── */
.modal-overlay .sp-inline-link {
  background: none; border: none; color: var(--accent-2); font: inherit;
  font-size:13px; font-weight: 600; cursor: pointer; padding: 0; margin-left: 8px;
  text-transform: none; letter-spacing: 0;
}
.modal-overlay .cat-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.modal-overlay .cat-row:last-child { border-bottom: none; }
.modal-overlay .cat-row-name { font-size:16px; color: var(--text); }
.modal-overlay .cat-row-actions { display: flex; gap: 6px; }
.modal-overlay .cat-row-actions .btn-sm { padding: 5px 10px; font-size:14px; }

/* ── Desktop / wide layout ──────────────────────────────────────────────── */
@media (min-width: 720px) {
  /* modals: bottom sheet on phones, centred dialog on wider screens */
  .modal-overlay { align-items: center; justify-content: center; padding: 24px; }
  .modal { width: 540px; max-width: 100%; border-radius: 16px; padding: 24px 24px 28px; max-height: 85vh; }
  .modal-overlay.open .modal { transform: none; }
  #focus-screen > div { max-width: 520px; }

  /* reading views stay a comfortable column */
  #bt-app .detail-body { max-width: 620px; margin: 0 auto; }
}

@media (min-width: 900px) {
  #bt-app { max-width: 1060px; }
  /* the non-home views keep a readable column */
  #bt-app .project-list:not(.is-home) { max-width: 620px; margin: 0 auto; }
  /* the project list becomes a responsive card grid */
  #bt-app .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
  }
  #bt-app .cards-grid .card { margin-bottom: 0; }
  /* on the home grid the "New project" button sits at the top-left */
  #bt-app .is-home .newbar { justify-content: flex-start; }
  #bt-app .is-home .due-band { max-width: 560px; }
}

/* ══ Visual polish — Bramble palette, EB Garamond display, refined spacing ══ */

#bt-app { color: var(--text); }

/* Wordmark & display type */
#bt-app .wordmark {
  font-family: var(--font-display); font-weight: 400; font-size:30px;
  letter-spacing: .01em; color: var(--accent-2);
}
#bt-app .wordmark span { color: var(--gold); }
#bt-app .detail-title { font-family: var(--font-head); font-weight: 600; font-size:28px; color: var(--accent-2); letter-spacing: .01em; line-height: 1.2; }
#bt-app .card-title { font-family: var(--font-head); font-weight: 600; font-size:19px; color: var(--accent-2); line-height: 1.25; }
#bt-app .next-line { font-family: var(--font-head); font-weight: 600; font-size:21px; color: var(--text); }
#bt-app .bt-auth h1, #bt-app .modal-title, #bt-app .bt-signed .wordmark { font-family: var(--font-head); }
#bt-app .bt-auth .wordmark { font-size:34px; }

/* Small tracked labels in mono */
#bt-app .tagline, #bt-app .section-label, #bt-app .sp-label, #bt-app .pickup-label,
#bt-app .s-head, #bt-app .next-group-head, #bt-app .due-band-head,
#bt-app .person-group, #bt-app .bt-auth label {
  font-family: var(--font-mono); letter-spacing: .1em;
}

/* Header */
#bt-app .header { border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.1); }
#bt-app .tagline { color: var(--text-muted); }

/* Nav — accent underline */
#bt-app .topnav-item.active { color: var(--accent-2); border-bottom-color: var(--gold); }

/* Cards */
#bt-app .card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 15px 16px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
@media (hover: hover) {
  #bt-app .card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(38,48,74,.12); }
  :root[data-theme$="-dark"] #bt-app .card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.4); }
}
#bt-app .card-meta { color: var(--text-muted); font-size:14px; }
#bt-app .card-footer { color: var(--text-sub); font-size:14px; margin-top: 8px; line-height: 1.5; }

/* Status pill & chips */
#bt-app .status-pill { border-radius: 6px; letter-spacing: .03em; padding: 3px 9px; }
#bt-app .tab { border-radius: 7px; }
#bt-app .cat-badge { background: var(--elevated); color: var(--text-sub); }

/* Buttons */
#bt-app .btn-sm, #bt-app .btn-primary { border-radius: 8px; font-family: var(--font-ui); }
#bt-app .btn-sm-ghost { background: var(--elevated); color: var(--text-sub); border: 1px solid transparent; }
#bt-app .btn-sm-amethyst { background: var(--accent-2); }
#bt-app .btn-section-add { color: var(--accent); }
#bt-app .focus-detail-btn {
  background: linear-gradient(var(--accent-2), color-mix(in srgb, var(--accent-2) 88%, #000));
  border-radius: 10px; font-weight: 700; letter-spacing: .02em;
}

/* Progress bar */
#bt-app .progress-bar-wrap { height: 5px; background: var(--elevated); }

/* Inputs */
#bt-app .sp-input, #bt-app .sp-select, #bt-app .pickup-input,
#bt-app .search-field, #bt-app .journal-add-form textarea, #bt-app #bt-inbox-text {
  background: var(--input); border-color: var(--border-strong); border-radius: 8px;
}

/* Pickup-here box — accent edge */
#bt-app .pickup-box { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent-2); border-radius: 10px; padding: 12px 14px; }
#bt-app .pickup-label { color: var(--accent-2); }

/* Detail top accent already coloured per status; make it a touch bolder */
#bt-app .detail-strip { height: 6px; }

/* Focus-visible — accent ring; also the affordance for form fields (border-strong is decorative) */
#bt-app :focus-visible, .modal-overlay :focus-visible, #focus-screen :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Empty states — a hair warmer */
#bt-app .empty { color: var(--text-muted); }

/* Modals */
.modal { box-shadow: 0 -8px 40px rgba(38,48,74,.22); }
@media (min-width: 720px) { .modal { box-shadow: 0 20px 60px rgba(38,48,74,.3); } }
.modal-title { font-family: var(--font-head); font-weight: 600; font-size:20px; color: var(--accent-2); }

/* Focus session */
#focus-screen { background: var(--bg); }
#focus-screen .focus-wordmark { font-family: var(--font-head); color: var(--accent-2); }
.focus-ring-fill { stroke: var(--accent); }
.focus-time-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.focus-go-btn { background: var(--accent); border-radius: 12px; }
.next-nice { color: var(--accent); font-family: var(--font-head); }

/* Due-band — gold on parchment */
#bt-app .due-band { border-radius: 12px; }
#bt-app .due-over { color: var(--danger); }

/* Account bars on the tool pages already ship their own colours; nudge them
   toward the palette when they render inside a themed context is not needed. */

/* Tint chips & pills via color-mix so any --tab-color works on both grounds */
#bt-app .status-pill {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 16%, transparent);
  color: var(--tab-color, var(--accent));
}
#bt-app .tab.active {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 14%, transparent);
  border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 38%, transparent);
  color: var(--tab-color, var(--accent));
}
#bt-app .tab.active .tab-count {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 24%, transparent);
  color: var(--tab-color, var(--accent));
}
#bt-app .tab { color: var(--text-muted); }

/* Theme toggle icon button */
#bt-app #bt-theme { font-size:16px; }

/* Header fits on narrow screens */
#bt-app .header-row .btn-sm { white-space: nowrap; }
@media (max-width: 430px) {
  #bt-app .wordmark { font-size:24px; }
  #bt-app .header-row > div:last-child { gap: 6px; }
  #bt-app .btn-icon { width: 34px; height: 34px; }
}

/* ── Sub-steps ("bash") ─────────────────────────────────────────────────── */
#bt-app .step-block { border-bottom: 1px solid var(--border); }
#bt-app .step-block:last-of-type { border-bottom: none; }
#bt-app .step-block .check-row { border-bottom: none; }
#bt-app .substeps {
  margin-left: 36px; padding-left: 12px; margin-bottom: 4px;
  border-left: 2px solid var(--border);
}
#bt-app .substeps .check-row { padding: 9px 0; }
#bt-app .substeps .check-title { font-size:16px; }
#bt-app .check-row.is-container > .checkbox {
  border-style: dashed; opacity: .55; cursor: default; background: transparent;
}
#bt-app .check-row.is-container.checked > .checkbox {
  background: var(--accent); border-style: solid; opacity: 1;
}
#bt-app .step-bash {
  background: none; border: none; cursor: pointer; font-size:16px; line-height: 1;
  padding: 2px 4px; margin-left: 4px; align-self: center; flex-shrink: 0; opacity: .4;
}
#bt-app .step-bash:hover { opacity: 1; }

/* Sub-step breadcrumb in the cross-project lists (search / Next / Review / Due) */
#bt-app .bt-crumb { color: var(--text-muted); font-weight: 400; }

/* Inline quick-add at the foot of the step list */
#bt-app .bt-quickadd { margin: 8px 0 4px; }
#bt-app .bt-quickadd-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; box-sizing: border-box;
  border: 1px dashed var(--border-strong); background: transparent; color: var(--text);
  font: inherit; font-size:16px; resize: none; line-height: 1.4;
}
#bt-app .bt-quickadd-input:focus { border-style: solid; outline: none; }

/* Step form — due-date chips + time-needed slider */
.modal-overlay .bt-date-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 20px 4px; }
.modal-overlay .bt-chip {
  background: var(--elevated); color: var(--text-sub); border: 1px solid transparent;
  border-radius: 99px; padding: 5px 11px; font: inherit; font-size:14px; font-weight: 600;
  cursor: pointer;
}
.modal-overlay .bt-chip:hover { border-color: var(--border-strong); }
.modal-overlay .bt-chip-clear { color: var(--text-muted); }
.modal-overlay .bt-est { display: flex; align-items: center; gap: 12px; margin: 2px 20px 4px; }
.modal-overlay .bt-est-slider { flex: 1; accent-color: var(--accent); }
.modal-overlay .bt-est-label {
  font-size:14px; font-weight: 600; color: var(--text-muted);
  min-width: 96px; text-align: right;
}
.modal-overlay .bt-bash-parent {
  margin: 0 20px 4px; font-size:16px; font-weight: 700; color: var(--text);
}

/* Home: Projects / Quick tasks toggle + the quick list */
#bt-app .bt-home-modes { display: flex; gap: 6px; margin-bottom: 12px; }
#bt-app .bt-home-mode {
  background: var(--elevated); border: 1px solid transparent; border-radius: 7px;
  padding: 7px 14px; font: inherit; font-size:14px; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
#bt-app .bt-home-mode.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent);
}
#bt-app .bt-quick-caps { display: flex; gap: 6px; margin-bottom: 12px; }
#bt-app .bt-quick-cap {
  background: none; border: 1px solid var(--border-strong); border-radius: 99px;
  padding: 4px 12px; font: inherit; font-size:14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
}
#bt-app .bt-quick-cap.active {
  background: var(--accent-2); color:var(--on-accent); border-color: var(--accent-2);
}
#bt-app .bt-review-stat {
  color: var(--accent); font-size:14px; font-weight: 600; margin: -8px 0 16px;
}

/* In-app confirm / prompt */
.modal-overlay.bt-ask { align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.bt-ask .modal {
  width: 380px; max-width: 100%; border-radius: 16px; padding: 22px;
  transform: none; box-shadow: 0 20px 60px rgba(38,48,74,.3);
}
.bt-ask-msg { font-size:16px; line-height: 1.5; color: var(--text); margin-bottom: 16px; }
.bt-ask .sp-input { margin-bottom: 16px; }
.bt-ask-actions { display: flex; gap: 8px; }
.bt-ask-actions .btn-sm { flex: 1; }

/* ── Settings → Appearance ──────────────────────────────────────────────── */
.bt-appr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bt-appr-title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); color: var(--accent-2); }
.bt-appearance .modal-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.bt-appr-label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 8px;
}
.bt-seg { display: flex; gap: 4px; background: var(--elevated); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.bt-seg-btn {
  flex: 1; border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  padding: 8px 6px; border-radius: 7px; transition: background .15s, color .15s;
}
.bt-seg-btn.is-sel { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.bt-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bt-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bt-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1.5px solid var(--border); background: var(--card); border-radius: 12px;
  padding: 12px 8px 10px; cursor: pointer; transition: border-color .15s;
}
.bt-swatch:hover { border-color: var(--border-strong); }
.bt-swatch.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.bt-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt-swatch-chip {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12);
  display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 7px;
}
.bt-swatch-chip i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.bt-swatch-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.bt-swatch-note { font-size: var(--fs-label); color: var(--text-muted); text-align: center; line-height: 1.3; }

/* ── Inline-SVG icons (icon() in app.js) ───────────────────────────────── */
.bt-ic { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
#bt-app .btn-icon .bt-ic { vertical-align: middle; }
#bt-app .focus-detail-btn .bt-ic { margin-right: 4px; }
#bt-app .meta-people .bt-ic { vertical-align: -0.22em; margin-right: 3px; }
#bt-app .step-bash .bt-ic { vertical-align: middle; }
#bt-app .checkbox .bt-ic, #bt-app .focus-check-icon .bt-ic { vertical-align: middle; }
#bt-app .focus-finish-emoji { line-height: 0; }
#bt-app .focus-finish-emoji .bt-ic { color: var(--accent-2); }

/* ── Project links panel ──────────────────────────────────────────────── */
#bt-app .link-row .link-ic { flex-shrink: 0; color: var(--text-muted); margin-top: 2px; line-height: 0; }
#bt-app .link-title { color: var(--accent); text-decoration: none; font-weight: 600; }
#bt-app .link-title:hover { text-decoration: underline; }
#bt-app .link-edit {
  flex-shrink: 0; align-self: center; background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; line-height: 0; transform: rotate(-90deg);
}
#bt-app .link-edit:hover { color: var(--accent); }
#bt-app .link-add { margin-top: 6px; }

/* ── Social 1a — supporter badge + handle prompt ──────────────────────── */
#bt-app .wordmark .bt-supporter {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 999px;
  padding: 1px 7px; margin-left: 8px; vertical-align: 3px;
}
.bt-handle-field { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.bt-handle-field > span { color: var(--text-muted); font-size: 16px; font-weight: 600; }
.bt-handle-field input { flex: 1; margin-bottom: 0; }

/* ── Settings screen (Social 1b-i) ────────────────────────────────────── */
.settings-screen { min-height: 100vh; background: var(--bg); }
.settings-body { max-width: 560px; margin: 0 auto; padding: 8px 0 96px; }
#bt-app .settings-body .detail-topbar { padding: 12px 20px 0; }
#bt-app .settings-body > .detail-title { margin: 6px 20px 16px; }
#bt-app .settings-body .sp-section + .sp-section { border-top: 1px solid var(--border); margin-top: 6px; }
#bt-app .settings-body .sp-section > .sp-label:first-child { padding-top: 16px; }
#bt-app .settings-body .bt-appr .bt-appr-label:first-child { margin-top: 0; }

/* ── Profile + discovery (Social 1b-ii) ───────────────────────────────── */
.bt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: var(--elevated); color: var(--text-sub);
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.bt-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

#bt-app .bt-prof-head { display: flex; gap: 16px; align-items: center; padding: 8px 20px 4px; }
#bt-app .bt-prof-head .detail-title { margin: 0 0 2px; }
.bt-prof-id { min-width: 0; }
.bt-prof-handle { font-size: 14px; color: var(--text-muted); }
.bt-prof-pronouns { font-size: 14px; color: var(--text-sub); margin-top: 2px; }
.bt-admin-tag {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px; vertical-align: 2px;
}
#bt-app .bt-prof-edit { margin: 12px 20px 4px; display: inline-flex; align-items: center; gap: 6px; }
#bt-app .bt-prof-bio { white-space: pre-wrap; font-size: 16px; color: var(--text); line-height: 1.5; padding: 0 20px; }

.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 4px; }
.bt-chip {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  background: var(--elevated); color: var(--text-sub);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.bt-chip:hover { border-color: var(--border-strong); color: var(--text); }
.bt-chip-rm { cursor: default; }
.bt-chip-rm button {
  background: none; border: none; cursor: pointer; padding: 0; margin-left: 2px;
  line-height: 0; color: var(--text-muted);
}
.bt-chip-rm button:hover { color: var(--danger); }

#bt-app .bt-prof-links { display: flex; flex-direction: column; gap: 2px; padding: 0 20px; }
.bt-prof-link {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 15px;
}
.bt-prof-link:hover { text-decoration: underline; }
.bt-prof-link .bt-ic { color: var(--text-muted); flex-shrink: 0; }

/* people rows */
#bt-app .bt-person, #bt-app .bt-person-list .bt-person {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 12px 20px; cursor: pointer; text-align: left;
}
#bt-app .bt-person:hover { background: var(--elevated); }
.bt-person-main { min-width: 0; display: flex; flex-direction: column; }
.bt-person-name { font-size: 16px; color: var(--text); font-weight: 600; }
.bt-person-sub { font-size: 13px; color: var(--text-muted); }
#bt-app .bt-person .bt-supporter {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 999px; padding: 0 6px; margin-left: 6px;
}
#bt-app .bt-person-list .detail-title, #bt-app #bt-disc-body > .detail-title { margin: 6px 20px 4px; }
#bt-app .bt-loadmore { margin: 16px 20px; }

/* edit form bits */
#bt-app .bt-textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.bt-count { font-weight: 400; color: var(--text-disabled); letter-spacing: 0; text-transform: none; }
.bt-pe-actions { display: flex; gap: 8px; padding: 16px 20px 8px; }

.bt-tag-editor { display: flex; flex-direction: column; gap: 8px; }
.bt-tag-editor .bt-chips { padding: 0; }
.bt-tag-inputwrap { position: relative; }
.bt-tag-suggest {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 220px; overflow-y: auto;
}
.bt-tag-suggest-item {
  display: flex; justify-content: space-between; width: 100%; background: none; border: none;
  padding: 9px 12px; cursor: pointer; font-size: 15px; color: var(--text); text-align: left;
}
.bt-tag-suggest-item:hover { background: var(--elevated); }
.bt-tag-suggest-item span { color: var(--text-disabled); font-size: 13px; }

.bt-link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#bt-app .bt-link-platform { flex: 0 0 34%; margin: 0; }
#bt-app .bt-link-url { flex: 1; margin: 0; min-width: 0; }
.bt-link-rm {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; line-height: 0;
}
.bt-link-rm:hover { color: var(--danger); }
#bt-app .bt-links-add { margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }

/* ── Blocking + admin tag tool (Social 1b-ii PR 2) ────────────────────── */
#bt-app .bt-adm-actions { display: flex; gap: 6px; flex-shrink: 0; }
#bt-app .bt-adm-actions .btn-sm { padding: 6px 10px; font-size: 13px; }
#bt-app .bt-adm-row.is-merge-from {
  background: var(--warn-bg);
  box-shadow: inset 3px 0 0 var(--warn-border);
}
#bt-app #bt-adm-merge-state { color: var(--warn-text); font-weight: 600; padding-bottom: 8px; }
#bt-app #bt-bl-body .sp-row .sp-row-left, #bt-app #bt-adm-list .sp-row .sp-row-left { min-width: 0; }
#bt-app #bt-prof-block { color: var(--danger); }

/* ── Following (Social Phase 2) ──────────────────────────────────────────── */
#bt-app .bt-prof-actions { display: flex; gap: 8px; margin: 12px 20px 4px; flex-wrap: wrap; }
#bt-app .bt-prof-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
#bt-app .bt-prof-block { color: var(--danger); }

.bt-follow-btn { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.bt-follow-btn.is-following { background: transparent; color: var(--text-sub); border-color: var(--border-strong); }

.bt-follows-you {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px; vertical-align: 2px;
}

.bt-prof-counts { display: flex; gap: 18px; padding: 6px 20px 0; }
.bt-prof-counts button {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 14px; color: var(--text-muted); font-family: var(--font-ui);
}
.bt-prof-counts button b { color: var(--text); font-weight: 700; }
.bt-prof-counts button:hover { color: var(--text); }

.bt-person-wrap { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
#bt-app .bt-person-wrap .bt-person { flex: 1; border-bottom: none; }
#bt-app .bt-person-wrap .bt-follow-btn { flex-shrink: 0; margin-right: 20px; padding: 6px 14px; font-size: 13px; }

/* ── Board (Phase 3a) ────────────────────────────────────────────────────── */
#bt-app .bt-board-intro { color: var(--text-muted); font-size: 14px; line-height: 1.5; padding: 4px 4px 14px; }
.bt-listing-list { display: flex; flex-direction: column; gap: 12px; }
#bt-app .bt-listing-card {
  display: block; width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 14px 16px; cursor: pointer;
}
#bt-app .bt-listing-card:hover { border-color: var(--border-strong); }
.bt-listing-head { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.3; }
.bt-listing-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--text-sub); }
.bt-listing-meta .bt-avatar { width: 26px; height: 26px; font-size: 11px; }
.bt-listing-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.bt-listing-steps { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-sub); }
.bt-listing-steps li { margin: 2px 0; }
.bt-step-due { color: var(--text-muted); }
.bt-listing-status {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--warn-text); border: 1px solid var(--warn-border);
  border-radius: 999px; padding: 1px 8px; vertical-align: 3px;
}

#bt-app .bt-board-listing, #bt-app #bt-board-list { /* reuse meta-people styling */ }

/* requests */
.bt-req-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.bt-req-main { display: flex; gap: 10px; min-width: 0; }
.bt-req-who { font-weight: 600; color: var(--text); font-size: 15px; }
.bt-req-msg { font-size: 14px; color: var(--text-sub); margin-top: 3px; white-space: pre-wrap; }
.bt-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bt-req-actions .btn-sm { padding: 6px 10px; font-size: 13px; }

/* comments */
.bt-cmt-composer { margin-bottom: 16px; }
.bt-cmt { padding: 10px 0; border-bottom: 1px solid var(--border); }
.bt-cmt-reply { margin-left: 28px; border-bottom: none; border-left: 2px solid var(--border); padding-left: 12px; }
.bt-cmt-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.bt-cmt-head .bt-avatar { width: 22px; height: 22px; font-size: 10px; }
.bt-cmt-who { font-weight: 600; color: var(--text-sub); }
.bt-cmt-body { font-size: 15px; color: var(--text); line-height: 1.5; margin: 4px 0 0 30px; white-space: pre-wrap; }
.bt-cmt-reply .bt-cmt-body { margin-left: 0; }
.bt-cmt-actions { display: flex; gap: 12px; margin: 6px 0 0 30px; }
.bt-cmt-reply .bt-cmt-actions { margin-left: 0; }
.bt-cmt-replybox { margin: 8px 0 0 30px; }
.bt-linkbtn { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--text-muted); font-family: var(--font-ui); }
.bt-linkbtn:hover { color: var(--accent); text-decoration: underline; }
.bt-linkbtn-danger:hover { color: var(--danger); }

/* ── Notifications (Phase 3b) ────────────────────────────────────────────── */
.bt-bell { position: relative; }
.bt-bell-dot {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  font-family: var(--font-ui);
}
.bt-notif-pop {
  position: fixed; top: 56px; right: 12px; z-index: 60; width: min(360px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
.bt-notif-head {
  padding: 12px 16px; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.bt-notif-list { max-height: min(60vh, 460px); overflow-y: auto; }
.bt-notif-list .empty-section { padding: 20px 16px; }
#bt-app .bt-notif-row, .bt-notif-row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 12px 16px; cursor: pointer;
}
.bt-notif-row:hover { background: var(--elevated); }
.bt-notif-row.is-unread { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bt-notif-row .bt-avatar { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.bt-notif-main { display: flex; flex-direction: column; min-width: 0; }
.bt-notif-text { font-size: 14px; color: var(--text); line-height: 1.4; }
.bt-notif-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Admin panel + reporting (Phase 3c) ─────────────────────────────────── */
.bt-radio { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 4px 0; }
#bt-app .modal-overlay .bt-radio { margin-left: 20px; margin-right: 20px; }

.bt-rep-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.bt-rep-top { display: flex; justify-content: space-between; align-items: center; }
.bt-rep-cat {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 999px; padding: 1px 8px;
}
.bt-rep-time { font-size: 12px; color: var(--text-muted); }
.bt-rep-target { font-size: 15px; color: var(--text); margin-top: 8px; line-height: 1.4; }
.bt-rep-detail { font-size: 14px; color: var(--text-sub); margin-top: 6px; white-space: pre-wrap;
  border-left: 2px solid var(--border); padding-left: 10px; }
.bt-rep-meta { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.bt-rep-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bt-rep-actions .btn-sm { padding: 6px 10px; font-size: 13px; }

.bt-au-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--card); }
.bt-au-head { display: flex; gap: 14px; align-items: flex-start; }
.bt-au-name { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--text); }
.bt-au-state { margin: 12px 0 6px; font-size: 14px; color: var(--text-sub); }
.bt-au-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-au-history { display: flex; flex-direction: column; gap: 4px; }
.bt-au-hrow { font-size: 13px; color: var(--text-sub); }
.bt-au-hrow span { color: var(--text-muted); }