/* 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)}

/* ── A word's pages as one list down the left (Money, owner 30 Oct 2026) ──
   Beside the page on a wide screen, starting under Find so it stands in the same
   place on every page of the word, whatever the title's height; on a narrow one a
   button above the title names the page and opens the same list as a sheet.
   context_processors._page_list builds it from the word's tabs and rows. */
.page-col--listed{max-width:1496px}
.page-split{flex:1 0 auto; display:flex; flex-direction:column}
.page-split .page-col{max-width:none; margin-inline:0; padding-inline:0}
.page-split__main{flex:1 0 auto; min-width:0; display:flex; flex-direction:column}
/* No tab strip under the title any more, so the page keeps a little of its room. */
.page-split .workspace-header{margin-bottom:8px}
.page-list{
  display:none; flex-direction:column; gap:1px; padding:6px 8px; box-sizing:border-box; border:1px solid var(--line); border-radius:16px; scrollbar-width:thin;
  /* On a short screen the list scrolls by itself: a soft shadow shows at the edge that has more. */
  background:
    linear-gradient(var(--card) 30%, transparent) top / 100% 36px no-repeat local,
    linear-gradient(transparent, var(--card) 70%) bottom / 100% 36px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(12,50,53,.16), transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(12,50,53,.16), transparent) bottom / 100% 12px no-repeat scroll,
    var(--card);
}
.page-list__head{display:none}
.page-list__group{display:flex; flex-direction:column; gap:1px}
.page-list__word{padding:11px 12px 4px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.page-list__rule{display:block; height:1px; margin:2px 8px 0; background:var(--line-soft)}
.page-list__item{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; padding:0 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600; line-height:1.25}
.page-list__item:hover{background:var(--bg)}
.page-list__item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.page-list__item.is-on{background:var(--accent-soft); color:var(--act-text); font-weight:800}
.page-list__note{font-size:12.5px; font-weight:500; color:var(--ink-3); white-space:nowrap}
.page-list__note.is-hot{font-weight:700; color:var(--hot)}
.page-list-shade{position:fixed; inset:0; z-index:60; background:rgba(12,50,53,.48)}
.page-pick{margin:0 0 16px}
.page-pick__button{
  display:flex; align-items:center; gap:10px; width:100%; max-width:440px; min-height:52px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font:inherit; font-size:15.5px; text-align:left; cursor:pointer;
}
.page-pick__button:hover{border-color:#b9cbc4}
.page-pick__button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.page-pick__word{flex-shrink:0; font-weight:600; color:var(--ink-2)}
.page-pick__sep{flex-shrink:0; color:var(--ink-3)}
.page-pick__page{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800}
.page-pick__chev{margin-left:auto; display:inline-flex; color:var(--act-text)}
@media (max-width:1199px){
  .page-list.is-open{
    display:flex; position:fixed; z-index:61; left:0; right:0; top:20px; bottom:0; overflow-y:auto;
    padding:6px 16px 10px; border:0; border-radius:22px 22px 0 0; box-shadow:0 -8px 30px rgba(12,50,53,.18);
  }
  .page-list.is-open .page-list__head{display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 2px}
  .page-list__title{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em}
  .page-list__close{display:grid; place-items:center; width:44px; height:44px; margin-right:-6px; border:0; border-radius:999px; background:none; color:var(--ink-2); cursor:pointer}
  .page-list.is-open .page-list__rule{display:none}
  .page-list.is-open .page-list__word{padding:10px 2px 5px}
  /* Two to a row, so all of Money fits one phone screen. */
  .page-list.is-open .page-list__group{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px}
  .page-list.is-open .page-list__item{flex-direction:column; align-items:flex-start; justify-content:center; gap:0; min-height:44px; border:1px solid var(--line-soft); background:var(--bg); font-size:15px}
  .page-list.is-open .page-list__item.is-on{background:var(--accent-soft); border-color:var(--act-text)}
  .page-list.is-open .page-list__note{font-size:12px}
}
@media (min-width:640px) and (max-width:1199px){
  .page-list.is-open{left:50%; right:auto; top:8vh; bottom:auto; width:min(560px, calc(100vw - 48px)); max-height:84vh; transform:translateX(-50%); border-radius:20px; padding:8px 18px 22px}
}
@media (min-width:1200px){
  .page-split{display:grid; grid-template-columns:216px minmax(0, 1fr); column-gap:28px}
  .page-list{display:flex; align-self:start; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto}
  .page-pick, .page-list-shade{display:none !important}
  /* Expenses' seven groups: four and three until a row of seven fits beside the list. */
  .page-split .k-tiles--seven{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
/* The list takes 244 px from the page, so columns side by side give way 244 px sooner. */
@media (min-width:1200px) and (max-width:1344px){
  .page-split .k-cols, .page-split .k-cols--side, .page-split .k-cols--even, .page-split .k-cols--trucks, .page-split .k-cols--scan{grid-template-columns:minmax(0, 1fr)}
}
/* Money Today's calls need the width: "Entered today" goes under them until the page is wide. */
@media (min-width:1345px) and (max-width:1499px){
  .page-split .k-cols--side{grid-template-columns:minmax(0, 1fr)}
}
@media (min-width:1366px){
  .page-split .k-tiles--seven{grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px}
  .page-split .k-tiles--seven .k-tile{padding:15px 13px 13px}
  .page-split .k-tiles--seven .k-tile.is-selected{padding:14px 12px 12px}
  .page-split .k-tiles--seven .k-tile__num{font-size:20px}
}
@media print{
  .page-list, .page-pick, .page-list-shade{display:none !important}
  .page-split{display:block}
}