/* The frame: a dark rail of workspace words, and tabs for everything under a word.
   Hand-written like the other sheets here; colours come from the tokens set in
   base.html so the dark theme follows without a second copy of these rules. */

/* ── Rail ─────────────────────────────────────────────────────────────── */
.rail{
  position:sticky; top:0; height:100vh; width:88px; flex-shrink:0;
  flex-direction:column; align-items:center; gap:3px;
  padding:16px 0 14px; overflow-y:auto; scrollbar-width:none;
  background:var(--rail); color:var(--rail-fg);
}
.rail::-webkit-scrollbar{display:none}
.rail-brand{display:flex; align-items:center; justify-content:center; width:80px; min-height:56px; margin-bottom:12px; color:#fff; text-decoration:none}
.rail-nav{display:flex; flex-direction:column; align-items:center; gap:3px; width:100%}
.rail-item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:74px; min-height:60px; padding:6px 2px; border-radius:15px;
  color:var(--rail-fg); text-decoration:none;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.1;
}
.rail-item:hover{background:rgba(255,255,255,.07); color:#fff}
.rail-item.is-active{background:var(--rail-active); color:#fff}
.rail-item:focus-visible{outline:2px solid #fff; outline-offset:2px}
.rail-icon{font-size:23px; font-variation-settings:'opsz' 24,'wght' 300,'FILL' 0,'GRAD' 0}
.rail-item.is-active .rail-icon{font-variation-settings:'opsz' 24,'wght' 400,'FILL' 0,'GRAD' 0}
.rail-label{max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-alert{
  position:absolute; top:5px; right:12px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#f0703f; color:#1a0e08; border:2px solid var(--rail);
  font-size:11px; font-weight:800; letter-spacing:0; line-height:1;
}
.rail-item.is-active .rail-alert{border-color:var(--rail-active)}
.rail-help{margin-top:auto}

/* ── The same words on a phone ────────────────────────────────────────── */
.rail-drawer{
  position:absolute; left:0; top:0; bottom:0; width:min(320px,88vw); overflow-y:auto;
  display:flex; flex-direction:column; background:var(--rail); color:var(--rail-fg);
}
.rail-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 8px}
.rail-drawer-close{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#fff; background:rgba(255,255,255,.08)}
.rail-drawer-nav{padding:6px 10px 12px}
.rail-drawer-section{padding:10px 0 4px}
.rail-drawer-word{
  display:flex; align-items:center; gap:9px; padding:8px 10px 6px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rail-fg);
}
.rail-drawer-link{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px 0 38px; border-radius:11px;
  font-size:15px; font-weight:500; color:#e7f1f1; text-decoration:none;
}
.rail-drawer-link:hover{background:rgba(255,255,255,.07)}
.rail-drawer-link.is-active{background:var(--rail-active); color:#fff; font-weight:700}
.rail-drawer-top{padding-left:12px; font-weight:700}
.rail-drawer-help{margin:auto 10px 14px; color:var(--rail-fg)}
.rail-drawer-usual{border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:10px; margin-bottom:4px}
.rail-drawer-usual[hidden]{display:none}
.rail-drawer-where{margin-left:auto; font-size:12px; font-weight:500; color:var(--rail-fg); opacity:.8}
.rail-drawer-count + .rail-drawer-where{margin-left:8px}
.rail-drawer-count{margin-left:auto; min-width:22px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.14); font-size:12px; font-weight:700; text-align:center}

/* ── Tabs: every page under the current word ──────────────────────────── */
.section-tabs{
  display:flex; gap:24px; margin:16px 0 18px; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
/* Ten tabs overflow on a laptop, and with the scrollbar hidden there was
   nothing to say so and nothing to drag. The end that still has tabs fades
   out, so the strip reads as "there is more this way"; kit.js sets the class
   and makes the wheel reach them. */
.section-tabs.has-more-right{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 52px), rgba(0,0,0,.15));
  mask-image:linear-gradient(to right, #000 calc(100% - 52px), rgba(0,0,0,.15));
}
.section-tabs.has-more-left{
  -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 52px), rgba(0,0,0,.15));
  mask-image:linear-gradient(to left, #000 calc(100% - 52px), rgba(0,0,0,.15));
}
.section-tabs.has-more-left.has-more-right{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.15), #000 52px, #000 calc(100% - 52px), rgba(0,0,0,.15));
  mask-image:linear-gradient(to right, rgba(0,0,0,.15), #000 52px, #000 calc(100% - 52px), rgba(0,0,0,.15));
}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  height:44px; padding:0 2px; border-bottom:2.5px solid transparent; margin-bottom:-1px;
  font-size:16px; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap;
}
.section-tab:hover{color:var(--ink)}
.section-tab.is-active{color:var(--ink); font-weight:700; border-bottom-color:var(--accent)}
.section-tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}
/* A page that belongs under a tab and has no row of its own (Money ▸ Today's
   Approvals): a quieter link pushed to the end of the strip. */
