/* roadmap.foxyaudit.tech, in the bitumen style: links.foxyaudit.tech's Bitmap specimen made into a tool.
   Cream cells ruled by 1px gaps that show the warm black underneath, one fox-orange accent, dither tone
   strips, 12x12 pixel icons, Poppins for names and the system font for the work.
   The CSP is style-src 'self': no inline styles anywhere. Positions that change at run time (timeline bars)
   are set through element.style from JavaScript, which the CSP allows.

   Contrast, measured (WCAG relative luminance):
     ink on paper 15.7:1 · ink-2 on paper 7.5:1 · ink on fox 6.8:1 · fox on ink 6.8:1 · paper-2 on ink 8.2:1
     fox on paper is only 2.3:1, so a fox FILL on paper always carries an ink edge (1px or more), and fox is
     never used for text or thin lines on paper. chart on paper is 1.5:1: decoration only (the poster grid,
     and the timeline's day and week rules, which the dates written on the ruler and the bars back up). */

@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2');}

:root{
  --paper:#fdf0d5;   /* cream: the cells */
  --ink:#1e1712;     /* warm black: the rules, the text, the drawer */
  --ink-2:#5c4a3a;   /* captions on paper (7.5:1); never on fox */
  --fox:#ff7a2e;     /* the one accent */
  --chart:#feb582;   /* the poster's chart grid: decoration only */
  --paper-2:#baaf9b; /* captions on ink: paper at 70% over ink (8.2:1 on ink) */
  --rule-ink:rgba(253,240,213,.4); /* the drawer's rules: paper at 40% over ink, 3.4:1 on ink */
  --disp:'Poppins',ui-rounded,"Segoe UI",system-ui,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav-w:232px;
  --tap:44px;        /* the smallest thing a finger presses */
  --pad:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-top:20; --z-drawer:40; --z-toast:60;
  color-scheme:only light;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.45 var(--sans);}
button,input,select,textarea{font:inherit;color:inherit;}
img{display:block;max-width:100%;}
a{color:inherit;text-underline-offset:3px;}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.num{font-variant-numeric:tabular-nums;}
[hidden]{display:none !important;}

/* pixel icons: 12x12 grids drawn at 2px a pixel (js/icons.js) */
.px{width:24px;height:24px;flex:none;fill:currentColor;shape-rendering:crispEdges;}
.px.sm{width:24px;height:24px;}   /* 12x12 grids draw at 2px a pixel (24) or 1px (12): never between */
.px.xs{width:12px;height:12px;}

/* ---- the tone strip at the trim edge: ordered dither, 2px dots, 1/8 to solid ---- */
.strip{display:grid;grid-template-columns:repeat(8,1fr);height:10px;background:var(--paper);}
.strip i{display:block;background-size:8px 8px;image-rendering:pixelated;}
.strip i:nth-child(1){background-image:url(/dither/d1.svg);}
.strip i:nth-child(2){background-image:url(/dither/d2.svg);}
.strip i:nth-child(3){background-image:url(/dither/d3.svg);}
.strip i:nth-child(4){background-image:url(/dither/d4.svg);}
.strip i:nth-child(5){background-image:url(/dither/d5.svg);}
.strip i:nth-child(6){background-image:url(/dither/d6.svg);}
.strip i:nth-child(7){background-image:url(/dither/d7.svg);}
.strip i:nth-child(8){background:var(--fox);}
.strip.end{direction:rtl;}

/* the seven area textures (D6 + MAIN's call: areas are told apart by name and texture, not by hue) */
.tx{display:inline-block;flex:none;width:14px;height:14px;border:1px solid var(--ink);background-color:var(--paper);background-size:8px 8px;image-rendering:pixelated;}
.tx-d1{background-image:url(/dither/d1.svg);} .tx-d2{background-image:url(/dither/d2.svg);}
.tx-d3{background-image:url(/dither/d3.svg);} .tx-d4{background-image:url(/dither/d4.svg);}
.tx-d5{background-image:url(/dither/d5.svg);} .tx-d6{background-image:url(/dither/d6.svg);}
.tx-d7{background-image:url(/dither/d7.svg);}

/* ---- buttons: ink is the action, an outline is the alternative, fox lights what is pressed ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 16px;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:600;font-size:15px;line-height:1.2;
  text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.5;}
.btn[aria-busy="true"]{cursor:progress;}
.btn:active:not(:disabled){background:var(--fox);color:var(--ink);}
@media (hover:hover){.btn:hover:not(:disabled){background:var(--fox);color:var(--ink);}}
.btn .px{width:24px;height:24px;}
.btn-sm .px{width:12px;height:12px;}
@media (pointer:coarse){.btn{min-height:var(--tap);}}

/* a count or state chip: always an ink edge, so a fox fill never dissolves into the paper (2.3:1) */
.chip{display:inline-flex;align-items:center;gap:6px;min-width:22px;height:22px;padding:0 7px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;}
.chip-fox{background:var(--fox);}
.chip-ink{background:var(--ink);color:var(--paper);}

/* people: GitHub faces, or initials when the face cannot load (offline, or the CSP's one image host is down) */
.avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--ink);background:var(--paper);
  color:var(--ink);font:700 12px/1 var(--disp);overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;image-rendering:auto;}
