/*
 * The Grainpath theme (2026-10-18): the house look, and the default for anybody
 * who has not chosen a theme. A forest green menu with soft waves, cream pages
 * on a sage background, softer panels, DM Sans (the "Grainpath" font set), and
 * the app dock as large tinted tiles (Nick's dock design).
 *
 * Every rule is under html[data-theme="grainpath"], and the file loads after
 * core.css and every module's stylesheet, so the other ten themes are exactly
 * as they were. The menu turns dark on a desktop only: the phone keeps today's
 * top bar until the phone step of the redesign.
 */

html[data-theme="grainpath"]{
  --ink:#1F2E27; --ink-soft:#4A5C52;
  --paper:#F7F4EC; --paper-raised:#FFFFFF;
  --line:#E4DFD3; --line-strong:#CFC8B8;
  --sage:#6F8A76; --sage-soft:#E3EAE0; --sage-ink:#2F4A3A;
  --brick:#B5533F; --brick-soft:#F6E2DC; --brick-ink:#8F3B2A;
  --mustard:#B07A33; --mustard-soft:#F2E7D6; --mustard-ink:#6E4A17;
  --text-muted:#7E8880; --subtle-bg:#FBFAF5; --radius:8px;
  --chart-a:#7E967F;
  /* Every bar the same muted sage, this period's a shade deeper; rounder tops. */
  --chart-a-soft:#B7C4B6;
  --chart-bar-radius:6;
  /* Activity as soft waves of sage and sand, not bars. */
  --act-chart:area;
  --act-email:#8FAE9A; --act-call:#557560; --act-visit:#C6A56A; --act-note:#D6CFBE;
  /* The theme's own colours. */
  --gp-bg:#D9DFD3;
  --gp-forest:#2E4A3D; --gp-pill:#5D7766;
  --gp-on-forest:#DCE5DC; --gp-on-forest-muted:#9DB2A3;
  --gp-card-shadow:0 1px 2px rgba(46,74,61,0.06), 0 4px 16px rgba(46,74,61,0.07);
}
/* Softer panels: no hairline, rounder, a shadow. Only on Framed, so a person who
   chose Flat, Ruled or Compact under Appearance still gets what they chose. */
html[data-theme="grainpath"][data-blocks="framed"]{
  --panel-border:1px solid transparent;
  --panel-radius:14px;
  --panel-shadow:var(--gp-card-shadow);
}

/* The sage background with soft shapes, behind everything. */
html[data-theme="grainpath"] body{
  background-color:var(--gp-bg);
  background-image:
    radial-gradient(50% 40% at 8% 12%, rgba(255,255,255,0.35), transparent 70%),
    radial-gradient(45% 45% at 96% 92%, rgba(160,182,156,0.45), transparent 70%),
    radial-gradient(35% 30% at 86% 8%, rgba(200,212,192,0.6), transparent 70%),
    radial-gradient(40% 35% at 30% 100%, rgba(185,200,178,0.45), transparent 70%);
  background-attachment:fixed;
}
html[data-theme="grainpath"] .page-title{font-weight:600;letter-spacing:-0.015em;}
/* A phone keeps today's top bar for now; its page is the cream sheet edge to edge. */
@media (max-width:820px){ html[data-theme="grainpath"] .main{background:var(--paper);} }
html[data-theme="grainpath"] .topbar-add{background:var(--gp-forest);color:#fff;}
html[data-theme="grainpath"] .topbar .gs-box{border-radius:999px;background:var(--paper-raised);border-color:var(--line);}
html[data-theme="grainpath"] .gs-box:focus-within{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft);}

/* The stat strip as separate cards. */
html[data-theme="grainpath"][data-blocks="framed"] .dash-strip{background:transparent;border:0;box-shadow:none;overflow:visible;gap:12px;}
html[data-theme="grainpath"][data-blocks="framed"] .dash-strip .dash-stat{background:var(--paper-raised);border:0;border-radius:14px;box-shadow:var(--gp-card-shadow);}