.section-tab--aside{margin-left:auto; font-size:14.5px}
.section-tab--aside + .section-tab--aside{margin-left:0}
.section-tab-note{font-weight:500; color:var(--ink-2)}
.section-tab-note.is-hot{font-weight:700; color:var(--hot)}
.section-tab-count{
  min-width:20px; padding:0 6px; border-radius:999px; background:var(--line-soft); color:var(--ink-2);
  font-size:12px; font-weight:700; line-height:20px; text-align:center;
}

/* ── Page heading: a name and one sentence, beside the page's one button ── */
.page-col{width:100%; max-width:1248px; margin-inline:auto; padding-inline:16px; box-sizing:border-box}
@media (min-width:640px){ .page-col{padding-inline:24px} }
.workspace-heading h1{font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.15}
.workspace-sentence{margin:10px 0 0; max-width:560px; font-size:15.5px; line-height:1.5; color:var(--ink-2)}
.workspace-actions{padding-top:2px}
.util__where > div{display:inline; margin:0 !important; font:inherit !important; color:inherit !important; letter-spacing:inherit !important}
@media (max-width:639px){ .workspace-heading h1{font-size:27px} .workspace-sentence{font-size:15px} }

/* Figures line up in columns wherever they are read down a page. */
main table td, main table th{font-variant-numeric:tabular-nums}

/* A row's own button is one word or two; squeezed, it broke a letter to a line. */
main table td a.inline-flex, main table td button.inline-flex{white-space:nowrap}