.avatar.sm{width:24px;height:24px;font-size:12px;}
.avatars{display:inline-flex;}
.avatars .avatar+.avatar{margin-left:-1px;}   /* two faces share one ruled edge */

/* ===================================================================================================
   Signed out: the poster
   =================================================================================================== */
.gate{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:1px;padding:1px;background:var(--ink);}
.gate-body{display:grid;gap:1px;background:var(--ink);}
.poster-cell{display:flex;flex-direction:column;justify-content:space-between;gap:24px;container-type:inline-size;padding:16px;
  background-color:var(--paper);
  background-image:linear-gradient(90deg,var(--chart) 1px,transparent 1px),linear-gradient(180deg,var(--chart) 1px,transparent 1px);
  background-size:16px 16px;background-origin:content-box;}
.poster{margin:0;font-family:var(--disp);font-weight:800;font-synthesis:none;font-size:48px;font-size:19cqi;line-height:.88;
  letter-spacing:-.02em;text-transform:uppercase;text-box:trim-both cap alphabetic;}
.poster span{display:block;}
.poster-note{margin:0;max-width:34ch;font:400 17px/1.35 var(--sans);color:var(--ink);background:var(--paper);padding:2px 0;}
.gate-side{display:grid;grid-template-rows:1fr auto;gap:1px;background:var(--ink);}
.fox-cell{display:flex;align-items:center;justify-content:center;min-height:200px;overflow:hidden;background:var(--paper);padding:12px 0;}
.fox{width:180px;height:172px;background:url(/fox.webp) 0 0/4320px 1720px no-repeat;image-rendering:pixelated;}
.gate-form{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 20px 28px;background:var(--paper);}
.gate-form h2{margin:0;font:700 22px/1.2 var(--disp);letter-spacing:-.01em;}
.gate-form p{margin:0;color:var(--ink-2);max-width:40ch;}
.gate-form .btn{align-self:flex-start;min-height:48px;padding:0 20px;font-size:16px;}
.gate-err{margin:0;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:600;}
.gate-err::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--fox);border:1px solid var(--ink);vertical-align:-1px;}
.gate-foot{margin:0;padding:10px 16px;background:var(--paper);color:var(--ink-2);font-size:13px;}

@media (min-width:900px){
  .gate-body{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);}
  .poster-cell{padding:24px;background-size:24px 24px;}
  .fox-cell{min-height:240px;}
}

/* ===================================================================================================
   Signed in: the sheet
   =================================================================================================== */
.shell{height:100dvh;display:grid;gap:1px;padding:0 1px 1px;background:var(--ink);
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-rows:10px auto minmax(0,1fr);
  grid-template-areas:"strip strip" "mark top" "nav main";}
.shell>.strip{grid-area:strip;margin:0 -1px;}
.mark{grid-area:mark;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--paper);color:var(--ink);text-decoration:none;}
.mark .fox-head{width:45px;height:43px;flex:none;background:url(/fox.webp) 0 0/1080px 430px no-repeat;image-rendering:pixelated;}
.wordmark{font:800 17px/.95 var(--disp);letter-spacing:-.01em;text-transform:uppercase;}
.wordmark span{display:block;}
.top{grid-area:top;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px var(--pad);background:var(--paper);min-width:0;}
.top .today{margin:0;font-weight:600;white-space:nowrap;}
.top .today small{display:block;font-weight:400;font-size:13px;color:var(--ink-2);}
.top .spacer{flex:1;}
.menu-btn{display:none;}

/* the nav: each section is one ruled line, like the links page's destinations */
.nav{grid-area:nav;display:flex;flex-direction:column;min-height:0;background:var(--paper);}
.nav ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ink);border-bottom:1px solid var(--ink);overflow-y:auto;}
.nav li{display:grid;background:var(--paper);}
.nav-line{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0 12px 0 14px;color:var(--ink);text-decoration:none;
  font-weight:600;-webkit-tap-highlight-color:transparent;}
.nav-line .label{flex:1;}
.nav-line[aria-current="page"]{background:var(--ink);color:var(--paper);}
.nav-line[aria-current="page"] .chip{border-color:var(--paper);}
.nav-line:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;}
.nav-line[aria-current="page"]:focus-visible{outline-color:var(--fox);}
@media (hover:hover){.nav-line:not([aria-current="page"]):hover{background:var(--fox);}}
.nav-line:active:not([aria-current="page"]){background:var(--fox);}
.me{margin-top:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding:14px;border-top:1px solid var(--ink);}
.me .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.me .btn{grid-column:1 / -1;justify-self:start;min-height:36px;padding:0 12px;font-size:14px;margin-top:6px;}
@media (pointer:coarse){.me .btn{min-height:var(--tap);}}

/* the work area */
.main{grid-area:main;overflow:auto;background:var(--paper);overscroll-behavior:contain;}
.view{padding:20px var(--pad) 48px;max-width:1200px;}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:20px;}
.view-head h1{margin:0;font:700 26px/1.15 var(--disp);letter-spacing:-.015em;}
.view-head p{margin:4px 0 0;color:var(--ink-2);max-width:62ch;}
.view-head .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;}

/* a ruled list: rows separated by the ink, like the sheet */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
.rows>li{background:var(--paper);padding:12px 14px;min-width:0;}