/* ------------------------------------------------------------------ desktop */
@media (min-width:821px){
  /* The page floats on the sage: the menu and the cream sheet as one card. */
  /* Edge to edge (Nick, 2026-10-19): the menu, the page and the dock meet the window,
     no sage margin or rounded corners around them. */
  html[data-theme="grainpath"] .app{padding:0;}
  html[data-theme="grainpath"] .main{background:var(--paper);border-radius:0;min-height:100vh;}

  html[data-theme="grainpath"] .rail{
    top:0; height:100vh;
    background-color:var(--gp-forest); color:var(--gp-on-forest);
    border-right:0; border-radius:0;
    /* Nick's topographic art (grainpath/img/topo-side-bar.png, as rail-topo.webp at
       full size so it stays sharp on a high-resolution screen). It is pinned to the window rather than to the menu's content,
       the full height of the screen with its middle under the menu, so the contour
       lines stay still while the menu scrolls, and the sticky top below carries the
       same picture in the same place: it hides what scrolls under it without a seam. */
    --gp-rail-art:url("../brand/rail-topo.webp");
    --gp-rail-x:calc(110px - 28.14vh);
    background-color:#14281F;
    background-image:var(--gp-rail-art);
    background-repeat:no-repeat; background-attachment:fixed;
    background-size:auto 100vh; background-position:var(--gp-rail-x) 0;
  }
  html[data-theme="grainpath"].rail-collapsed .rail{--gp-rail-x:calc(32px - 28.14vh);}
  /* The sticky top of the menu carries the same picture at every desktop width (it sat
     in the 1280px block, so between 821 and 1279px the corner showed plain cream). */
  html[data-theme="grainpath"] .rail > .brand{background:#14281F var(--gp-rail-art) var(--gp-rail-x) 0 / auto 100vh no-repeat fixed;}
  html[data-theme="grainpath"] .rail .brand-mark{color:#fff;}
  html[data-theme="grainpath"] .rail .brand-byline{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail .brand:has(.brand-logo-on-dark) .brand-logo:not(.brand-logo-on-dark){display:none;}
  html[data-theme="grainpath"] .rail .brand-logo-on-dark{display:inline-block;}
  html[data-theme="grainpath"] .rail .brand-bell,
  html[data-theme="grainpath"] .rail .rail-toggle{color:var(--gp-on-forest);}
  html[data-theme="grainpath"] .rail .brand-bell:hover,
  html[data-theme="grainpath"] .rail .rail-toggle:hover{color:#fff;background:rgba(255,255,255,0.08);border-color:transparent;}

  html[data-theme="grainpath"] .rail .tab{color:var(--gp-on-forest);border-color:transparent;border-radius:10px;}
  html[data-theme="grainpath"] .rail .tab:hover{background:rgba(255,255,255,0.07);color:#fff;}
  html[data-theme="grainpath"] .rail .tab.active{background:var(--gp-pill);color:#fff;border-color:transparent;font-weight:500;}
  html[data-theme="grainpath"] .rail .tab .count,
  html[data-theme="grainpath"] .rail .tab.active .count{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"]:not(.rail-collapsed) .rail .nav-category-head{
    --cat-tint:transparent; --cat-ink:var(--gp-on-forest-muted);
    background:transparent; color:var(--gp-on-forest-muted); letter-spacing:0.14em; font-size:10px;
  }
  html[data-theme="grainpath"] .rail .nav-category-head:hover{background:rgba(255,255,255,0.05);color:var(--gp-on-forest);box-shadow:none;}
  html[data-theme="grainpath"].rail-collapsed .rail .nav-category-head{background:var(--cat-accent, rgba(255,255,255,0.25));opacity:0.5;}
  html[data-theme="grainpath"].rail-collapsed .rail .tab .count{background:var(--gp-pill);border-color:var(--gp-forest);color:#fff;}

  html[data-theme="grainpath"] .rail-foot{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail .acct-btn{color:#fff;}
  html[data-theme="grainpath"] .rail .acct-btn:hover,
  html[data-theme="grainpath"] .rail .acct-btn[aria-expanded="true"]{background:rgba(255,255,255,0.08);border-color:transparent;}
  html[data-theme="grainpath"] .rail .acct-av{background:var(--gp-pill);color:#fff;}
  html[data-theme="grainpath"] .rail .acct-btn .acct-sel{color:var(--gp-on-forest-muted);}
}

/* ------------------------------------------------------------- the app dock */
@media (min-width:1280px){
  html[data-theme="grainpath"] .app{grid-template-columns:220px minmax(0,1fr) 144px;}
  html[data-theme="grainpath"].rail-collapsed .app{grid-template-columns:64px minmax(0,1fr) 144px;}
  html[data-theme="grainpath"].dock-hidden .app{grid-template-columns:220px minmax(0,1fr) 0px;}
  html[data-theme="grainpath"].rail-collapsed.dock-hidden .app{grid-template-columns:64px minmax(0,1fr) 0px;}
  html[data-theme="grainpath"] .main{border-radius:0;}

  /* Beside the page to the window's edge, a hairline between. */
  html[data-theme="grainpath"] .dock{background:#F4F1E8;border-left:1px solid var(--line);padding-left:0;}
  html[data-theme="grainpath"] .dock-inner{
    width:143px; top:0; height:100vh; max-height:none; padding:16px 10px;
    background:transparent; border:0; border-radius:0; box-shadow:none;
  }
}
html[data-theme="grainpath"] .dock-head-row{align-items:flex-end;}
html[data-theme="grainpath"] .dock-heading{
  font-family:var(--font-ui); font-size:13px; letter-spacing:0.02em; text-transform:none; color:var(--ink);
  padding:0 18px 6px 2px; border-bottom:1px solid var(--line-strong); margin-bottom:2px;
}
html[data-theme="grainpath"] .dock-head-tools{gap:6px;}
html[data-theme="grainpath"] .dock-edit,
html[data-theme="grainpath"] .dock-toggle{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,0.65);color:var(--ink);}
html[data-theme="grainpath"] .dock-edit:hover,
html[data-theme="grainpath"] .dock-toggle:hover{background:#fff;border-color:var(--line-strong);}
html[data-theme="grainpath"] .dock-edit .ic,
html[data-theme="grainpath"] .dock-toggle .ic{width:16px;height:16px;}
html[data-theme="grainpath"] .dock-done{border-radius:11px;padding:6px 12px;}
html[data-theme="grainpath"] .dock-grid{gap:12px;}
html[data-theme="grainpath"] .dock-recent{border-top-color:var(--line);}

/* The tiles: the label inside a large rounded square, washed in its group's colour. */
html[data-theme="grainpath"] .dock-tile{
  position:relative; width:100%; aspect-ratio:1 / 1; padding:0; gap:4px; justify-content:center;
  border-radius:16px; border:1px solid rgba(255,255,255,0.8);
  background:var(--gp-tile, #FBFAF6); color:var(--gp-tile-ink, var(--ink));
  box-shadow:0 1px 2px rgba(46,74,61,0.05), 0 3px 10px rgba(46,74,61,0.07);
}
html[data-theme="grainpath"] .dock-tile:hover{color:var(--gp-tile-ink, var(--ink));filter:brightness(1.02);box-shadow:0 2px 4px rgba(46,74,61,0.07), 0 6px 16px rgba(46,74,61,0.10);}
html[data-theme="grainpath"] .dock-icon,
html[data-theme="grainpath"] .dock-tile:hover .dock-icon{position:static;width:auto;height:auto;background:none;border:0;color:inherit;}
html[data-theme="grainpath"] .dock-icon .ic{width:20px;height:20px;stroke-width:1.7;}
html[data-theme="grainpath"] .dock-label{font-size:10px;color:inherit;max-width:92%;}
html[data-theme="grainpath"] .dock-badge{top:3px;right:3px;min-width:18px;height:18px;line-height:14px;font-size:10px;padding:0 4px;border:2px solid #fff;}
html[data-theme="grainpath"] .dock-tile:has(.dock-add){background:transparent;border:1.5px dashed var(--line-strong);box-shadow:none;color:var(--ink-soft);}
html[data-theme="grainpath"] .dock-x,
html[data-theme="grainpath"] .dock-pin{top:-6px;right:-6px;left:auto;width:24px;height:24px;background:#fff;}

html[data-theme="grainpath"] .dock-cell[data-tint="sage"]{--gp-tile-ink:var(--sage-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(160,182,160,0.55), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(196,212,190,0.65), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #EDF1EA;}
html[data-theme="grainpath"] .dock-cell[data-tint="mustard"]{--gp-tile-ink:var(--mustard-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(226,196,152,0.55), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(240,222,196,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #F6EEE2;}
html[data-theme="grainpath"] .dock-cell[data-tint="violet"]{--gp-tile-ink:var(--violet-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(190,188,226,0.55), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(214,212,238,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #EEEDF6;}
html[data-theme="grainpath"] .dock-cell[data-tint="blue"]{--gp-tile-ink:var(--blue-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(170,195,214,0.5), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(206,222,233,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #ECF1F5;}
html[data-theme="grainpath"] .dock-cell[data-tint="brick"]{--gp-tile-ink:var(--brick-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(228,178,165,0.5), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(240,212,204,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #F7ECE8;}
html[data-theme="grainpath"] .dock-cell[data-tint="plum"]{--gp-tile-ink:var(--plum-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(206,170,192,0.45), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(232,212,224,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #F4ECF1;}
html[data-theme="grainpath"] .dock-cell[data-tint="teal"]{--gp-tile-ink:var(--teal-ink);--gp-tile:
  radial-gradient(60% 50% at 18% 22%, rgba(160,205,198,0.5), transparent 72%),
  radial-gradient(70% 55% at 88% 86%, rgba(200,228,223,0.7), transparent 70%),
  radial-gradient(40% 35% at 78% 18%, rgba(255,255,255,0.7), transparent 70%), #EAF3F1;}

/* ------------------------------------------------- step 2: charts and lists */
/* Text switches (You / Team / Compare) as underlined tabs; the chart-type icons stay a pair of buttons. */
html[data-theme="grainpath"] .dp-seg:not(.dp-chart-seg){border:0;border-radius:0;overflow:visible;gap:2px;}
html[data-theme="grainpath"] .dp-seg:not(.dp-chart-seg) .dp-seg-btn{border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 8px;color:var(--text-muted);background:transparent;}
html[data-theme="grainpath"] .dp-seg:not(.dp-chart-seg) .dp-seg-btn:hover{color:var(--ink);}
html[data-theme="grainpath"] .dp-seg:not(.dp-chart-seg) .dp-seg-btn.on{color:var(--ink);font-weight:600;border-bottom-color:var(--gp-forest);background:transparent;}
html[data-theme="grainpath"] .dp-chart-seg{border-color:var(--line);border-radius:10px;}
html[data-theme="grainpath"] .dp-range{border-color:var(--line);border-radius:10px;}
html[data-theme="grainpath"] .dp-head{border-bottom-color:var(--line);}

/* Activity: the waves first, the figures in one row beneath (the reference). */
html[data-theme="grainpath"] .dp-activity .act-figs{order:1;grid-template-columns:repeat(5, minmax(0,1fr));border-top:1px solid var(--line);border-bottom:0;margin-top:4px;}
html[data-theme="grainpath"] .dp-activity .act-fig{padding:10px 12px 12px;border:0 !important;}
html[data-theme="grainpath"] .dp-activity .act-fig + .act-fig{border-left:1px solid var(--line) !important;}
html[data-theme="grainpath"] .dp-activity .act-fig-value{font-size:17px;white-space:nowrap;}
html[data-theme="grainpath"] .dp-activity .act-fig-sub{font-size:10.5px;}
@container (max-width:380px){
  html[data-theme="grainpath"] .dp-activity .act-figs{grid-template-columns:repeat(3, minmax(0,1fr));}
  html[data-theme="grainpath"] .dp-activity .act-fig:nth-child(4){border-left:0 !important;}
}

/* The cadence step's Log as a round play button. */
html[data-theme="grainpath"] .cad-go{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;}
html[data-theme="grainpath"] .cad-go .cad-go-ic{display:block;width:12px;height:12px;margin-left:2px;}
html[data-theme="grainpath"] .cad-go .cad-go-text{display:none;}

/* Pills on a panel's header (11 overdue) as soft rounded tags. */
html[data-theme="grainpath"] .dp-head .pill, html[data-theme="grainpath"] .dp-pill{border-radius:999px;}
/* ------------------------------------------------------- step 3: the phone */
@media (max-width:820px){
  /* The tab bar along the bottom, above the menu sheet so More also closes it. */
  html[data-theme="grainpath"] .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--paper-raised); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(46,74,61,0.06);
  }
  html[data-theme="grainpath"] .tabbar-item{
    flex:1; min-width:0; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:0; background:none; font:inherit; font-size:11px; color:var(--text-muted); cursor:pointer; padding:2px 0;
  }
  html[data-theme="grainpath"] .tabbar-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html[data-theme="grainpath"] .tabbar-item .ic{width:22px;height:22px;}
  html[data-theme="grainpath"] .tabbar-item.on{color:var(--gp-forest);font-weight:600;}
  html[data-theme="grainpath"] .main{padding-bottom:96px;}
  html[data-theme="grainpath"].m-menu-open body{overflow:hidden;}

  /* The top bar, menu closed: the mark and name on the left, the bell on the right. */
  html[data-theme="grainpath"] .rail.menu-collapsed{
    flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 16px; background:var(--paper); border-bottom:1px solid var(--line);
  }
  html[data-theme="grainpath"] .rail.menu-collapsed .brand{display:flex;align-items:center;gap:8px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .brand-mark{font-size:18px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .tabs{display:flex;width:auto;margin-left:auto;justify-content:flex-end;}
  html[data-theme="grainpath"] .rail-m-account, html[data-theme="grainpath"] .rail-m-menu, html[data-theme="grainpath"] .rail-m-logout{font-family:var(--font-ui);}
  html[data-theme="grainpath"] .rail.menu-collapsed .rail-m-menu,
  html[data-theme="grainpath"] .rail.menu-collapsed #rail-m-user,
  html[data-theme="grainpath"] .rail.menu-collapsed .rail-m-icon:not(#rail-m-bell),
  html[data-theme="grainpath"] .rail.menu-collapsed .rail-m-logout{display:none;}
  html[data-theme="grainpath"] .rail.menu-collapsed .rail-m-account{gap:0;}

  /* More: the menu as a full-screen sheet over Nick's topographic art, the same
     picture as the desktop menu. It covers the screen and holds still while the
     sheet's own content scrolls over it. */
  html[data-theme="grainpath"] .rail:not(.menu-collapsed){
    position:fixed; inset:0; z-index:80; max-height:none; overflow-y:auto; overscroll-behavior:contain;
    padding:16px 16px calc(96px + env(safe-area-inset-bottom));
    background:#14281F url("../brand/rail-topo.webp") center bottom / cover no-repeat; color:var(--gp-on-forest);
  }
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .brand-mark{color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .brand-byline{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .brand:has(.brand-logo-on-dark) .brand-logo:not(.brand-logo-on-dark){display:none;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .brand-logo-on-dark{display:inline-block;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-account{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-menu{background:rgba(255,255,255,0.1);border-color:transparent;color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-icon,
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-logout{color:var(--gp-on-forest);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-search{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14);color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-search::placeholder{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-group-head{color:var(--gp-on-forest-muted);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-quick-cell{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.1);color:var(--gp-on-forest);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .rail-m-quick-cell.active{background:var(--gp-pill);color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .tabs > .tab,
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .nav-category-body .tab{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.1);color:var(--gp-on-forest);}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .tabs > .tab.active,
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .nav-category-body .tab.active,
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .tabs > .tab[data-view="dashboard"].active{background:var(--gp-pill);border-color:transparent;color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .tabs > .tab[data-view="dashboard"]{background:rgba(255,255,255,0.1);border-color:transparent;color:#fff;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .nav-category-head{
    --cat-tint:rgba(255,255,255,0.05); --cat-ink:var(--gp-on-forest);
    background:rgba(255,255,255,0.05); color:var(--gp-on-forest);
  }
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .tab .count{color:var(--gp-on-forest-muted);}
}
/* Step 3, after Nick's look: search and + in the phone's top bar, and the dashboard's
   three quick buttons gone on a phone (the + offers the same actions; the tab bar stays). */
@media (max-width:820px){
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar{flex:1;min-width:0;margin:0;gap:8px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar .gs-wrap{flex:1;min-width:0;width:auto;}
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar .gs-box{padding:7px 12px;min-height:38px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar .gs-input{font-size:16px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar .gs-panel{position:fixed;left:10px;right:10px;top:62px;width:auto;}
  html[data-theme="grainpath"] .rail.menu-collapsed .topbar-add{width:38px;height:38px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .tabs{flex:none;margin-left:0;}
  /* No room for the name beside the box: the mark alone, or the name alone for a workspace with no mark. */
  html[data-theme="grainpath"] .rail.menu-collapsed .brand:has(.brand-logo) .brand-lockup{display:none;}
  html[data-theme="grainpath"] .rail.menu-collapsed .brand-byline{display:none;}
  html[data-theme="grainpath"] .rail.menu-collapsed .brand-mark{font-size:16px;}
  html[data-theme="grainpath"] .rail.menu-collapsed .brand-logo{height:30px;}
  html[data-theme="grainpath"] .rail:not(.menu-collapsed) .topbar{display:none;}
  html[data-theme="grainpath"] .rail.menu-collapsed{position:sticky;top:0;z-index:60;}
}
@media (max-width:759px){
  html[data-theme="grainpath"] .dashboard-head .page-head-actions > .btn[data-key]{display:none;}
}/* On a phone, with the quick buttons gone, View and Customize sit beside the greeting
   rather than on a line of their own (Nick, 2026-10-18). Not while customising: Done,
   Cancel and Reset need the room of their own line. */
@media (max-width:759px){
  html[data-theme="grainpath"] .dashboard-head:has(.page-head-actions:not(:has(> .btn:not(.icon-only):not([data-key])))){flex-wrap:nowrap;align-items:flex-start;gap:10px;}
  html[data-theme="grainpath"] .dashboard-head .page-head-actions:not(:has(> .btn:not(.icon-only):not([data-key]))){width:auto;flex:none;margin-left:auto;padding-top:2px;}
  html[data-theme="grainpath"] .dashboard-head > div:first-child{min-width:0;}
}

/* ------------------------------------------------------ step 4: signing in */
html[data-theme="grainpath"] .login-screen{background:transparent;padding:24px 16px;}
html[data-theme="grainpath"] .login-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); max-width:780px; padding:0; overflow:hidden;
  background:var(--paper); border:1px solid rgba(255,255,255,0.7); border-radius:20px;
  box-shadow:0 2px 6px rgba(46,74,61,0.06), 0 16px 40px rgba(46,74,61,0.12);
}
html[data-theme="grainpath"] .login-body{padding:44px 40px 36px;}
html[data-theme="grainpath"] .login-head{text-align:center;margin-bottom:22px;}
html[data-theme="grainpath"] .login-card .brand-logo{margin:0 auto 10px !important;max-height:52px;}
html[data-theme="grainpath"] .login-card .brand-mark{font-size:26px;font-weight:600;letter-spacing:-0.01em;}
html[data-theme="grainpath"] .login-card .brand-byline{margin:4px 0 0;}
html[data-theme="grainpath"] .login-card .login-sub{font-size:13px;margin:0 0 14px;}
html[data-theme="grainpath"] .login-card input{border-radius:10px;background:var(--paper-raised);}
html[data-theme="grainpath"] .login-card .btn{border-radius:10px;min-height:42px;background:var(--gp-forest);border-color:var(--gp-forest);}
html[data-theme="grainpath"] .login-art{
  display:block; min-height:420px;
  /* Nick's topographic waves (grainpath/img/topo-waves-bg.png), cut inside its frame. */
  background:#647760 url("../brand/login-art.webp") 85% 55% / cover no-repeat; order:2;
}
@media (max-width:700px){
  html[data-theme="grainpath"] .login-card{grid-template-columns:minmax(0,1fr);max-width:420px;}
  html[data-theme="grainpath"] .login-art{min-height:150px;order:-1;background-image:url("../brand/login-art-band.webp");background-position:center;}
  html[data-theme="grainpath"] .login-body{padding:28px 24px 26px;}
}
/* A smaller dock (Nick, 2026-10-19): tiles about 74px square, two across. */
html[data-theme="grainpath"] .dock-grid{gap:8px;}
html[data-theme="grainpath"] .dock-edit .ic, html[data-theme="grainpath"] .dock-toggle .ic{width:14px;height:14px;}
html[data-theme="grainpath"] .dock-heading{padding-right:8px;}
html[data-theme="grainpath"] .dock-x, html[data-theme="grainpath"] .dock-pin{top:-5px;right:-5px;width:20px;height:20px;}
html[data-theme="grainpath"] .dock-inner{gap:10px;}
/* The dock a quarter narrower (Nick, 2026-10-19): 144px, tiles about 57px, two across. */
html[data-theme="grainpath"] .dock-grid{gap:6px;}
html[data-theme="grainpath"] .dock-tile{border-radius:14px;gap:3px;}
html[data-theme="grainpath"] .dock-icon .ic{width:18px;height:18px;}
html[data-theme="grainpath"] .dock-label{font-size:9px;line-height:1.15;max-width:98%;letter-spacing:-0.01em;}
html[data-theme="grainpath"] .dock-badge{top:2px;right:2px;min-width:16px;height:16px;line-height:12px;font-size:9px;padding:0 3px;}
html[data-theme="grainpath"] .dock-heading{font-size:12px;padding-right:4px;}
html[data-theme="grainpath"] .dock-head-tools{gap:3px;}
html[data-theme="grainpath"] .dock-edit, html[data-theme="grainpath"] .dock-toggle{width:22px;height:22px;border-radius:7px;}
html[data-theme="grainpath"] .dock-edit .ic, html[data-theme="grainpath"] .dock-toggle .ic{width:12px;height:12px;}
html[data-theme="grainpath"] .dock-done{padding:3px 8px;font-size:10.5px;}
html[data-theme="grainpath"] .dock-x, html[data-theme="grainpath"] .dock-pin{top:-4px;right:-4px;width:18px;height:18px;}


/* ------------------------------------------------------------------ pop-ups */
/* Nick's reference (2026-10-19): cream, his topographic art in the top right
   corner (grainpath/img/topo-pop-up.png as modal-topo.webp, cut to its waves),
   the static node beside the title, round corners and a soft shadow, and
   every box the same 40px with its label small above it. */
/* No backdrop blur: it re-blurred the whole page, charts and all, on every frame
   while a pop-up was open (typing ran at about 24 frames a second, 60 without).
   A slightly deeper shade does the same job of pushing the page back. */
html[data-theme="grainpath"] .overlay{background:rgba(20,40,31,.46);}
html[data-theme="grainpath"] .modal{
  background:#FEFCF8 url("../brand/modal-topo.webp") right top / min(560px, 70%) auto no-repeat;
  border:0; border-radius:18px; padding:26px 30px 24px;
  box-shadow:0 24px 60px rgba(20,40,31,.22), 0 2px 6px rgba(20,40,31,.08);
}
html[data-theme="grainpath"] .modal > .modal-actions{margin:22px -30px -24px;padding:14px 30px 20px;border-radius:0 0 18px 18px;}
html[data-theme="grainpath"] .modal.is-tall > .modal-actions{background:#FEFCF8;}
html[data-theme="grainpath"] .modal > h2:first-child,
html[data-theme="grainpath"] .modal > .modal-header-row:first-child > h2:first-child,
html[data-theme="grainpath"] .modal > .form-grid:first-child > h2:first-child{display:flex;align-items:center;gap:12px;font-size:22px;margin-bottom:22px;}
html[data-theme="grainpath"] .modal > .modal-header-row:first-child > h2:first-child{margin-bottom:0;}
html[data-theme="grainpath"] .modal > .modal-header-row:first-child > h2:first-child::before,
html[data-theme="grainpath"] .modal > .form-grid:first-child > h2:first-child::before,
html[data-theme="grainpath"] .modal > h2:first-child::before{content:"";flex:none;width:34px;height:34px;background:url("../brand/node.png") center / contain no-repeat;}
html[data-theme="grainpath"] .modal-actions .btn{min-height:40px;padding:0 18px;border-radius:10px;}
html[data-theme="grainpath"] .modal .field{margin-bottom:16px;}
html[data-theme="grainpath"] .modal .field > label{font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;}
html[data-theme="grainpath"] .modal input[type=text], html[data-theme="grainpath"] .modal input[type=number],
html[data-theme="grainpath"] .modal input[type=date], html[data-theme="grainpath"] .modal input[type=time],
html[data-theme="grainpath"] .modal input[type=email], html[data-theme="grainpath"] .modal input[type=tel],
html[data-theme="grainpath"] .modal input[type=url], html[data-theme="grainpath"] .modal select:not([multiple]),
html[data-theme="grainpath"] .modal .combo-input, html[data-theme="grainpath"] .modal .price-wrap{
  height:40px; font-size:14px; border-radius:10px; border-color:#DCD6C8; background-color:#fff; box-sizing:border-box;
}
html[data-theme="grainpath"] .modal .price-wrap input{height:38px;}
html[data-theme="grainpath"] .modal textarea{font-size:14px;border-radius:10px;border-color:#DCD6C8;background:#fff;}
html[data-theme="grainpath"] .modal .field-row{gap:16px;}
@media (max-width:600px){
  html[data-theme="grainpath"] .modal{padding:28px 20px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;}
  html[data-theme="grainpath"] .modal > .modal-actions{margin:18px -20px calc(-20px - env(safe-area-inset-bottom));padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-radius:0;}
  html[data-theme="grainpath"] .modal .field-row{gap:0;}
}/* Line editor headings in the app's own type, not monospace (the audit). */
html[data-theme="grainpath"] .line-item-row.header{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;}/* Number boxes in Grainpath: soft sage buttons, the pop-up's 40px box. */
html[data-theme="grainpath"] .num-step{border-color:#DCD6C8;border-radius:10px;background:#fff;padding:0 4px;}
html[data-theme="grainpath"] .num-step:focus-within{border-color:var(--gp-pill);box-shadow:0 0 0 3px rgba(93,119,102,.18);}
html[data-theme="grainpath"] .modal .num-step{height:40px;}
html[data-theme="grainpath"] .num-step-btn{width:30px;height:30px;border-radius:8px;background:#E9EEE6;color:var(--gp-forest);}
html[data-theme="grainpath"] .num-step-btn:hover{background:#DCE5D9;}html[data-theme="grainpath"] .back-btn{border-color:#DCD6C8;background:#fff;}
html[data-theme="grainpath"] .back-btn:hover{background:#E9EEE6;border-color:#C9D3C6;}

/* ------------------------------------------------- the module wheel (2026-10-21)
   The button in the middle of the phone's tab bar (Nick's GTA idea, the R2 look): dark
   slices over the blurred page, a white rim on the one under the thumb, the hub naming
   it and what waits there. A part's page (F2): the house green with Nick's contours, a
   stripe in the part's own colour, what is waiting as chips, then a row per screen. */
@media (max-width:820px){
  html[data-theme="grainpath"] .tabbar-wheel{
    flex:none; width:58px; height:58px; margin:-26px 4px 0; align-self:flex-start; border-radius:50%;
    border:4px solid var(--paper-raised); background:var(--gp-forest); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
    box-shadow:0 4px 14px rgba(20,40,31,.28); touch-action:none; -webkit-tap-highlight-color:transparent;
    transition:background .2s ease;
  }
  html[data-theme="grainpath"] .tabbar-wheel .ic{width:26px;height:26px;}
  html[data-theme="grainpath"] .tabbar-wheel.open{background:var(--gp-pill);}
  html[data-theme="grainpath"] .tabbar-wheel.open .ic{width:22px;height:22px;}
  html[data-theme="grainpath"] .tabbar-wheel:focus-visible{outline:3px solid var(--gp-pill);outline-offset:2px;}
  html[data-theme="grainpath"].m-wheel-open body{overflow:hidden;}

  html[data-theme="grainpath"] .mwheel{
    position:fixed; left:0; right:0; top:0; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:85;
    background:rgba(6,12,9,.6); -webkit-backdrop-filter:blur(7px) saturate(.8); backdrop-filter:blur(7px) saturate(.8);
    opacity:0; transition:opacity .16s ease; touch-action:none; user-select:none; -webkit-user-select:none; overflow:hidden;
  }
  html[data-theme="grainpath"] .mwheel.show{opacity:1;}
  html[data-theme="grainpath"] .mwheel-svg{position:absolute;left:0;top:0;overflow:visible;}
  html[data-theme="grainpath"] .mwheel-slice{fill:rgba(16,24,20,.92);stroke:rgba(0,0,0,.55);stroke-width:1;transition:fill .12s ease;}
  html[data-theme="grainpath"] .mwheel-slice.on{fill:rgba(255,255,255,.2);}
  html[data-theme="grainpath"] .mwheel-rim{fill:#fff;opacity:0;transition:opacity .12s ease;}
  html[data-theme="grainpath"] .mwheel-rim.on{opacity:1;}
  html[data-theme="grainpath"] .mwheel-label{
    position:absolute; transform:translate(-50%,-50%); width:80px; padding:4px 2px; border:0; border-radius:10px; background:none;
    display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none;
    color:#B7C1BB; font:inherit; font-size:11px; line-height:1.15; transition:transform .12s ease, color .12s ease;
  }
  html[data-theme="grainpath"] .mwheel-label .ic{width:22px;height:22px;}
  html[data-theme="grainpath"] .mwheel-label span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html[data-theme="grainpath"] .mwheel-label.on{color:#fff;transform:translate(-50%,-50%) scale(1.1);}
  html[data-theme="grainpath"] .mwheel-label.on .ic{color:color-mix(in srgb, var(--mw-tint) 45%, #fff);}
  html[data-theme="grainpath"] .mwheel-label:focus-visible{outline:2px solid rgba(255,255,255,.7);}
  html[data-theme="grainpath"] .mwheel-dot{position:absolute;top:1px;right:22px;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb, var(--mw-tint) 55%, #fff);box-shadow:0 0 0 2px rgba(16,24,20,.92);}
  html[data-theme="grainpath"] .mwheel-hub{
    position:absolute; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff;
    background:rgba(10,16,13,.45);
  }
  html[data-theme="grainpath"] .mwheel-hub-name{font-family:var(--font-display);font-size:17px;line-height:1.15;max-width:92%;}
  html[data-theme="grainpath"] .mwheel-hub-rule{width:52px;height:1px;background:rgba(255,255,255,.4);margin:6px 0;}
  html[data-theme="grainpath"] .mwheel-hub-sub{font-size:12px;line-height:1.3;max-width:86%;color:color-mix(in srgb, var(--mw-tint) 40%, #fff);}
  html[data-theme="grainpath"] .mwheel-hint{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.55);pointer-events:none;}

  html[data-theme="grainpath"] .mmod{
    position:fixed; left:0; right:0; top:0; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:86;
    background:var(--paper); overflow-y:auto; overscroll-behavior:contain; display:none;
    transition:clip-path .38s cubic-bezier(.2,.8,.2,1);
  }
  html[data-theme="grainpath"] .mmod.show{display:block;}
  html[data-theme="grainpath"] .mmod-head{
    background:#14281F url("../brand/rail-topo.webp") center 35% / cover no-repeat; color:#fff;
    padding:calc(16px + env(safe-area-inset-top)) 18px 18px;
  }
  html[data-theme="grainpath"] .mmod-top{display:flex;justify-content:space-between;align-items:center;}
  html[data-theme="grainpath"] .mmod-back{width:40px;height:40px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  html[data-theme="grainpath"] .mmod-back .ic{width:20px;height:20px;}
  html[data-theme="grainpath"] .mmod-dot{width:12px;height:12px;border-radius:50%;background:var(--mw-tint);box-shadow:0 0 0 3px rgba(255,255,255,.16);}
  html[data-theme="grainpath"] .mmod-title{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.1;margin:14px 0 12px;color:#fff;}
  html[data-theme="grainpath"] .mmod-chips{display:flex;flex-wrap:wrap;gap:7px;}
  html[data-theme="grainpath"] .mmod-chip{background:rgba(255,255,255,.13);border-radius:999px;padding:6px 11px;font-size:13px;color:#EAF0EC;}
  html[data-theme="grainpath"] .mmod-chip b{font-weight:600;color:#fff;}
  html[data-theme="grainpath"] .mmod-stripe{height:5px;background:var(--mw-tint);}
  html[data-theme="grainpath"] .mmod-find{display:flex;align-items:center;gap:8px;margin:12px 14px 4px;padding:0 12px;background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;color:var(--text-muted);}
  html[data-theme="grainpath"] .mmod-find .ic{width:18px;height:18px;flex:none;}
  html[data-theme="grainpath"] .mmod-find input{flex:1;min-width:0;border:0;background:none;min-height:44px;font-size:16px;padding:0;outline:none;box-shadow:none;color:var(--ink);}
  html[data-theme="grainpath"] .mmod-rows{padding:8px 0 24px;}
  html[data-theme="grainpath"] .mmod-row{
    display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 18px; margin:0;
    border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--paper-raised);
    color:var(--ink); font:inherit; font-size:15.5px; text-align:left; cursor:pointer;
  }
  html[data-theme="grainpath"] .mmod-row:active{background:color-mix(in srgb, var(--mw-tint) 8%, var(--paper-raised));}
  html[data-theme="grainpath"] .mmod-row.here{box-shadow:inset 4px 0 0 var(--mw-tint);font-weight:600;}
  html[data-theme="grainpath"] .mmod-ic{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--mw-tint) 15%, var(--paper-raised));color:var(--mw-tint);}
  html[data-theme="grainpath"] .mmod-ic .ic{width:19px;height:19px;}
  html[data-theme="grainpath"] .mmod-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html[data-theme="grainpath"] .mmod-count{min-width:24px;height:24px;border-radius:12px;padding:0 8px;background:color-mix(in srgb, var(--mw-tint) 14%, var(--paper-raised));color:color-mix(in srgb, var(--mw-tint) 80%, var(--ink));font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;}
  html[data-theme="grainpath"] .mmod-chev{width:16px;height:16px;color:var(--text-muted);transform:rotate(180deg);}
  html[data-theme="grainpath"] .mmod-none{padding:16px 18px;margin:0;color:var(--text-muted);}
  @media (prefers-reduced-motion: reduce){
    html[data-theme="grainpath"] .mwheel, html[data-theme="grainpath"] .mmod, html[data-theme="grainpath"] .mwheel-label{transition:none;}
  }
}