/* ── Dark: Kenby's named colours follow the theme, never the light values ── */
html.theme-dark .section-tab.is-active{border-bottom-color:#6fcbd1}
html.theme-dark .text-muted{color:var(--ink-2) !important}
html.theme-dark .border-line{border-color:var(--line) !important}
html.theme-dark .border-line-soft{border-color:var(--line-soft) !important}
html.theme-dark .bg-line-soft{background-color:var(--line) !important}
html.theme-dark .bg-paper, html.theme-dark .hover\:bg-paper:hover{background-color:#20262f !important}
html.theme-dark .text-bad-fg{color:#ff9d7e !important}
html.theme-dark .bg-bad-bg{background-color:#3a1f17 !important}
html.theme-dark .text-warn-fg{color:#f0c46a !important}
html.theme-dark .bg-warn-bg{background-color:#3a2e12 !important}
html.theme-dark .text-ok-fg{color:#a5dd55 !important}
html.theme-dark .bg-ok-bg{background-color:#1e3312 !important}

/* ── Rail foot: help, then who is signed in (the design puts the account here) ── */
.rail-foot{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:10px}
.rail-help{margin-top:0}
.rail-icon{display:inline-flex}
.rail-me{
  width:40px; height:40px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:#fff; color:var(--on-good); font:inherit; font-size:13px; font-weight:800;
}
.rail-me:focus-visible{outline:2px solid #fff; outline-offset:3px}
.rail-menu{
  position:fixed; left:96px; bottom:14px; z-index:70; width:260px; padding:8px; border-radius:16px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 18px 50px rgba(8,32,34,.24); color:var(--ink);
}
.rail-menu__who{display:flex; flex-direction:column; padding:8px 10px 10px; border-bottom:1px solid var(--line-soft); margin-bottom:4px}
.rail-menu__name{font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-menu__role{font-size:13px; color:var(--ink-2)}
.rail-menu__item{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 10px; border-radius:10px; border:0; background:none; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; text-align:left}
.rail-menu__item:hover{background:var(--head)}
.rail-menu__out{color:var(--hot)}
.rail-menu__group{padding:6px 10px 8px}
.rail-menu__cap{display:block; margin-bottom:6px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.rail-menu__pair{display:flex; gap:4px; padding:3px; border-radius:999px; background:var(--pill)}
.rail-menu__pair button{flex:1; height:32px; border:0; border-radius:999px; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-2); cursor:pointer}
.rail-menu__pair button[aria-pressed=true]{background:var(--card); color:var(--ink)}

/* ── The line above the title: where you are, and Find ─────────────── */
.util{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; margin-bottom:22px}
.util__where{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.util__where a{color:inherit; text-decoration:none}
.util__where a:hover{text-decoration:underline}
.util__right{display:flex; align-items:center; gap:10px}
.util__find{
  display:inline-flex; align-items:center; gap:9px; width:300px; height:40px; padding:0 12px 0 14px; box-sizing:border-box;
  border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-3); font:inherit; font-size:14.5px; cursor:pointer;
}
.util__find:hover{border-color:#b9cbc4}
/* The phone bar has its own round Find button; this wide one would wrap onto three lines there. */
@media (max-width:767px){ .util__find{display:none} }
.util__find > span:not(.util__kbd){white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.util__kbd{margin-left:auto; padding:1px 7px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:700; color:var(--ink-3)}
.util__bell{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2)}
.util__bell:hover{color:var(--ink)}
@media (max-width:1023px){ .util{margin-bottom:12px; min-height:0} .util__right{display:none} }
@media (max-width:1023px){ .rail-menu{left:auto; right:12px; bottom:auto; top:74px} }

/* ── + New, under Today (6 Oct 2026): a rail word that opens a list ─────── */
.rail-item--new{border:0; background:none; font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer}
.rail-item--new[aria-expanded="true"]{background:rgba(255,255,255,.07); color:#fff}
/* Every word in the height of a laptop screen. */
.rail .rail-item{min-height:52px}
.rail .rail-item--foot{min-height:44px}
@media (max-height:820px){
  .rail{padding:10px 0}
  .rail-brand{min-height:40px; margin-bottom:4px}
  .rail .rail-item{min-height:45px; gap:2px; padding:4px 2px}
  /* Settings and Help keep their names for a screen reader, as icons side by side. */
  .rail-foot{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px; padding-top:6px}
  .rail .rail-item--foot{width:38px; min-height:38px; padding:0}
  .rail-item--foot .rail-label{display:none}
  .rail-me{width:34px; height:34px}
}
@media (max-height:680px){
  .rail{padding:6px 0}
  .rail-brand{min-height:34px; margin-bottom:2px}
  .rail .rail-item{min-height:40px; gap:1px; padding:3px 2px; font-size:10.5px}
  .rail .rail-icon svg{width:20px; height:20px}
}

.topbar-new{
  margin-left:auto; flex-shrink:0; height:40px; padding:0 14px 0 10px; display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:999px; background:var(--accent); color:#fff; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700;
}
@media (max-width:380px){ .topbar-new{padding:0 10px} .topbar-new span{display:none} }

.new-menu-backdrop{position:fixed; inset:0; z-index:55; background:rgba(12,50,53,.28)}
.new-menu{
  position:absolute; left:100px; top:16px; width:min(780px, calc(100vw - 124px)); max-height:calc(100vh - 32px); overflow:auto;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(12,50,53,.18);
}
@media (max-width:1023px){ .new-menu{left:12px; right:12px; top:74px; width:auto; max-height:calc(100vh - 90px)} }
.new-menu__head{display:flex; align-items:center; gap:12px; padding:16px 20px 12px; border-bottom:1px solid var(--line-soft)}
.new-menu__title{white-space:nowrap; margin:0; font-size:19px; font-weight:800}
.new-menu__how{font-size:13.5px; color:var(--ink-2)}
.new-menu__close{margin-left:auto; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:10px; background:var(--head); color:var(--ink-2); cursor:pointer}
.new-menu__own{padding:12px 20px 0}
.new-menu__groups{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px 28px; padding:14px 20px 8px}
.new-menu__word{margin:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--act-text)}
.new-menu__item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:0 8px; margin:0 -8px;
  border-radius:9px; color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600;
}
.new-menu__item:hover{background:var(--head); outline:none}
/* The arrows move a ring through the entries, so where Enter goes is never a guess. */
.new-menu__item:focus-visible{background:var(--accent-soft); outline:none; box-shadow:inset 0 0 0 2px var(--act-text)}
.new-menu__item--own{margin:0; padding:0 12px; min-height:46px; background:var(--accent-soft); font-weight:800}
.new-menu__kind{font-size:12.5px; font-weight:500; color:var(--ink-3)}
.new-menu__key{flex-shrink:0; min-width:20px; padding:1px 5px; border:1px solid var(--line); border-radius:5px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; text-align:center; color:var(--ink-2)}
.new-menu__foot{margin:0; padding:10px 20px 14px; font-size:13px; color:var(--ink-3)}

/* Find: what this browser opened lately, and the doors on a found customer. */
.command-palette-recent{display:flex; flex-direction:column; padding:2px 6px 6px}
.command-palette-recent__item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:12px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:600}
.command-palette-recent__item:hover, .command-palette-recent__item:focus-visible{background:#eef0f3; outline:none}
.command-palette-recent__where{flex-shrink:0; font-size:12.5px; font-weight:500; color:var(--ink-3)}
.command-palette-door{display:inline-flex; align-items:center; height:30px; padding:0 10px; border-radius:8px; background:var(--head); color:var(--ink); font-size:12.5px; font-weight:700; text-decoration:none}
.command-palette-door:hover{background:var(--pill)}