/* empty states: what the list holds and how to add the first one */
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px;border:1px solid var(--ink);background:var(--paper);}
.empty .px{grid-row:span 2;margin-top:2px;}
.empty strong{font-weight:600;}
.empty p{margin:0;color:var(--ink-2);max-width:60ch;}
.empty.loading{color:var(--ink-2);}
.load-err{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border:1px solid var(--ink);background:var(--paper);}
.load-err p{margin:0;font-weight:600;flex:1 1 30ch;}

/* boot: a quiet cream page until the session is known */
.boot{min-height:100dvh;background:var(--paper);}
.noscript{margin:0;padding:24px;font-weight:600;}

/* toasts: one line, bottom left, ink on paper; polite, never steal focus */
.toasts{position:fixed;left:12px;bottom:12px;z-index:var(--z-toast);display:grid;gap:8px;max-width:min(420px,calc(100vw - 24px));}
.toast{padding:12px 14px;border:1px solid var(--paper);box-shadow:0 0 0 1px var(--ink);background:var(--ink);color:var(--paper);font-weight:600;}
.toasts.in-drawer{position:absolute;left:20px;right:20px;bottom:76px;max-width:none;}
.toast{display:flex;align-items:center;gap:12px;}
.toast-act{flex:none;min-height:32px;padding:0 10px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);font-weight:700;cursor:pointer;}
.toast-act:focus-visible{outline:3px solid var(--fox);outline-offset:2px;}
@media (min-width:768px){.toasts:not(.in-drawer){left:auto;right:12px;}}
.toast.err::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--fox);vertical-align:-1px;}

/* ---- phone and narrow tablet: one column; the nav folds under a Menu button ---- */
@media (max-width:767px){
  :root{--pad:15px;}
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:8px auto minmax(0,1fr);grid-template-areas:"strip" "top" "main";}
  .mark{display:none;}
  .top{min-height:56px;padding:8px 10px 8px 12px;}
  .top .today{display:none;}
  .top .mini-mark,.nav-head .mini-mark{display:flex;}
  .menu-btn{display:inline-flex;min-height:var(--tap);min-width:var(--tap);padding:0 12px;}
  .nav{position:fixed;inset:0;z-index:var(--z-drawer);display:none;overflow:auto;}
  .nav.open{display:flex;}
  .nav-head{display:flex;}
  .view-head h1{font-size:24px;}
}
@media (min-width:768px){.mini-mark,.nav-head{display:none;}}
.mini-mark{display:none;align-items:center;gap:8px;color:var(--ink);text-decoration:none;}
.mini-mark .fox-head{width:34px;height:32px;flex:none;background:url(/fox.webp) 0 0/810px 322.5px no-repeat;image-rendering:pixelated;}
.nav-head{align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 12px;min-height:56px;border-bottom:1px solid var(--ink);}

/* motion: state changes only, short; nothing moves for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .btn,.nav-line,.chip{transition:background-color .12s var(--ease),color .12s var(--ease);}
}

@media (forced-colors:active){
  .btn,.chip,.avatar,.tx,.empty,.rows{border-color:CanvasText;}
  .nav-line[aria-current="page"]{outline:2px solid Highlight;outline-offset:-2px;}
  .fox,.fox-head,.strip{forced-color-adjust:none;}
}

/* ===================================================================================================
   Lists phase: the top bar's search and quick-add, the lists, Home's blocks, the drawer
   =================================================================================================== */

/* ---- form controls on paper ---- */
.input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.35 var(--sans);}
textarea.input{resize:vertical;min-height:64px;line-height:1.45;}
select.input{padding-right:28px;appearance:none;-webkit-appearance:none;
  background-image:url(/chevron.svg);background-repeat:no-repeat;background-size:12px 12px;background-position:right 10px center;}
.input::placeholder{color:var(--ink-2);opacity:1;}
.input:focus-visible{outline:3px solid var(--ink);outline-offset:0;}
input[type="date"].input{min-width:0;}
@media (pointer:coarse){.input{min-height:var(--tap);font-size:16px;}}

.btn-sm{min-height:32px;padding:0 10px;font-size:14px;gap:6px;}
.btn-icon{min-width:40px;padding:0;}
@media (pointer:coarse){.btn-sm,.btn-icon{min-height:var(--tap);min-width:var(--tap);}}
.btn .px.xs{width:12px;height:12px;}

/* a real checkbox, drawn as a 22px ink square; the label around it gives the finger 44px */
.tick{appearance:none;-webkit-appearance:none;display:block;width:22px;height:22px;margin:0;border:2px solid var(--ink);border-radius:0;
  background:var(--paper);cursor:pointer;flex:none;}
.tick:checked{background:var(--ink) url(/check-paper.svg) center/14px 14px no-repeat;image-rendering:pixelated;}
.tick[aria-busy="true"]{cursor:progress;opacity:.6;}
.tick:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.tick-hit{display:inline-grid;place-items:center;flex:none;min-width:var(--tap);min-height:var(--tap);margin:-8px -6px -8px -10px;cursor:pointer;}

