/* OBSCURA OS: the front door as the application (home-shell.js).

   One window that fills the screen: the site's bar along the top, a dense
   sidebar down the left, and the main area, which holds Today and the
   tabs. Everything is the site's tokens (theme.css). Today is the ways to
   start and every application as a mark and a name, and nothing explaining
   them (the owner, 7 October 2026).

   Without a script the same markup is a page: the sidebar is a column of
   links beside Today, and on a phone it follows Today down the page. */

/* ------------------------------------------------------------ the window */

.hx-page{margin:0;background:var(--paper);}
@media (min-width:761px){
  .hx-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
}
.hx-page .os-topbar{flex:none;max-width:none;margin:0;border-radius:0;border-left:0;border-right:0;
  box-shadow:none;padding:6px 14px;min-height:48px;}
.hx{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:264px minmax(0,1fr);}

/* ------------------------------------------------------------ the sidebar */

.hx-side{display:flex;flex-direction:column;min-height:0;background:var(--paper-inset);
  border-right:1px solid var(--rule);font-size:var(--text-sm);color:var(--ink-soft);}
.hx-side-top{flex:none;display:flex;align-items:center;gap:6px;padding:10px 10px 8px;}
.hx-side-x{display:none;}
.hx-find{position:relative;flex:1 1 auto;margin:0;}
.hx-find-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.hx-find-ico{position:absolute;left:9px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;}
.hx-find-input{box-sizing:border-box;width:100%;height:32px;padding:0 30px 0 30px;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--paper-raised);color:var(--ink);font:inherit;font-size:var(--text-sm);}
.hx-find-input::placeholder{color:var(--ink-faint);}
.hx-find-input:focus-visible{outline:2px solid var(--focus);outline-offset:0;border-color:transparent;}
.hx-find-input::-webkit-search-cancel-button{display:none;}
.hx-find-key{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:0 5px;border:1px solid var(--rule);
  border-radius:var(--radius-sm);font:500 var(--text-2xs)/16px var(--font-mono);color:var(--ink-faint);background:var(--paper);}
.hx-find-input:focus ~ .hx-find-key{display:none;}
@media (pointer:coarse){ .hx-find-key{display:none;} }

.hx-nav,.hx-results{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 16px;}
.hx-nav[hidden],.hx-results[hidden]{display:none;}
.hx-side-foot{flex:none;display:flex;flex-direction:column;gap:1px;padding:6px 8px 8px;border-top:1px solid var(--rule);}

.hx-sect{margin-top:14px;}
.hx .hx-sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 4px;padding:0 8px;
  font:600 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.hx-sect-head a{color:inherit;text-decoration:none;}
/* The section's name is its link: 24px to point at, WCAG 2.2's floor, laid
   over the space around it so the heading does not move. */
.hx-sect-head a{display:inline-flex;align-items:center;min-height:24px;margin:-4px 0;}
.hx-sect-head a:hover{color:var(--ink);}
.hx-sect-head a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);}
.hx-tag{font-weight:500;letter-spacing:.04em;text-transform:none;font-size:var(--text-2xs);}
.hx-list,.hx-tools{list-style:none;margin:0;padding:0;}

.hx-item{position:relative;display:flex;align-items:center;gap:9px;box-sizing:border-box;width:100%;min-height:30px;
  padding:4px 8px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-soft);
  font:inherit;font-size:var(--text-sm);line-height:1.25;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard);}
.hx-item:hover{background:var(--paper-raised);color:var(--ink);}
.hx-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.hx-item[aria-current="page"]{background:var(--paper-raised);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);}
.hx-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-meta,.hx-n{flex:none;font:500 var(--text-2xs)/1 var(--font-mono);color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* The mark: each product's own drawing, as a line in its hue and nothing
   behind it, at the size of the line of text it sits on. */
.hx-ico{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--ink-faint);}
.hx-ico svg{width:17px;height:17px;stroke-width:var(--icon-stroke);}
.hx-ico .ico-plane{fill-opacity:var(--ico-plane);}
@supports (color: oklch(0.5 0.1 200)){
  .hx-ico{color:oklch(var(--ico-l) var(--ico-c) var(--ico-h, 258));}
  .hx-ico.is-neutral{color:var(--ink-faint);}
}

