/* Goal Tracker · design-system: DESIGN.md (d3kn Warm Teal, light + dark) */

/* DESIGN.md's one face, Inter, served by the app from static/fonts/
 * (Fontsource's build; LICENSES.md there). It has a latin and a latin-ext
 * file, and a browser fetches only the ones a page's characters need. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-wght-normal.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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-ext-wght-normal.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;
}

/* Tokens, as DESIGN.md § Tokens declares them (the flat frame), plus the
 * roles it names without a token (Health badges, danger text). */
:root {
  color-scheme: light;

  --color-primary:        #14B8A6;
  --color-primary-hover:  #0D9488;
  --color-primary-strong: #0F766E;
  --color-primary-light:  #CCFBF1;
  --color-primary-subtle: #F0FDFA;

  /* One white surface; the sidebar, a hovered row and a group header are the
   * only steps off it (DESIGN.md § Tokens) */
  --color-canvas:        #FFFFFF;
  --color-sidebar:       #F7F7F8;
  --color-sidebar-hover: #EEEEF0;
  --color-sidebar-on:    #E8E8EB; /* the current nav item */
  --color-row-hover:     #F6F6F7;
  --color-group:         #FAFAFB;
  --color-surface:       #FFFFFF;
  --color-surface-hover: var(--color-row-hover);
  --color-surface-alt:   var(--color-sidebar);

  --color-ink:         #1B1D22; /* neutral ink; teal is for actions (DESIGN.md Deviation 2) */
  --color-ink-2:       #33363C;
  --color-ink-muted:   #5F636B;
  --color-ink-inverse: #FFFFFF;

  --color-border:        #EDEDEF; /* hairlines */
  --color-border-strong: #8A8D93; /* inputs and chip edges: 3:1 on every surface (DESIGN.md Deviation 6) */
  --color-focus:         #0D9488; /* Teal 600: 3:1 on every surface (DESIGN.md Deviation 5) */

  --color-success: #2DD4BF;
  --color-warning: #EAB308;
  --color-error:   #EF4444;
  --color-danger-ink: #9A231B; /* destructive text; --color-error is too light for 13–15px text */

  /* Signal chips and tags */
  --color-chip-bg:  #F1F1F3;
  --color-chip-ink: #4A4D54;

  /* Check-in overdue (and Path to Green overdue): a dashed grey chip and banner,
   * never a tag's look (DESIGN.md § Components). The edge is a step darker than the
   * UX Review's #8C939C so it reaches 3:1 on the canvas (DESIGN.md Deviation 9) */
  --checkin-overdue-bg:   #E9EAEC;
  --checkin-overdue-ink:  #3B4048;
  --checkin-overdue-edge: #888F97;

  /* Goal Health: a pill's fill and ink, and the shape a list shows alone
   * (DESIGN.md § Deviations 3) */
  --health-g-bg: #E5F3EA; --health-g-ink: #1C6435; --health-g-mark: #2E7D4F;
  --health-y-bg: #FFF3D1; --health-y-ink: #7A4F00; --health-y-mark: #B27B00;
  --health-r-bg: #FDECEC; --health-r-ink: #A61B1B; --health-r-mark: #C62828;
  /* A Health's fill at half strength: the Check-in page's unpicked Health
   * choices (DESIGN.md § Deviations 3) */
  --health-g-tint: #F2F9F5; --health-y-tint: #FFF9E8; --health-r-tint: #FEF6F6;

  --font-body: "Inter", system-ui, sans-serif;

  /* The type scale at a laptop's sizes; a touch screen raises all but the
   * label at the foot of this file (DESIGN.md § Typography) */
  --text-body:      14px;
  --text-secondary: 13px;
  --text-label:     12px;
  --text-h2:        13px; /* section headings, at 600 */

  --radius-sm: 4px;
  --radius-md: 6px;  /* buttons, inputs, chips, nav items */
  --radius-lg: 10px; /* menus, popovers, the toast, the submit bar */
  --radius-full: 9999px;

  --shadow-pop:        0 25px 50px -12px rgba(19,78,74,.25);

  /* Primary button hover fill: --color-primary-hover is only 3.74:1 under white
   * text in light, so light darkens to Teal 800, 7.58:1 (DESIGN.md § Components) */
  --btn-primary-hover: #115E59;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* Dark: follows the OS unless the page pins a theme. Keep this block and the
 * [data-theme="dark"] block below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-primary:        #14B8A6;
    --color-primary-hover:  #2DD4BF;
    --color-primary-strong: #14B8A6;
    --color-primary-light:  #063530;
    --color-primary-subtle: #031613;
    --color-canvas:        #0F1012;
    --color-sidebar:       #151618;
    --color-sidebar-hover: #1C1D20;
    --color-sidebar-on:    #222327;
    --color-row-hover:     #1A1B1E;
    --color-group:         #17181B;
    --color-surface:       var(--color-sidebar);
    --color-surface-hover: var(--color-sidebar-hover);
    --color-surface-alt:   var(--color-canvas);
    --color-ink:         #EDEEF0;
    --color-ink-2:       #C9CBD0;
    --color-ink-muted:   #9A9EA6;
    --color-ink-inverse: #042F2E;
    --color-border:        #26282C;
    --color-border-strong: #6B6F77;
    --color-focus:         #2DD4BF;
    --color-success: #2DD4BF;
    --color-warning: #EAB308;
    --color-error:   #F87171;
    --color-danger-ink: #F87171;
    --color-chip-bg:  #222327;
    --color-chip-ink: #C9CBD0;
    --checkin-overdue-bg:   #3B4048;
    --checkin-overdue-ink:  #E8E8E8;
    --checkin-overdue-edge: #8C939C;
    --health-g-bg: rgba(34,160,95,.20);  --health-g-ink: #8EDDAF; --health-g-mark: #4CC38A;
    --health-y-bg: rgba(234,179,8,.20);  --health-y-ink: #F5D06B; --health-y-mark: #E0B23A;
    --health-r-bg: rgba(239,68,68,.20);  --health-r-ink: #F8A39B; --health-r-mark: #F07171;
    --health-g-tint: rgba(34,160,95,.10); --health-y-tint: rgba(234,179,8,.10); --health-r-tint: rgba(239,68,68,.10);
    --shadow-pop:        0 25px 50px -12px rgba(0,0,0,.65);
    --btn-primary-hover: var(--color-primary-hover);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary:        #14B8A6;
  --color-primary-hover:  #2DD4BF;
  --color-primary-strong: #14B8A6;
  --color-primary-light:  #063530;
  --color-primary-subtle: #031613;
  --color-canvas:        #0F1012;
  --color-sidebar:       #151618;
  --color-sidebar-hover: #1C1D20;
  --color-sidebar-on:    #222327;
  --color-row-hover:     #1A1B1E;
  --color-group:         #17181B;
  --color-surface:       var(--color-sidebar);
  --color-surface-hover: var(--color-sidebar-hover);
  --color-surface-alt:   var(--color-canvas);
  --color-ink:         #EDEEF0;
  --color-ink-2:       #C9CBD0;
  --color-ink-muted:   #9A9EA6;
  --color-ink-inverse: #042F2E;
  --color-border:        #26282C;
  --color-border-strong: #6B6F77;
  --color-focus:         #2DD4BF;
  --color-success: #2DD4BF;
  --color-warning: #EAB308;
  --color-error:   #F87171;
  --color-danger-ink: #F87171;
  --color-chip-bg:  #222327;
  --color-chip-ink: #C9CBD0;
  --checkin-overdue-bg:   #3B4048;
  --checkin-overdue-ink:  #E8E8E8;
  --checkin-overdue-edge: #8C939C;
  --health-g-bg: rgba(34,160,95,.20);  --health-g-ink: #8EDDAF; --health-g-mark: #4CC38A;
  --health-y-bg: rgba(234,179,8,.20);  --health-y-ink: #F5D06B; --health-y-mark: #E0B23A;
  --health-r-bg: rgba(239,68,68,.20);  --health-r-ink: #F8A39B; --health-r-mark: #F07171;
  --health-g-tint: rgba(34,160,95,.10); --health-y-tint: rgba(234,179,8,.10); --health-r-tint: rgba(239,68,68,.10);
  --shadow-pop:        0 25px 50px -12px rgba(0,0,0,.65);
  --btn-primary-hover: var(--color-primary-hover);
}