/* ---- the top bar: search, quick-add, connection ---- */
.top{flex-wrap:wrap;gap:10px 12px;}
.top-search{position:relative;display:flex;align-items:center;flex:0 1 300px;min-width:200px;}
.top-search>.px{position:absolute;left:11px;pointer-events:none;}
.search-input{padding-left:38px;}
.search-input::-webkit-search-cancel-button{display:none;}
.search-results{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-top);width:min(560px,calc(100vw - 24px));max-height:min(60vh,520px);
  overflow:auto;list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
.sr{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--paper);cursor:pointer;}
.sr[aria-selected="true"]{background:var(--fox);}
@media (hover:hover){.sr:hover{background:var(--fox);}}
.sr-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sr-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-kind{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr[aria-selected="true"] .sr-kind{color:var(--ink);}
.sr-empty{padding:12px;background:var(--paper);color:var(--ink);}
.qa{display:flex;align-items:center;gap:8px;flex:1 1 560px;min-width:0;}
.qa-kind{flex:0 0 118px;width:118px;font-weight:600;}
.qa-text{flex:1 1 200px;min-width:120px;}
.qa-date{flex:0 0 150px;width:150px;}
.qa-item{flex:0 1 180px;min-width:0;}
.qa-add{flex:none;}
.conn{margin:0;padding:6px 10px;border:1px solid var(--ink);background:var(--fox);font-weight:600;font-size:13px;}
.top-phone{display:none;align-items:center;gap:8px;margin-left:auto;}
.top-toggle[aria-expanded="true"]{background:var(--ink);color:var(--paper);}

/* ---- the nav's counts ---- */
.nav-count{margin-left:auto;}
.nav-line[aria-current="page"] .nav-count{border-color:var(--paper);}

/* ---- view heads, tabs, the rows of a list ---- */
.view-head .actions .btn,.head-actions .btn{min-height:40px;}
/* each tab is its own ruled cell (a 1px outline), so a wrapped row never leaves an ink slab behind it */
.tabs{display:inline-flex;flex-wrap:wrap;gap:1px;max-width:100%;margin:0 0 16px;padding:1px;}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;outline:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font-weight:600;cursor:pointer;}
.tab[aria-checked="true"]{background:var(--ink);color:var(--paper);}
.tab-count{font-size:12px;font-weight:400;}
@media (hover:hover){.tab:not([aria-checked="true"]):hover{background:var(--fox);}}
.tab:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.tab[aria-checked="true"]:focus-visible{outline-color:var(--fox);outline-offset:-4px;}
@media (pointer:coarse){.tab{min-height:var(--tap);}}

.lines{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
.line{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;background:var(--paper);min-width:0;}
.line>.px:first-child{flex:none;}
.line.is-warn>.px:first-child{background:var(--fox);outline:1px solid var(--ink);}
.line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.line-meta{font-size:13px;color:var(--ink-2);}
.line-note{font-size:14px;color:var(--ink-2);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line .chip,.line .avatars{flex:none;}
.rec-link{color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere;}
.rec-link:hover{text-decoration:underline;}
.rec-link.plain{font-weight:400;}
.line{position:relative;}
.line .rec-link::after{content:"";position:absolute;inset:0;}
.line .tick-hit,.line .btn,.line .chip-link,.line .meter{position:relative;z-index:1;}
.rec-link.struck,.struck{text-decoration:line-through;}
.list-empty{margin:0;padding:16px;border:1px solid var(--ink);color:var(--ink-2);}
.list-more{margin-top:12px;}
.more-link{display:block;padding:10px 16px;border-top:1px solid var(--ink);font-weight:600;}
.meta-item{display:inline-flex;align-items:center;gap:4px;}
.chip-link{text-decoration:none;max-width:240px;}
.chip-link span:last-child{overflow:hidden;text-overflow:ellipsis;}
.chip .tx{width:10px;height:10px;}
@media (hover:hover){.chip-link:hover{background:var(--fox);}}
.empty-action{grid-column:2;margin-top:8px;}
.todo .tick-hit{margin-right:-2px;}
.todo.is-done .rec-link{text-decoration:line-through;font-weight:400;}

/* ---- Home: four blocks, or the fox when all is clear ---- */
.blocks{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
@media (min-width:1100px){.blocks{grid-template-columns:1fr 1fr;}}
.block{display:flex;flex-direction:column;min-width:0;background:var(--paper);}
.block-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 16px 12px;}
.block-head h2{margin:0;font:700 17px/1.2 var(--disp);letter-spacing:-.01em;}
.block-sub{margin-left:auto;color:var(--ink-2);font-size:13px;}
.block .lines{border:0;border-top:1px solid var(--ink);}
.block-empty{margin:0;padding:0 16px 18px;color:var(--ink-2);}
.all-clear{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
.all-clear .fox-cell{min-height:200px;padding:16px 28px;}
.all-clear-text{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px;background:var(--paper);}
.all-clear-text h2{margin:0;font:800 36px/1 var(--disp);letter-spacing:-.02em;text-transform:uppercase;}
.all-clear-text p{margin:0;max-width:56ch;color:var(--ink-2);}
@media (min-width:768px){.all-clear{grid-template-columns:auto minmax(0,1fr);}}

/* ---- cards: decisions, ideas, milestones ---- */
.cards{display:grid;gap:1px;background:var(--ink);border:1px solid var(--ink);}
/* a grid with empty tracks: rule each card itself, so the empty end of a row stays paper */
.cards.ideas,.cards.milestones{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));background:none;border:0;padding:1px;}
.cards.ideas .card,.cards.milestones .card{outline:1px solid var(--ink);}
.card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 18px;background:var(--paper);}
.card-title{margin:0;font:600 17px/1.35 var(--sans);}
.card .why{margin:0;color:var(--ink-2);white-space:pre-wrap;max-width:75ch;}
.card-more{margin:-4px 0 0;white-space:pre-wrap;max-width:75ch;}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;font-size:13px;color:var(--ink-2);}
.card-meta .btn{margin-left:auto;}
.decision.is-replaced .card-title .rec-link{text-decoration:line-through;font-weight:400;}
.chat summary{cursor:pointer;font-weight:600;font-size:14px;width:max-content;max-width:100%;}
.chat-text{margin:8px 0 0;padding:10px 12px;border:1px solid var(--ink);white-space:pre-wrap;font-size:14px;max-height:320px;overflow:auto;}
.status-proposed{background:var(--fox);}
.status-agreed{background:var(--ink);color:var(--paper);}
.status-replaced{background:var(--paper);text-decoration:line-through;}
.link-cards{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.link-card{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;}
.link-host{font-weight:600;flex:none;}
.link-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-size:14px;}
@media (hover:hover){.link-card:hover{background:var(--fox);}.link-card:hover .link-path{color:var(--ink);}}
.ms-when{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;color:var(--ink-2);}
.ms-left{color:var(--ink);font-weight:600;}
.milestone.is-warn .ms-left::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;background:var(--fox);border:1px solid var(--ink);}
.ms-count{margin:0;font-size:14px;}
/* a ruled meter: the fill is fox with an ink leading edge, inside an ink frame */
.meter{display:block;height:12px;border:1px solid var(--ink);background:var(--paper);}
.meter-fill{display:block;height:100%;background:var(--fox);box-shadow:1px 0 0 var(--ink);}