.hx-lock{flex:none;display:grid;place-items:center;width:14px;height:14px;color:var(--ink-faint);}
.hx-lock svg{width:13px;height:13px;}
.is-paid .hx-lock,:root[data-pro="on"] .hx-lock{display:none;}

.hx-group > summary{list-style:none;}
.hx-group > summary::-webkit-details-marker{display:none;}
.hx-group > summary::after{content:"";flex:none;width:6px;height:6px;margin:0 3px 0 2px;border-right:1.5px solid var(--ink-faint);
  border-bottom:1.5px solid var(--ink-faint);transform:rotate(-45deg);transition:transform var(--dur-2) var(--ease-standard);}
.hx-group[open] > summary::after{transform:rotate(45deg);}
.hx-tools{margin:2px 0 6px 17px;padding-left:9px;border-left:1px solid var(--rule);}
.hx-tool{display:block;padding:4px 8px;border-radius:var(--radius-sm);color:var(--ink-soft);text-decoration:none;
  font-size:var(--text-xs);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-tool:hover{background:var(--paper-raised);color:var(--ink);}
.hx-tool:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.hx-tool[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--paper-raised);}
.hx-tool-all{color:var(--accent-strong);}
.hx-file .hx-meta{font-family:var(--font-ui);}

/* The search's answers, in place of the sidebar while there is a query. */
.hx-res-group{margin-top:10px;}
.hx .hx-res-head{margin:0 0 3px;padding:0 8px;font:600 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);}
.hx-res{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;}
.hx-res:hover,.hx-res.is-act{background:var(--paper-raised);}
.hx-res.is-act{box-shadow:inset 2px 0 0 var(--accent);}
.hx-res-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.hx-res-sub{font-size:var(--text-2xs);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-res-tag{flex:none;font:600 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-faint);}
.hx-res-none{margin:14px 8px;font-size:var(--text-sm);line-height:1.5;color:var(--ink-soft);}
.hx-res-none a{color:var(--accent-strong);}

/* ------------------------------------------------------------ the main area */

.hx-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper);}
.hx-head{flex:none;display:flex;align-items:stretch;gap:6px;min-height:38px;padding:0 10px;border-bottom:1px solid var(--rule);
  background:var(--paper-inset);}
.hx-menu{display:none;}
/* On a desktop, Menu is the sidebar's switch: an icon at the start of the
   tab strip, and with the sidebar hidden the window is all main area. */
@media (min-width:761px){
  :root.hx-js .hx-menu{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;margin:0 2px 0 -6px;padding:0;
    border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-faint);cursor:pointer;}
  :root.hx-js .hx-menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  :root.hx-js .hx-menu svg{width:18px;height:18px;}
  :root.hx-js .hx-menu:hover{color:var(--ink);background:var(--paper);}
  :root.hx-js .hx-menu:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
  :root.hx-js.hx-side-hidden .hx{grid-template-columns:minmax(0,1fr);}
  :root.hx-js.hx-side-hidden .hx-side{display:none;}
}
.hx-tabs{display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;}
.hx-tabs::-webkit-scrollbar{display:none;}
.hx-tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;max-width:220px;box-sizing:border-box;
  padding:0 12px;border:0;color:var(--ink-faint);text-decoration:none;font-size:var(--text-xs);font-weight:500;}
a.hx-tab{min-height:38px;}
.hx-tab:hover{color:var(--ink);}
.hx-tab.is-on{color:var(--ink);background:var(--paper);box-shadow:inset 0 2px 0 var(--accent),1px 0 0 var(--rule),-1px 0 0 var(--rule);}
.hx-tab-link{display:inline-flex;align-items:center;gap:7px;min-width:0;min-height:38px;color:inherit;text-decoration:none;}
span.hx-tab{padding-right:4px;}
.hx-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-tab .hx-ico{width:15px;height:15px;}
.hx-tab .hx-ico svg{width:14px;height:14px;}
.hx-tab-x{display:grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);
  background:none;color:var(--ink-faint);cursor:pointer;}
.hx-tab-x svg{width:13px;height:13px;}
.hx-tab-x:hover{background:var(--paper-inset);color:var(--ink);}
.hx-tab :focus-visible,a.hx-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.hx-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);}

