/* Approved workspace geometry. Product content remains in its own module. */
/* Only the tokens. Pinning grid-template-rows to a literal 68px re-clipped
   the heading track the shared minmax(var(--smdl-top), auto) exists to let
   grow, and left a token and a literal to be kept in step by hand. */
.smdl { --smdl-side: 224px; --smdl-top: 68px; }
.smdl-corner, .smdl-top { background: var(--surface); border-bottom: 1px solid var(--hair-soft); }
.smdl-corner { border-right: 0; }
/* Three tracks, not two. Collapsing to two put the page's name and the search
   field in the SAME cell -- the title left-aligned in it, the field centred in
   it -- which was invisible only while every title was hidden. A long one
   would have run straight under the field. The shared stylesheet's symmetric
   outer tracks are what centre the field on the window rather than merely
   between its neighbours; this file keeps its own compact height and inset. */
.smdl-top, .smdl-top:has(.smdl-live-actions) {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(600px, 42vw)) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 16px; padding: 10px 24px;
}
/* The page's name, visible. This rule used to hide the shell's only <h1>,
   while _pagehead.html gave its title away to that same <h1> on the grounds
   that the shell owned it -- two halves of a plan, each assuming the other
   rendered it, and between them no page in the product had a visible title at
   all. The loudest thing on every screen was an 11.5px uppercase eyebrow.

   The topbar already has a heading track sized for this (smdl-shell.css:314),
   so the fix is to stop hiding it. The track shrinks and ellipsises before it
   can disturb the centred search. */
.smdl-top .smdl-heading { min-width: 0; }
.smdl-top .smdl-heading h1 { font-size: 17px; }
.smdl-top > .smdl-search, .smdl-top > .smdl-search-gap,
.smdl-top:has(.smdl-live-actions) > .smdl-search {
  grid-column: 2; grid-row: 1; width: 100%; min-width: 0; justify-self: stretch;
}
.smdl-top .smdl-search { height: 44px; }
.smdl-top .smdl-tools { display: flex; grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 8px; }
.smdl .smdl-switch-btn { min-height: 44px; gap: 10px; }
.smdl-switch-btn .smdl-mark { flex: 0 0 28px; width: 28px; height: 28px; }
.smdl .smdl-switch-btn .ic.chev { display: inline-flex; flex: none; font-size: 14px; }
.smdl .smdl-new-btn, .smdl .smdl-iconbtn { min-height: 44px; }
.smdl .smdl-iconbtn { min-width: 44px; }
.smdl-canvas { min-width: 0; container: workspace / inline-size; padding: 24px clamp(16px,2.5vw,40px) 40px; }
.smdl-canvas::before { display:none; }
/* Touch target, not row height: min-height beats the shared height, so this
   line silently made every rail row 44px and the rail 170px taller than the
   shell had budgeted for. The pointer-coarse query keeps the target where a
   finger needs it without taxing a mouse. */
.smdl-side-scroll > a, .smdl-side-scroll > .smdl-soon { font-size:15px; }
@media (pointer:coarse) {
  .smdl-side-scroll > a, .smdl-side-scroll > .smdl-soon { min-height:44px; }
}
.smdl-appname { font-size:17px; }
.smdl-new-compact { display:none; }
/* THREE MEASURES, NAMED. The product had five literals scattered across four
   stylesheets -- 1080, 1180, 1240, 1320, 1600 -- with no rule saying which
   page got which, and the 1180 was dead because this line overrode it
   everywhere inside the canvas. Three is the number of genuinely different
   jobs:

     --measure-wide  the two-pane workbench, which needs the room
     --measure-page  an ordinary page: tables, cards, the dashboard
     --measure-form  a single column of reading or fields

   --measure-form is 760px because that is the width the product's own form
   card already used (.formpage in smdl.css), arrived at from line length
   rather than from a breakpoint. It was briefly 1080 -- which is not a
   measure at all, it is the width at which .split stops being two columns.
   A token that carries a breakpoint under a measure's name is worse than no
   token: every page that asks for "the form measure" gets a column half as
   wide again as anything anyone chose.

   A page that wants a different width picks one of these; it does not invent
   a sixth number. */