/* ---- dates ---- */
.day-cell{display:grid;place-items:center;align-content:center;flex:none;width:52px;height:52px;border:1px solid var(--ink);}
.day-num{font:800 20px/1 var(--disp);}
.day-mon{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.date.is-today .day-cell{background:var(--fox);}
.date.is-unfollowed .day-cell{background-image:url(/dither/d3.svg);background-size:8px 8px;image-rendering:pixelated;}
.past{margin-top:20px;}
.past summary{cursor:pointer;font-weight:600;padding:8px 0;width:max-content;}
.past .lines{margin-top:8px;}

/* ---- the timeline as a list (phones, and wherever the Gantt is not drawn) ---- */
.area-group{margin-bottom:24px;}
.item-line .meter{max-width:240px;height:8px;margin-top:4px;}
.area-rule{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--ink);
  font:700 15px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;}
.sub-rule{margin:14px 0 6px;font:600 13px/1 var(--sans);color:var(--ink-2);}

/* ---- the inline "are you sure" ---- */
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:10px 0 0;padding:12px 14px;border:1px solid var(--ink);
  background:var(--fox);color:var(--ink);}
.confirm p{margin:0;flex:1 1 220px;font-weight:600;}
.confirm-actions{display:flex;gap:8px;}
.confirm .btn{background:var(--paper);color:var(--ink);border-color:var(--ink);}
.confirm .btn-ink{background:var(--ink);color:var(--paper);}
.drawer .confirm .btn{background:var(--paper);color:var(--ink);border-color:var(--ink);}
.drawer .confirm .btn-ink{background:var(--ink);color:var(--paper);}
.confirm :focus-visible,.drawer .confirm :focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.confirm-row{list-style:none;}
.confirm-row .confirm{margin:0;}

/* ===================================================================================================
   The drawer: the dark pop-over, ink on the cream sheet
   =================================================================================================== */
.scrim{position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);background:rgba(30,23,18,.36);}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  width:min(540px,100vw);background:var(--ink);color:var(--paper);}
.drawer :focus-visible{outline-color:var(--fox);}
.d-head{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--rule-ink);}
.d-head h2{display:flex;align-items:center;gap:10px;margin:0;flex:1;min-width:0;font:700 20px/1.2 var(--disp);letter-spacing:-.01em;}
.d-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.d-head h2:focus{outline:none;}
.d-head h2:focus-visible{outline:3px solid var(--fox);outline-offset:4px;}
.d-body{overflow:auto;overscroll-behavior:contain;}
.d-form{display:grid;gap:14px;padding:18px 20px;}
.d-foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--rule-ink);}
.d-note{margin:0;color:var(--paper-2);font-size:13px;}
.d-gone{margin:0;padding:24px 20px;}
.d-sec{padding:16px 20px;border-top:1px solid var(--rule-ink);}
.d-top .d-sec{border-top:0;}
.d-details .d-form{padding:0;}
.d-sec h3{margin:0 0 12px;font:700 15px/1.2 var(--disp);letter-spacing:.01em;}
.d-sec h4{margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--paper-2);}
.d-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;}
.d-status p{margin:0;flex:1 1 100%;}
.d-danger{padding-bottom:28px;}
.d-discard{margin:12px 20px 0;}
.drawer .confirm{color:var(--ink);}