.hx-view{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;}
/* The window does not move. Its views scroll inside it, and a pull past
   the top of one used to carry on to the page: on an iPhone the whole
   window, bar and all, slid down and bounced back, and a long enough pull
   reloaded the page and closed every tab. */
:root.hx-js{overscroll-behavior:none;}
.hx-view[hidden]{display:none;}
.hx-frames{display:none;position:relative;flex:1 1 auto;min-height:0;}
.hx-frames.is-on{display:block;}
.hx-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--paper);}
.hx-frame[hidden]{display:none;}
/* An application opened in the window, or gone back to, rises into place
   rather than appearing; Today, gone back to, arrives as it does first. */
.hx-frames.is-on .hx-frame:not([hidden]){--os-fade:var(--dur-fade);animation:os-rise-soft var(--dur-4) var(--ease-emph) backwards;}

/* ------------------------------------------------------------ Today */

.hx-today{box-sizing:border-box;max-width:780px;padding:28px 36px 0;}
.hx-intro{max-width:68ch;}
.hx-kicker{margin:0 0 10px;font:600 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.hx-title{margin:0;font-size:var(--text-2xl);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;}

.hx-block{margin-top:28px;}
.hx-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
.hx-block-head a,.hx-block-head button{font-size:var(--text-xs);color:var(--accent-strong);}
.hx .hx-label{margin:0 0 10px;font:600 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.hx-block-head .hx-label{margin:0;}

.hx-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.hx-act{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;padding:8px 12px;border-radius:var(--radius-md);
  background:var(--paper-raised);box-shadow:var(--elev-1);color:var(--ink);text-decoration:none;font-size:var(--text-sm);font-weight:500;
  transition:box-shadow var(--dur-2) var(--ease-standard),translate var(--dur-2) var(--ease-standard);}
.hx-act svg{flex:none;width:18px;height:18px;color:var(--accent-strong);stroke-width:var(--icon-stroke);}
.hx-act:hover{box-shadow:var(--elev-2);}
.hx-act:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.hx-drop{margin:10px 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--ink-faint);}
/* Nothing is dropped on a phone. */
@media (hover:none){ .hx-drop{display:none;} }

/* The launcher: every application as its mark and its name, as a phone's
   home screen shows them. The mark sits on a square faintly of its own
   hue; the name is the only word. */
.hx-launch .hx-label a{color:inherit;text-decoration:none;}
@media (pointer:coarse){ .hx-launch .hx-label a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;} }
.hx-launch .hx-label a:hover{color:var(--ink);}
.hx-launch .hx-label a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);}
.hx-launch + .hx-launch{margin-top:20px;}
.hx-apps{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px;margin:0;padding:0;}
/* A wide screen: Today was 780px at most, so at 1440px a third of the
   window sat empty beside six columns of marks. Ten columns lay the
   Workspace's ten applications on one row and the paid ones on two, as a
   desktop's launcher fills the screen it has. */
@media (min-width:1360px){
  .hx-today{max-width:1160px;}
  .hx-apps{grid-template-columns:repeat(10,minmax(0,1fr));}
}
.hx-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;box-sizing:border-box;min-height:44px;
  padding:4px 2px 2px;border-radius:var(--radius-md);color:var(--ink-soft);text-decoration:none;font-size:var(--text-xs);line-height:1.25;}
.hx-app .hx-ico{width:52px;height:52px;box-sizing:border-box;border-radius:var(--radius-lg);border:1px solid var(--rule);
  background:var(--paper-raised);transition:border-color var(--dur-2) var(--ease-standard),translate var(--dur-2) var(--ease-standard),scale var(--dur-1) var(--ease-standard);}
.hx-app .hx-ico svg{width:26px;height:26px;}
@supports (color: color-mix(in oklab, red 10%, blue)){
  .hx-app .hx-ico{background:color-mix(in oklab, currentColor 8%, var(--paper-raised));
    border-color:color-mix(in oklab, currentColor 20%, var(--rule));}
}
.hx-app-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.hx-app:hover{color:var(--ink);}
.hx-app:hover .hx-ico{border-color:var(--rule-strong);}
.hx-app:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
/* Said once, beside the group's name, rather than on every tile; not at
   all once this browser has Pro. */