html{overflow-x:clip}
body{margin:0;overflow-x:clip;font-family:var(--font-body);color:var(--color-ink-2);background:var(--color-canvas);font-size:var(--text-body);line-height:1.5}
a{color:var(--color-primary-strong);text-decoration:none}a:hover{color:var(--color-primary-strong);text-decoration:underline}
h1,h2,h3{color:var(--color-ink);margin:0}
h1{font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-0.02em}
h2{font-size:var(--text-h2);font-weight:600;line-height:1.4}
h3{font-size:var(--text-body);font-weight:600;line-height:1.4}
p{margin:0}
strong{color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.disclose{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit;cursor:pointer}
.person>.disclose,.person>.person-nobreak>.disclose{padding:0 4px;margin:0 -4px;border-radius:var(--radius-sm)}
.person>.disclose:hover,.person>.disclose:focus-visible,.person>.person-nobreak>.disclose:hover,.person>.person-nobreak>.disclose:focus-visible{background:var(--color-primary-subtle)}
.person-nobreak{white-space:nowrap}
.person-nobreak>.disclose{white-space:normal;overflow-wrap:anywhere}
.person-email{margin-left:4px;color:var(--color-ink-muted);font-size:var(--text-secondary);font-weight:400;overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
.explain{color:var(--color-ink-muted);font-size:var(--text-secondary);font-weight:400;line-height:1.5}
/* The flat frame: a 240px sidebar beside the content column, which opens
 * with the page's 48px header strip when it has one (DESIGN.md § Sidebar,
 * § Page header). At 900px and below the sidebar is a 48px strip whose Menu
 * opens the rest as a sheet. */
.frame{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.frame-content{min-width:0}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:16px;padding:12px;background:var(--color-sidebar);border-right:1px solid var(--color-border);box-sizing:border-box;overflow-y:auto;font-size:var(--text-secondary)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;font-size:var(--text-body);font-weight:600;color:var(--color-ink);white-space:nowrap}
.brand:hover{color:var(--color-ink);text-decoration:none}
.brand-mark{flex:none;width:18px;height:18px;border-radius:5px;background:var(--color-primary-strong)}
.sb-strip-home,.sb-menu{display:none}
.sb-body{flex:1 0 auto;display:flex;flex-direction:column;gap:16px}
.sb-search input[type=search]{width:100%;height:32px;padding:0 12px;font-size:var(--text-secondary);background:var(--color-canvas)}
.navitems{display:flex;flex-direction:column;gap:4px}
.navitem{display:flex;align-items:center;gap:12px;height:32px;padding:0 8px;border-radius:var(--radius-md);color:var(--color-ink-2);font-weight:500;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.navitem:hover{color:var(--color-ink);background:var(--color-sidebar-hover);text-decoration:none}
.navitem.on{color:var(--color-ink);background:var(--color-sidebar-on)}
.navicon{flex:none;color:var(--color-ink-muted)}
.navitem:hover .navicon,.navitem.on .navicon{color:var(--color-ink)}
.count{margin-left:auto;color:var(--color-ink-muted);font-size:var(--text-label);font-weight:500;font-variant-numeric:tabular-nums}
.count.needs-you{min-width:20px;padding:0 4px;border-radius:var(--radius-full);background:var(--color-ink);color:var(--color-canvas);font-weight:600;line-height:18px;text-align:center;box-sizing:border-box}
.sb-head{margin:0 0 4px;padding:0 8px;font-size:var(--text-label);font-weight:500;line-height:1.5;letter-spacing:0;color:var(--color-ink-muted)}
.sb-org ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sb-org-person{display:block;height:30px;padding:0 8px;border-radius:var(--radius-md);color:var(--color-ink-2);line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-org-person:hover{color:var(--color-ink);background:var(--color-sidebar-hover);text-decoration:none}
.sb-person{position:relative;margin-top:auto}
.sb-person>summary{min-height:40px;justify-content:flex-start;gap:8px;padding:0 8px;border-radius:var(--radius-md);color:var(--color-ink);font-weight:500}
.sb-person>summary:hover,.sb-person[open]>summary{background:var(--color-sidebar-hover)}
.sb-person .avatar{width:24px;height:24px;flex:none}
.sb-person-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{padding:0 8px;color:var(--color-ink-muted);font-size:var(--text-label)}
.who .person{color:var(--color-ink)}
.sb-person-menu{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.sb-person-menu form{margin:0}
.sb-person-menu .sb-signout{width:100%;justify-content:flex-start}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:0 28px;border-bottom:1px solid var(--color-border);box-sizing:border-box}
.ph-title{display:flex;align-items:center;gap:8px;min-width:0}
.ph-title h1{font-size:var(--text-body);line-height:1.4;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-parent,.ph-sep,.ph-count{color:var(--color-ink-muted);white-space:nowrap}
.ph-count{font-variant-numeric:tabular-nums}
.ph-actions{display:flex;align-items:center;gap:8px;flex:none}
/* A signed-out page has no sidebar: the app's name and Theme sit over its
 * content, which is centred on the canvas */
.signed-out-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 24px;box-sizing:border-box}
.signed-out .page{align-items:center}
@media (max-width:900px){.frame{display:block}.sidebar{position:relative;z-index:25;height:48px;flex-direction:row;align-items:center;gap:8px;padding:0 12px;border-right:0;border-bottom:1px solid var(--color-border);overflow:visible}.sb-strip-home{display:inline-flex;align-items:center;min-height:44px;margin-left:auto}.sb-strip-home:hover{text-decoration:none}.sb-menu{display:block;margin-left:auto}.sb-strip-home+.sb-menu{margin-left:0}.sb-menu>summary{min-height:36px}.sb-body{display:none}.sb-menu[open]~.sb-body{display:flex;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;padding:12px;background:var(--color-sidebar);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-pop);box-sizing:border-box}.sb-person{margin-top:0}.sb-person-menu{position:static;box-shadow:none}.page-header{padding:0 16px}.signed-out-bar{padding:0 16px}}
.avatar{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-primary-strong);color:var(--color-ink-inverse);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:8px;padding:1px 8px;border-radius:var(--radius-sm);font-size:var(--text-secondary);font-weight:600;line-height:20px;white-space:nowrap;box-sizing:border-box}
/* Health's shape (DESIGN.md § Health): Red a stop-sign octagon, Yellow a
 * yield triangle pointing down, Green a circle, in the Health's ink. A place
 * that draws it bigger sets --dot-size, the circle's width; the triangle and
 * octagon are drawn wider so they read as their shape at that size, the
 * octagon never under 12px, below which it reads as a circle on screen */
.dot{--dot-size:8px;width:var(--dot-size);height:var(--dot-size);display:inline-block;background:currentColor;flex:none}
.g{background:var(--health-g-bg);color:var(--health-g-ink)}
.y{background:var(--health-y-bg);color:var(--health-y-ink)}
.r{background:var(--health-r-bg);color:var(--health-r-ink)}
.g .dot{border-radius:50%}
.y .dot{clip-path:polygon(0 0,100% 0,50% 100%);width:calc(var(--dot-size)*1.25);height:calc(var(--dot-size)*1.125)}
.r .dot{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);width:max(12px,calc(var(--dot-size)*1.125));height:max(12px,calc(var(--dot-size)*1.125))}
.st{background:var(--checkin-overdue-bg);color:var(--checkin-overdue-ink);border-width:1px;border-style:dashed;border-color:var(--checkin-overdue-edge)}
/* A Health chip shows only its shape, its word for a screen reader and the
 * tooltip (DESIGN.md § Health): centred, 22px tall as it was with its word,
 * never under 24px wide, and at least 24px tall where it is a link */
.badge.shape{justify-content:center;min-width:24px;min-height:22px;padding:1px 4px}
a>.badge.shape{min-height:24px}
.badge.st{padding:0 8px}
.alert.st{background:var(--color-surface);color:var(--color-ink)}
.alert.st a{margin-left:auto;font-weight:600;white-space:nowrap}
.ol{background:var(--color-surface);color:var(--color-ink);border:1px dashed var(--color-ink-muted)}
.lc{background:var(--color-surface-alt);color:var(--color-ink-2);border:1px solid var(--color-border)}
.tag{display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--radius-full);color:var(--color-ink);font-size:var(--text-secondary);line-height:20px;background:none;border-width:1px;border-style:solid;border-color:var(--color-border-strong)}
.ruled{border-top:1px solid var(--color-border);padding-top:20px}
.ruled:first-child{border-top:0;padding-top:0}
.gp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gp-link{display:flex;flex-direction:column;gap:4px}
.gp-link-head{display:flex;align-items:center;gap:8px;min-width:0}
.gp-link-head>.badge{flex:none}
.gp-link-head>a{min-width:0}
.gp-link-head>.gp-link-meta{margin-left:auto}
.gp-link-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gp-link-meta:empty{display:none}
.gp-link-meta form{margin:0 0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-md);font:inherit;font-size:var(--text-body);font-weight:600;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--color-surface-hover);border-color:var(--color-primary);text-decoration:none;color:var(--color-ink)}
.btn:active{transform:scale(0.98)}
.btn.primary{background:var(--color-primary-strong);border-color:var(--color-primary-strong);color:var(--color-ink-inverse)}
.btn.primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--color-ink-inverse)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--color-primary-strong)}.btn.quiet:hover{background:var(--color-primary-subtle);border-color:transparent}
.btn.danger{color:var(--color-danger-ink)}
.btn.sm{height:32px;padding:0 12px;font-size:var(--text-secondary)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.muted{color:var(--color-ink-muted)}
.small{font-size:var(--text-secondary);line-height:1.5}
.label,th{font-size:var(--text-label);font-weight:500;color:var(--color-ink-muted)}
.num{font-variant-numeric:tabular-nums;font-weight:500}
table{border-collapse:collapse;width:100%}
th{text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface-alt);white-space:nowrap}
.table-scroll{overflow-x:auto}
td{padding:12px 16px;border-bottom:1px solid var(--color-border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr[aria-selected=true] td{background:var(--color-primary-light)}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-weight:600;font-size:var(--text-secondary);color:var(--color-ink)}
/* The person picker (personPicker): its results drop down under the input,
 * as wide as the picker and no wider than the window, over what follows, so
 * they never push the form's buttons down; an email wraps rather than
 * scrolling the page sideways. A picker refused (person-field) keeps its
 * reason under it. */
.person-picker{position:relative}
.person-field{display:flex;flex-direction:column;gap:4px}
.person-results{position:absolute;left:0;right:0;top:100%;z-index:20;max-width:calc(100vw - 32px);margin:4px 0 0;padding:4px;list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-sizing:border-box}
.person-result{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:8px;border-radius:6px;cursor:pointer;color:inherit;font:inherit;font-weight:400;overflow-wrap:anywhere}
.person-result:hover,.person-result:focus-visible{background:var(--color-surface-hover)}
.hint{font-size:var(--text-secondary);color:var(--color-ink-muted);font-weight:400}
.inline-form{display:inline}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],input[type=password],textarea,select{font:inherit;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:0 16px;height:40px;box-sizing:border-box}
input::placeholder,textarea::placeholder{color:var(--color-ink-muted)}
textarea{padding:12px 16px;height:auto;min-height:88px;resize:vertical;line-height:1.5}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-focus)}
input[type=checkbox],input[type=radio]{accent-color:var(--color-primary-strong)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--color-danger-ink)}
del{color:var(--color-ink-muted)}
.alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);font-size:15px}
.help{border-bottom:1px dotted var(--color-ink-muted);cursor:help}
.page{max-width:1152px;margin:0 auto;padding:32px 32px 64px;display:flex;flex-direction:column;gap:32px;box-sizing:border-box}
.grid-main-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
details>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
details>summary::-webkit-details-marker{display:none}
@media (max-width:900px){.grid-main-aside{grid-template-columns:1fr}.page{padding:20px 16px 48px;gap:24px}}
/* Filter chips: a filter bar's controls, a key and a select or checkbox in
   one 28px chip, set chips filled. The Goal list and Follow-ups share them
   (DESIGN.md § Goal list: Filter bar). */