.field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0;}
.field>label,.field>legend{padding:0;font-weight:600;font-size:14px;}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.field-check{display:flex;align-items:center;gap:10px;}
.field.field-check{flex-wrap:wrap;}
.field-check .hint{flex-basis:100%;margin-left:36px;}
.hint{margin:0;font-size:13px;color:var(--ink-2);}
.field-err{margin:0;font-weight:600;font-size:14px;color:var(--ink);}
.field-err::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--fox);border:1px solid var(--ink);}
.drawer .field-err{color:var(--paper);}
.drawer .field-err::before{border-color:var(--paper);}
.input[aria-invalid="true"]{outline:3px solid var(--fox);outline-offset:0;}
.people-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;}
.people-field legend{width:100%;margin-bottom:6px;}
.person-pick{display:inline-flex;align-items:center;gap:8px;}
.pick-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.pick-chips .chip{height:auto;min-height:32px;padding:0 0 0 10px;}
.pick-chips .btn-icon{min-height:30px;min-width:30px;border:0;}
.tex-row{display:flex;flex-wrap:wrap;gap:8px;}
.tex-pick label{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid transparent;cursor:pointer;}
.tex-pick .tx{width:28px;height:28px;}
.tex-pick input:checked+label{border-color:var(--paper);outline:2px solid var(--fox);outline-offset:-4px;}
.tex-pick input:focus-visible+label{outline:3px solid var(--fox);}

/* the drawer's controls: cream fields on ink, cream outlines for buttons, fox for what is lit */
.drawer .input{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.drawer .hint{color:var(--paper-2);}
.drawer .btn{background:transparent;color:var(--paper);border-color:var(--paper);}
.drawer .btn-ink{background:var(--paper);color:var(--ink);}
.drawer .btn:disabled,.drawer .btn-ink:disabled{opacity:1;background:transparent;color:var(--paper-2);border-color:var(--rule-ink);cursor:default;}
.drawer .btn[aria-disabled="true"]{opacity:.6;}
.drawer .btn-danger{border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding:0 4px;}
@media (hover:hover){.drawer .btn:hover:not(:disabled){background:var(--fox);color:var(--ink);border-color:var(--fox);}}
.drawer .btn:active:not(:disabled){background:var(--fox);color:var(--ink);border-color:var(--fox);}
.drawer .chip{border-color:var(--paper);}
.drawer .status-agreed{background:var(--paper);color:var(--ink);}
.drawer .tick{border-color:var(--paper);background:var(--ink);}
.drawer .tick:checked{background:var(--paper) url(/check-ink.svg) center/14px 14px no-repeat;}
.drawer .tick:focus-visible{outline-color:var(--fox);}
.drawer .rec-link,.drawer a{color:var(--paper);}
.drawer .line{background:var(--ink);color:var(--paper);}
.drawer .lines{background:var(--rule-ink);border-color:var(--rule-ink);}
.drawer .line-meta{color:var(--paper-2);}
.drawer .avatar{border-color:var(--paper);}

.check-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:2px;}
.check-list li{display:flex;align-items:center;gap:8px;min-height:var(--tap);}
.check-text{flex:1;min-width:0;overflow-wrap:anywhere;}
.check-list li.is-done .check-text{text-decoration:line-through;color:var(--paper-2);}
.inline-form{display:flex;gap:8px;}
.linked ul,.linked-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.files{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px;}
.files li{display:flex;align-items:center;gap:10px;}
.file-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;}
.thumb{display:grid;place-items:center;flex:none;width:48px;height:48px;object-fit:cover;border:1px solid var(--paper);}
.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-link:hover .file-name{text-decoration:underline;}
.file-add label[aria-busy="true"]{cursor:progress;opacity:.6;}
.comments{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:14px;}
.c-head{display:flex;align-items:center;gap:8px;font-size:14px;}
.c-when{color:var(--paper-2);font-size:13px;}
.c-head .btn-icon{margin-left:auto;min-height:32px;min-width:32px;border-color:transparent;}
@media (pointer:coarse){
  .c-head .btn-icon,.pick-chips .btn-icon,.g-edit,.g-more,.toast-act{min-height:var(--tap);min-width:var(--tap);}
  .chip-link{min-height:var(--tap);}
}
.c-body{margin:6px 0 0 30px;white-space:pre-wrap;overflow-wrap:anywhere;}
.comment-form{display:grid;gap:8px;}
.comment-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* ---- phone: search and quick-add fold behind the top bar's buttons; the drawer fills the screen ---- */
@media (max-width:767px){
  .top-phone{display:inline-flex;}
  .top-search,.qa{display:none;flex:1 1 100%;order:5;}
  .top-search.open,.qa.open{display:flex;}
  .qa{flex-wrap:wrap;}
  .qa-kind{flex:1 1 40%;width:auto;}
  .qa-date{flex:1 1 40%;width:auto;}
  .qa-text{flex:1 1 100%;order:-1;}
  .qa-item{flex:1 1 100%;}
  .qa-add{flex:1 1 100%;}
  .conn{flex:1 1 100%;order:6;}
  .drawer{width:100vw;}
  .field-row{grid-template-columns:minmax(0,1fr);}
  .card-meta .btn{margin-left:0;}
  .line{flex-wrap:wrap;}
  .line .line-main{flex:1 1 60%;}
  .view-head .actions{margin-left:0;}
  .tabs{display:flex;width:100%;}
  .tab{flex:1 1 auto;justify-content:center;}
}