.hx-launch-pro{margin-left:10px;color:var(--ink-faint);}
:root[data-pro="on"] .hx-launch-pro{display:none;}

/* Arriving. Today opens as a launcher does: the title, then Start, then
   the applications dealt out a step apart, the Workspace's first and the
   paid ones after them, eight steps and then together, so the last tile
   is still settled within half a second. Opacity and transform only, from
   theme.css's tokens; with motion switched down each is the site's short
   fade (theme.css, MOTION, SWITCHED DOWN). Today is shown again each time
   it is returned to, and arrives again, as a launcher does. */
.hx-intro,.hx-acts > *,.hx-launch .hx-label,.hx-apps > li{--os-fade:var(--dur-fade);}
.hx-intro{animation:os-rise var(--dur-5) var(--ease-emph) backwards;}
.hx-acts > *{animation:os-rise var(--dur-4) var(--ease-emph) backwards;animation-delay:var(--os-step);}
.hx-acts > :nth-child(2){animation-delay:calc(var(--os-step) * 2);}
.hx-acts > :nth-child(3){animation-delay:calc(var(--os-step) * 3);}
.hx-acts > :nth-child(4){animation-delay:calc(var(--os-step) * 4);}
.hx-launch .hx-label{animation:os-rise-soft var(--dur-4) var(--ease-standard) backwards;animation-delay:calc(var(--os-step) * 4);}
.hx-apps > li{--hx-at:calc(var(--os-step) * 5);animation:os-ico-in var(--dur-4) var(--ease-emph) backwards;animation-delay:var(--hx-at);}
.hx-launch + .hx-launch .hx-apps > li{--hx-at:calc(var(--os-step) * 5 + var(--stagger) * 4);}
.hx-apps > li:nth-child(2){animation-delay:calc(var(--hx-at) + var(--stagger));}
.hx-apps > li:nth-child(3){animation-delay:calc(var(--hx-at) + var(--stagger) * 2);}
.hx-apps > li:nth-child(4){animation-delay:calc(var(--hx-at) + var(--stagger) * 3);}
.hx-apps > li:nth-child(5){animation-delay:calc(var(--hx-at) + var(--stagger) * 4);}
.hx-apps > li:nth-child(6){animation-delay:calc(var(--hx-at) + var(--stagger) * 5);}
.hx-apps > li:nth-child(7){animation-delay:calc(var(--hx-at) + var(--stagger) * 6);}
.hx-apps > li:nth-child(n+8){animation-delay:calc(var(--hx-at) + var(--stagger) * 7);}
/* Under the pointer a mark lifts a little, and a press sets it down. */
.hx-app:hover .hx-ico{translate:0 -3px;}
.hx-app:active .hx-ico{scale:0.94;transition-duration:var(--dur-1);}
.hx-act:hover{translate:0 -1px;}
:root[data-motion="none"] .hx-app .hx-ico,:root[data-motion="none"] .hx-act{translate:none;scale:none;}
/* Gentle (a device asking for less motion): the mark does not lift, its
   square brightens a little instead, so the pointer is still answered. */
@supports (color: color-mix(in oklab, red 10%, blue)){
  :root[data-motion-gentle] .hx-app:hover .hx-ico{background:color-mix(in oklab, currentColor 18%, var(--paper-raised));border-color:color-mix(in oklab, currentColor 40%, var(--rule));}
}

.hx-rows{list-style:none;margin:0;padding:0;border-radius:var(--radius-md);background:var(--paper-raised);box-shadow:var(--elev-1);}
.hx-rows li + li{border-top:1px solid var(--rule);}
.hx-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:6px 14px;
  color:var(--ink);text-decoration:none;font-size:var(--text-sm);}