.filter-chip{position:relative;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-canvas);color:var(--color-ink-2);font-size:var(--text-secondary);font-weight:500;line-height:1;white-space:nowrap;box-sizing:border-box;cursor:pointer}
.filter-chip:has(select){padding-right:24px}
.filter-chip:has(select)::after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-75%) rotate(45deg);pointer-events:none}
.filter-chip select{appearance:none;height:26px;min-height:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;field-sizing:content;cursor:pointer}
.filter-chip select:focus{outline:none}
.filter-chip:focus-within{outline:2px solid var(--color-focus);outline-offset:1px}
.filter-chip input[type=checkbox]{margin:0}
.chip-key{color:var(--color-ink-muted)}
.chip-key-set{display:none}
.filter-chip:has(option:checked:not([value=""])) .chip-key-set{display:inline}
.filter-chip.on,.filter-chip:has(option:checked:not([value=""])),.filter-chip:has(input:checked){background:var(--color-primary-subtle);color:var(--color-ink)}
/* Theme: three choices in the person's menu, or, on a signed-out page, in a
 * Theme disclosure whose panel floats over the page, so opening it never
 * widens the page (DESIGN.md § Components) */
.theme{position:relative}
.theme>summary{min-height:0}
.theme-menu{display:flex;flex-direction:column;gap:4px;margin:0}
.theme-float{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:160px;max-width:calc(100vw - 32px);padding:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);box-sizing:border-box}
.theme-menu :focus-visible{outline-color:var(--color-focus)}
.theme-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 12px;border:0;border-radius:var(--radius-md);background:none;font:inherit;font-weight:500;color:var(--color-ink);text-align:left;cursor:pointer}
.theme-choice:hover{background:var(--color-primary-subtle)}
.theme-choice[aria-current="true"]{background:var(--color-primary-light);font-weight:600}
.theme-choice[aria-current="true"]::after{content:"✓";color:var(--color-primary-strong)}
/* Toast: the one-time notice with an Undo, fixed to the bottom of the window
 * above the page content; the page leaves room for it (DESIGN.md § Components) */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:12px 12px 12px 20px;box-sizing:border-box;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.toast form{margin:0;flex:none}
.page:has(.toast){padding-bottom:128px}
@media (max-width:600px){.toast{left:16px;right:16px;bottom:16px;transform:none;width:auto;max-width:none}}
.page>*{min-width:0;max-width:100%}
.message-page{max-width:760px;display:flex;flex-direction:column;gap:12px;align-self:center;margin:64px auto 0;text-align:center}
.page{overflow-wrap:break-word}
input,textarea,select,img{max-width:100%}
pre{overflow-x:auto}
fieldset{min-width:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important}.btn:active{transform:none!important}}
/* A touch screen: 44px hit targets, and a type scale read at arm's length,
 * 16px body, 15px secondary copy and section headings, muted copy in the
 * body's ink while labels keep theirs (DESIGN.md § Typography) */
@media (pointer:coarse){:root{--text-body:16px;--text-secondary:15px;--text-h2:15px;}.muted{color:var(--color-ink-2)}.navitem,.sb-org-person,.theme-choice,.sb-person>summary{min-height:44px}.sb-org-person{line-height:44px;height:auto}.btn,.btn.sm,input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],input[type=password],select{min-height:44px}.filter-chip{height:auto;min-height:44px}.person-result{min-height:44px}.filter-chip select{min-height:42px}}