@media (prefers-reduced-motion:no-preference){
  .drawer{animation:d-in .2s var(--ease);}
  .scrim{animation:fade .2s var(--ease);}
  @keyframes d-in{from{transform:translateX(28px);}}
  @keyframes fade{from{opacity:0;}}
  .tab,.sr,.link-card,.chip-link{transition:background-color .12s var(--ease);}
}
@media (forced-colors:active){
  .tick{border-color:CanvasText;}
  .tick:checked{background:Highlight;}
  .drawer{border-left:2px solid CanvasText;}
}

/* ===================================================================================================
   Timeline phase: the Gantt. A ruled chart: the ruler and the label column stay put while the bars
   scroll; bars are cards with an ink edge, a fox progress fill with an ink leading edge, and the area's
   dither swatch. Today is a fox line between two ink rules (fox alone is 2.3:1 on cream).
   =================================================================================================== */
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 10px;}
.tl-bar .tabs{margin:0;}
.tl-group{display:flex;align-items:center;gap:8px;}
.tl-label{font-weight:600;font-size:14px;color:var(--ink-2);}
.tl-ms{width:auto;min-width:180px;max-width:260px;}
.tl-areas{position:relative;margin-left:auto;}
.tl-areas>summary{list-style:none;cursor:pointer;}
.tl-areas>summary::-webkit-details-marker{display:none;}
.tl-areas[open]>summary{background:var(--ink);color:var(--paper);}
.tl-areas-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-top);display:grid;gap:10px;width:min(360px,90vw);
  padding:10px;background:var(--paper);border:1px solid var(--ink);}
.tl-areas-panel .line{min-height:44px;}
.tl-help{margin:0 0 10px;font-size:13px;color:var(--ink-2);max-width:80ch;}

.gantt{--g-label:200px;position:relative;overflow:auto;max-height:calc(100dvh - 290px);min-height:300px;
  border:1px solid var(--ink);background:var(--paper);overscroll-behavior:contain;}
.gantt:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
@media (max-width:1023px){.gantt{--g-label:160px;}}
@media (min-width:1280px){.gantt{--g-label:220px;}}
.g-inner{position:relative;}

/* the ruler */
.g-head{position:sticky;top:0;z-index:4;display:flex;height:56px;background:var(--paper);border-bottom:1px solid var(--ink);}
.g-corner{position:sticky;left:0;z-index:5;flex:none;display:flex;align-items:flex-end;width:var(--g-label);padding:0 12px 8px;
  background:var(--paper);border-right:1px solid var(--ink);font-size:12px;font-weight:600;color:var(--ink-2);}
.g-scale{position:relative;flex:none;height:100%;}
.g-span{position:absolute;top:0;display:flex;align-items:center;height:26px;padding:0 8px;border-left:1px solid var(--ink);
  font:700 13px/1 var(--disp);white-space:nowrap;overflow:hidden;}
/* a month's name stays in view while its span scrolls under the label column */
.g-span-t{position:sticky;left:calc(var(--g-label) + 8px);}
.g-tick{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:30px;
  border-left:1px solid var(--chart);border-top:1px solid var(--ink);font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;}
.g-tick-s{font-size:12px;color:var(--ink-2);}
.g-tick.is-weekend{color:var(--ink-2);}
.g-tick.is-today{z-index:1;background:var(--fox);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--ink);}
.g-tick.is-today .g-tick-s{color:var(--ink);}

/* the stage: background, arrows, rows */
.g-stage{position:relative;}
.g-bg{position:absolute;top:0;left:var(--g-label);z-index:0;pointer-events:none;}
.g-wkend{position:absolute;top:0;bottom:0;background:url(/hatch.svg) 0 0/6px 6px;image-rendering:pixelated;}
.g-mline{position:absolute;top:0;bottom:0;width:1px;background:var(--chart);}
.g-msline{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ink);}
.g-today{position:absolute;top:0;bottom:0;width:4px;background:var(--fox);border-left:1px solid var(--ink);border-right:1px solid var(--ink);}
.g-arrows{position:absolute;top:0;left:var(--g-label);z-index:1;pointer-events:none;overflow:visible;}
.g-arrow{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:2 3;}
.g-arrow.is-conflict{stroke-width:2;stroke-dasharray:none;}
.g-arrow-head{fill:var(--ink);}
.g-body{position:relative;z-index:2;}
.g-row{display:flex;}
.g-label{position:sticky;left:0;z-index:3;flex:none;display:flex;align-items:center;gap:8px;min-width:0;width:var(--g-label);padding:0 12px;
  background:var(--paper);border-right:1px solid var(--ink);}
.g-track{position:relative;flex:none;}
.g-lane-row{height:52px;border-bottom:1px solid var(--chart);}
.g-label-lane{font-size:13px;font-weight:600;color:var(--ink-2);}
.g-band{height:40px;border-top:2px solid var(--ink);}
.g-area{margin:0;font:700 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;}
.g-area .tx{width:12px;height:12px;}
.g-area-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g-edit{min-height:30px;min-width:30px;border-color:transparent;background:transparent;}
.g-item-row{height:52px;border-bottom:1px solid var(--chart);}
.g-title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* a bar: an ink-edged card; the fox fill is the progress, with an ink leading edge */
.bar{position:absolute;top:6px;display:flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 0;
  background:var(--paper);border:1px solid var(--ink);overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;}