.smdl { --measure-wide: 1600px; --measure-page: 1320px; --measure-form: 760px; }
.smdl-canvas > .page { max-width: var(--measure-page); margin-inline: auto; }
.smdl-canvas > .page, .smdl-canvas > .page > * { min-width: 0; }
.smdl-canvas :where(.card, .panel, .section, .split, .grid, .field, .control, .actions, .form-actions, .ctas, article, section, header, footer) { min-width: 0; }
.smdl-canvas :where(input, textarea, select, .btn) { max-width: 100%; }
.smdl-canvas :where(pre, code) { max-width: 100%; overflow-wrap: anywhere; }
.smdl-page-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.smdl-page-actions > *, .smdl-page-actions .actions { max-width: 100%; min-width: 0; flex-wrap: wrap; }
.smdl-page-actions :is(.btn,button) { height: auto; min-height: 44px; white-space: normal; }
.smdl-page-actions .smdl-live-actions { display:flex; flex-wrap:wrap; gap:8px; }
.smdl-select-trigger { min-height: 44px; padding: 10px 12px; font-size: 14px; font-weight: 500; }
.smdl-select-menu { padding: 6px; border-radius: 10px; }
.smdl-select-option { min-height: 44px; padding: 10px 36px 10px 12px; font-size: 14px; font-weight: 500; }
.smdl-select-option small { display:block; color:var(--ink-3); font-size:12px; line-height:18px; font-weight:400; margin-top:3px; }
.smdl-select-group { font-size:12px; line-height:18px; font-weight:500; text-transform:none; letter-spacing:0; }
.smdl-select-sheet {
  inset: auto 0 0; margin: 0 auto; width: min(100%,560px); max-width: 100%;
  max-height: calc(100dvh - 16px); padding: 0; border: 1px solid var(--hair);
  border-radius: 16px 16px 0 0; background: var(--card); color: var(--ink); overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.smdl-select-sheet[open] { display:flex; flex-direction:column; }
.smdl-select-sheet::backdrop { background: var(--scrim); }
.smdl-select-sheet > header { display:flex; align-items:center; justify-content:space-between; flex:none; padding:8px 12px 8px 20px; border-bottom:1px solid var(--hair-soft); gap:12px; }
.smdl-select-sheet > header strong { font-size:14px; font-weight:500; color:var(--ink-2); }
.smdl-select-sheet .smdl-select-menu { position:relative; inset:auto; min-width:0; min-height:0; max-height:calc(100dvh - 86px); width:100%; border-radius:0; box-shadow:none; overflow-y:auto; padding:8px 8px max(16px,env(safe-area-inset-bottom)); outline:none; }
.smdl-select-sheet .smdl-select-option { min-height:56px; }
.smdl-mobile-navigation { inset: auto 0 0; margin:0 auto; width:min(100%,560px); height:auto; max-height:calc(100dvh - 12px); border-radius:16px 16px 0 0; overflow:hidden; background:var(--surface); color:var(--ink); }
.smdl-mobile-navigation-head { flex:none; padding:10px 12px 10px 20px; border-bottom:1px solid var(--hair-soft); }
.smdl-mobile-navigation-head strong { font-size:16px; font-weight:600; }
.smdl-mobile-navigation-body { overflow-y:auto; min-height:0; overscroll-behavior:contain; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.smdl-mobile-navigation-label { margin:12px 20px 4px; font-size:12px; line-height:20px; font-weight:500; color:var(--ink-3); }
.smdl-mobile-navigation .smdl-switch-pop { position:static; width:100%; max-width:none; min-width:0; max-height:none; box-shadow:none; border:0; border-radius:0; padding:8px 12px; }
.smdl-mobile-navigation .smdl-brandrow { display:none; }
.smdl-mobile-navigation .smdl-app-item { min-height:56px; border-radius:8px; padding:10px 12px; font-size:15px; }
.smdl-mobile-navigation .smdl-app-item[aria-current="page"] { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hair-soft); }
.smdl-mobile-navigation .smdl-side { position:static; height:auto; max-height:none; min-height:0; overflow:visible; padding:4px 12px; border:0; background:transparent; }
.smdl-mobile-navigation .smdl-side > a, .smdl-mobile-navigation .smdl-side > .smdl-soon { justify-content:flex-start; width:100%; height:auto; min-height:44px; padding:10px 12px; }
.smdl-mobile-navigation .smdl-side > .smdl-soon { display:flex; gap:8px; }
.smdl-mobile-navigation .smdl-side > .smdl-soon .soon { display:inline; position:static; width:auto; height:auto; clip-path:none; margin-left:auto; font-size:12px; }
.smdl-mobile-navigation .smdl-side .lbl { position:static; width:auto; height:auto; clip:auto; clip-path:none; white-space:normal; overflow:visible; }
.smdl-mobile-navigation .smdl-side .smdl-cap { display:none; }
.smdl-mobile-navigation .smdl-side-foot { padding-top:12px; }
.smdl-mobile-navigation .smdl-side-foot .who { display:flex; }
.smdl-mobile-navigation .user-pop { z-index:150; }
.smdl-mobile-navigation [data-smdl-side-toggle] { display:none !important; }
/* There is no third collapse here. This file used to strip every label off
   the rail between 761 and 1200px -- on every page, at a width no control
   could reverse, without setting .is-slim, so the shell's own script did not
   know the rail was collapsed and withheld the tooltips that would have named
   the icons. A reader on a half-width window met seventeen unlabelled glyphs
   beside a full-width page and reasonably read it as broken. Collapse belongs
   to the shared shell, which does it at one width, with one token, reversibly,
   and with the labels still reachable. */
@media (max-width:760px) {
  /* auto, not a literal: this file and the shared one disagreed about the
     phone top bar by 32px, and whichever lost left the three-band layout
     inside a track it was not tuned for. */
  .smdl, .smdl.is-slim { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"top" "side" "canvas"; }
  .smdl.has-mobile-navigation { grid-template-rows:auto minmax(0,1fr); grid-template-areas:"top" "canvas"; }
  .smdl-corner { position:absolute; inset:0 auto auto 0; height:60px; width:76px; padding:8px 8px 8px 12px; border:0; background:transparent; }
  .smdl .smdl-switch-btn { padding:4px 0; justify-content:flex-start; gap:8px; }
  .smdl .smdl-appname { display:none; }
  .smdl-top, .smdl-top:has(.smdl-live-actions) { min-height:0; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:44px 44px; gap:8px; padding:8px 12px 12px; }
  .smdl-top .smdl-tools { display:flex; grid-column:2; grid-row:1; align-self:center; gap:8px; }
  .smdl-top > .smdl-search, .smdl-top > .smdl-search-gap { grid-column:1 / -1; grid-row:2; max-width:none; width:100%; }
  .smdl-new-main { max-width:148px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .smdl-new-label { display:none; }
  .smdl-new-compact { display:inline; }
  .smdl-new-caret { min-width:36px; padding-inline:8px; }
  .smdl-canvas { padding:20px 16px 32px; }
  .smdl-mobile-navigation[open] { animation:none; }
  .smdl-canvas :is(.btn,button:not(.smdl-select-native),input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select) { min-height:44px; }
  .smdl-canvas :is(input,textarea,select) { font-size:16px; }
}
@media (max-width:359px) { .smdl-new-main { max-width:104px; } .smdl-top .smdl-tools { gap:4px; } }