.hx-row:hover{background:var(--paper-inset);}
.hx-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.hx-row-when{font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.04em;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.hx-row-when.is-late{color:var(--danger);}
.hx-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hx-row-from{font-size:var(--text-2xs);color:var(--ink-faint);}

.hx-today .boot-continue .boot-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.hx-today .home-wait{text-align:left;padding:22px 24px 18px;}
.hx-today .home-wait > p,.hx-today .home-wait-form{margin-left:0;}
.hx-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:var(--text-sm);}
.hx-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--accent-strong);}
.hx-links a:hover{color:var(--ink);}
.hx-links a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm);}
/* A finger needs the full 44px; a pointer is happy with the tighter row. */
@media (pointer:coarse){ .hx-links{column-gap:20px;} .hx-links a{min-height:44px;min-width:44px;padding:0 9px;margin:0 -9px;} }
.hx-act:active{box-shadow:var(--elev-1);background:var(--paper-inset);}
.hx-today .os-footer{max-width:none;margin:36px 0 0;padding-left:0;padding-right:0;}

/* ------------------------------------------------------------ narrower */

@media (max-width:1100px){
  .hx-acts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .hx{grid-template-columns:232px minmax(0,1fr);}
  .hx-today{padding:22px 22px 0;}
  .hx-today .boot-continue .boot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* A phone: the main area takes the width and the sidebar is a drawer, on
   the left, over it. Without a script the sidebar follows Today down the
   page instead, still a list of links. */
@media (max-width:760px){
  .hx{display:flex;flex-direction:column-reverse;}
  .hx-page .os-topbar{padding:6px 10px;}
  .hx-today{padding:18px 16px 0;}
  .hx-title{font-size:var(--text-xl);}
  .hx-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;}
  .hx-row-when{grid-column:1 / -1;}
  .hx-item,.hx-tool{min-height:44px;display:flex;align-items:center;}
  .hx-apps{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));}

  :root.hx-js .hx-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
  :root.hx-js .hx{flex:1 1 auto;min-height:0;display:flex;flex-direction:row;}
  :root.hx-js .hx-main{flex:1 1 auto;}
  :root.hx-js .hx-side{position:fixed;left:0;top:0;bottom:0;z-index:10001;width:min(320px,86vw);
    transform:translateX(-102%);visibility:hidden;box-shadow:var(--elev-2);
    transition:transform var(--dur-4-out) var(--ease-exit),visibility 0s linear var(--dur-4-out);}
  :root.hx-js.hx-drawer-open .hx-side{transform:none;visibility:visible;
    transition:transform var(--dur-4) var(--ease-standard),visibility 0s;}
  :root.hx-js .hx-side-x{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-md);
    background:none;color:var(--ink-soft);cursor:pointer;}
  :root.hx-js .hx-side-x svg{width:18px;height:18px;}
  :root.hx-js .hx-side-x:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
  .hx-find-input{height:44px;font-size:var(--text-md);}
  .hx-scrim{position:fixed;inset:0;z-index:10000;background:oklch(0 0 0 / 0.45);}
  .hx-scrim[hidden]{display:none;}
  :root.hx-js .hx-menu{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;margin-left:-6px;padding:0 10px;
    border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;}
  :root.hx-js .hx-menu svg{width:20px;height:20px;}
  :root.hx-js .hx-menu:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
  .hx-head{min-height:44px;padding:0 8px;}
  /* On a phone an application opens as a page of its own (home-shell.js),
     so the window's row of tabs only ever held Today: a third bar under
     the site's two. It goes while it holds one tab, and the row with the
     Menu button scrolls away with Today rather than staying pinned over
     it, as the site's bar does on every other page's content. */
  .hx-tabs:not(:has(.hx-tab + .hx-tab)){display:none;}
  :root.hx-js .hx-main:has(> #hxToday:not([hidden])){overflow-y:auto;overscroll-behavior-y:contain;}
  :root.hx-js #hxToday{flex:none;overflow:visible;}
  a.hx-tab,.hx-tab-link{min-height:44px;}
  .hx-tab-x{width:44px;height:44px;}
  .hx-acts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:400px){
  .hx-tab{max-width:160px;}
}

/* Less motion: nothing slides or fades. */
:root[data-motion="none"] .hx-side,:root[data-motion="none"] .hx-item,:root[data-motion="none"] .hx-app .hx-ico,
:root[data-motion="none"] .hx-act,:root[data-motion="none"] .hx-group > summary::after{transition:none;}
@media (prefers-reduced-motion:reduce){
  .hx-side,.hx-item,.hx-app .hx-ico,.hx-act,.hx-group > summary::after{transition:none;}
}