.bar-fill{position:absolute;left:0;bottom:0;z-index:0;height:7px;background:var(--fox);box-shadow:1px 0 0 var(--ink),0 -1px 0 var(--ink);pointer-events:none;}
.bar-body{position:absolute;inset:0 0 7px;z-index:1;display:flex;align-items:center;gap:7px;min-width:0;padding:0 8px 0 9px;border:0;
  background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:inherit;}
.bar-body .tx{width:12px;height:12px;}
.bar-body:focus-visible{outline:3px solid var(--ink);outline-offset:-4px;}
.bar-text{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.bar-title{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-dates{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* a wide bar shows its faces at its right end; narrower ones leave them to the row's label cell */
.bar.is-wide .bar-body{padding-right:64px;}
.bar .avatars{position:absolute;right:8px;top:calc(50% - 4px);z-index:2;transform:translateY(-50%);pointer-events:none;}
.bar-warn{display:grid;place-items:center;flex:none;width:20px;height:20px;background:var(--fox);border:1px solid var(--ink);}
.bar-handle{position:absolute;top:0;bottom:0;z-index:3;width:8px;cursor:ew-resize;}
.bar-handle.start{left:0;}
.bar-handle.end{right:0;}
/* on hover, two ink ticks say "grab here" (15.7:1, not a faint hatch) */
@media (hover:hover){
  .bar:hover{box-shadow:0 0 0 1px var(--ink);}
  .bar:hover .bar-handle::after{content:"";position:absolute;top:9px;bottom:13px;left:50%;width:3px;margin-left:-1.5px;
    border-left:1px solid var(--ink);border-right:1px solid var(--ink);}
}
.bar.is-narrow .bar-dates,.bar.is-tiny .bar-text,.bar.is-tiny .bar-warn{display:none;}
.bar.is-tiny .bar-body{padding:0 0 0 3px;}
.bar.is-dragging{z-index:2;cursor:grabbing;box-shadow:0 0 0 2px var(--ink);}
.bar.is-late{border-width:2px;}
/* beside a narrow bar: its dates; while dragging: the dates being set */
.bar-side,.drag-tip{position:absolute;top:15px;z-index:2;white-space:nowrap;font-size:12px;pointer-events:none;}
.bar-side{color:var(--ink-2);background:var(--paper);padding:0 3px;}
.drag-tip{padding:2px 6px;background:var(--ink);color:var(--paper);font-weight:600;}
/* late: a hatched tail from the end to today (ink pixels, framed in ink) */
.bar-overdue{position:absolute;top:21px;height:10px;z-index:1;background:url(/hatch-ink.svg) 0 0/6px 6px;image-rendering:pixelated;
  border:1px solid var(--ink);border-left:0;}
/* the row's label cell: late mark, title, who, ⋮ */
.g-item-row .g-label{gap:6px;padding-right:6px;}
.g-item-row .g-label .g-title{flex:1;min-width:0;}
.g-late{display:grid;place-items:center;flex:none;width:18px;height:18px;background:var(--fox);outline:1px solid var(--ink);}
.g-more{flex:none;min-height:30px;min-width:30px;border-color:transparent;background:transparent;}
.g-more[aria-expanded="true"]{background:var(--ink);color:var(--paper);}

/* the dates lane: diamonds, and milestone flags on their ruled line */
.g-date{position:absolute;top:4px;display:flex;align-items:center;gap:4px;max-width:170px;height:22px;color:var(--ink);text-decoration:none;
  font-size:12px;font-weight:600;white-space:nowrap;}
.g-date .px{width:12px;height:12px;}
.g-date-t,.g-ms-t{min-width:0;overflow:hidden;text-overflow:ellipsis;background:var(--paper);padding:0 3px;}
.g-date.is-bare .g-date-t,.g-ms.is-bare .g-ms-t{display:none;}
.g-ms.is-bare{padding:0 4px;}
.g-date.is-past{color:var(--ink-2);}
.g-date:hover .g-date-t,.g-ms:hover .g-ms-t{text-decoration:underline;}
.g-date:focus-visible,.g-ms:focus-visible{outline:3px solid var(--ink);outline-offset:1px;}
.g-ms{position:absolute;top:4px;display:flex;align-items:center;gap:4px;height:22px;padding:0 6px;background:var(--paper);border:1px solid var(--ink);
  color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;}

/* the bar's menu */
.menu{position:fixed;z-index:var(--z-toast);display:grid;min-width:180px;background:var(--paper);border:1px solid var(--ink);}
.menu-item{min-height:44px;padding:0 14px;border:0;border-bottom:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:600;
  text-align:left;cursor:pointer;}
.menu-item:last-child{border-bottom:0;}
.menu-item:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;background:var(--fox);}
@media (hover:hover){.menu-item:hover{background:var(--fox);}}

@media (forced-colors:active){
  .bar,.g-ms{border-color:CanvasText;}
  .bar-fill,.g-today,.g-tick.is-today{forced-color-adjust:none;}
  .g-arrow{stroke:CanvasText;}
}