/* Material Design 3, as this application uses it. Law 13.
   Tonal surfaces, generous radii, one accent, elevation to say what floats.
   Defined once here and used from here -- never reinvented per page. */

/* The ground every page stands on.
   These two lines used to live in workspace-page.css, which six of eighteen
   pages load. The other twelve kept the browser's own eight pixels of margin
   round the body and the browser's own box model -- so the whole page sat
   eight pixels lower and eight to the right of the page you had just come
   from, and the same class measured differently depending on which screen you
   were on. Tapping from one to the other moved everything, slightly, every
   time. Reported on 11 September 2026: "the page jumps up and down slightly
   but very noticeble."
   They belong here, in the stylesheet every page loads. */
*{box-sizing:border-box}
/* One ground for the whole workspace. Sixteen pages had none and fell through
   to the browser's white; five had a grey of their own out of
   workspace-page.css. Two different floors depending which screen you were on.
   12 September 2026. */
body{margin:0;background:var(--m3-page,#efe9df)}

:root{
  /* One accent, taken from the stone the company works in. */
  --m3-primary:#7a5a22;
  --m3-on-primary:#fff;
  --m3-primary-container:#f3e6cf;
  --m3-on-primary-container:#2c1f06;

  --m3-surface:#fbf9f6;
  --m3-surface-1:#f6f2ec;
  --m3-surface-2:#f1ece3;
  --m3-surface-3:#ece5da;
  --m3-on-surface:#1c1b18;
  --m3-on-surface-variant:#6a655c;
  --m3-outline:#d5cfc4;
  --m3-outline-variant:#e7e2d8;

  --m3-error:#a3352b;
  --m3-error-container:#f8e6e3;
  --m3-good:#1f6f45;
  --m3-good-container:#e2f1e8;

  --m3-r-s:12px; --m3-r-m:16px; --m3-r-l:22px; --m3-r-full:999px;
  --m3-e1:0 1px 2px #0000000f,0 1px 3px 1px #0000000a;
  --m3-e2:0 1px 2px #00000014,0 2px 6px 2px #0000000f;
  --m3-e3:0 4px 8px 3px #00000014,0 1px 3px #0000001a;
}

/* ---- icon buttons: the shape of every main action. Law 1 ---- */
.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:48px;height:48px;flex:0 0 auto;padding:0;border:0;border-radius:var(--m3-r-full);
  background:transparent;color:var(--m3-on-surface-variant);cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,color .15s ease,transform .1s ease}
.icon-button svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover{background:#0000000a}
.icon-button:active{transform:scale(.94)}
.icon-button:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}
.icon-button[disabled],.icon-button[aria-disabled="true"]{opacity:.38;pointer-events:none}
/* A class sets display, so the browser's own [hidden] rule loses. Hiding
   has to mean hidden, or a button nobody asked for stays on the screen. */
.icon-button[hidden]{display:none!important}

/* Filled: the one action this screen is for. */
.icon-button.filled{background:var(--m3-primary);color:var(--m3-on-primary)}
.icon-button.filled:hover{background:#8a662a}
/* Tonal: an action that matters, but is not the one. */
.icon-button.tonal{background:var(--m3-primary-container);color:var(--m3-on-primary-container)}
.icon-button.tonal:hover{background:#ecdcc0}
/* Outlined: available, quieter. */
.icon-button.outlined{border:1px solid var(--m3-outline);color:var(--m3-on-surface)}
/* Danger, and a state that is on. */
.icon-button.danger{background:var(--m3-error-container);color:var(--m3-error)}
.icon-button.on{background:var(--m3-good-container);color:var(--m3-good)}
.icon-button.small{width:40px;height:40px}
.icon-button.small svg{width:19px;height:19px}

/* The rare labelled action: the icon leads, the word follows. Law 1. */
.icon-button.with-label{width:auto;height:48px;padding:0 20px 0 16px;border-radius:var(--m3-r-full)}
.icon-button.with-label span{font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  white-space:nowrap}

/* ---- the row of actions under the header tile. Laws 3 and 4 ---- */
.actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;
  padding:10px 0 0;margin:0}
.actions .spacer{flex:1}
/* On a narrow screen the row scrolls rather than wrapping into a second row of
   half-reachable buttons -- and it scrolls so that the last button, the one
   this screen is for, sits at the right edge under the thumb. Law 3. */
.actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.actions::-webkit-scrollbar{width:0;height:0;display:none}
.actions>*{scroll-snap-align:end}

/* ---- surfaces ---- */
.m3-card{background:var(--m3-surface);border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-r-l);padding:16px}
.m3-card.raised{box-shadow:var(--m3-e1);border-color:transparent}

/* ---- the header tile every page opens with. Law 4 ---- */
.head-tile{background:var(--m3-surface-2);border-radius:var(--m3-r-l);padding:16px;
  box-shadow:var(--m3-e1)}
.head-tile .who{display:flex;align-items:flex-start;gap:12px}
.head-tile h1{flex:1;min-width:0;margin:0;font:600 21px/1.2 Georgia,serif;color:var(--m3-on-surface);
  overflow-wrap:anywhere}
.head-tile .reach{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:10px 0 0;
  font-size:13px;color:var(--m3-on-surface-variant)}
.head-tile .reach a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.head-tile .facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:12px 0 0}

/* ---- the top bar: back is an icon, top left. Law 2 ---- */
.top-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;position:sticky;top:0;z-index:30;
  background:var(--m3-surface-1);border-bottom:1px solid var(--m3-outline-variant);min-height:56px}
.top-bar .title{flex:1;min-width:0;margin:0;font:600 16px/1.2 Georgia,serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-bar .trailing{display:flex;align-items:center;gap:2px;margin-left:auto}

/* ---- the header. One of them, on every page. ----
   Six pages had six of these. Back, the mark, the page, language, what is
   waiting, and you -- in that order, and nowhere else. */
.app-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:4px;
  /* 6 + 48 + 6 + 1: what a filled header measures, so the room kept for it
     before any script runs is the room it ends up taking, to the pixel. */
  padding:6px 8px;box-sizing:border-box;min-height:61px;background:var(--m3-surface-1);
  /* The header owns its own ink. A page with a dark ground sets a pale colour
     on <body>, and the mark inherited it and disappeared into the cream. */
  color:var(--m3-on-surface);
  border-bottom:1px solid var(--m3-outline-variant)}
.app-back{display:flex;align-items:center;flex:0 0 auto}
.app-mark{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;flex:0 1 auto;min-width:0;
  text-decoration:none;color:inherit;border-radius:var(--m3-r-s);
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .1s ease}
.app-mark:hover{background:#0000000a}
.app-mark:active{background:#00000014;transform:scale(.97)}
.app-mark:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}
/* Small. The mark says whose application this is; the name of the page says
   what you are looking at, and that is the thing a person is reading. The mark
   had grown until the page's own name was cut off on a telephone. */
.app-mark .company-wordmark>span{font-size:12px;letter-spacing:.13em}
.app-mark .company-wordmark>small{font-size:6px;letter-spacing:.28em;margin-top:.24em}
.app-title{flex:1;min-width:0;margin:0 4px;font:600 15px/1.2 Georgia,serif;color:var(--m3-on-surface);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-trailing{display:flex;align-items:center;gap:0;margin-left:auto;flex:0 0 auto}
.app-header .language-control{margin:0;flex:0 0 auto}
.app-header .language-trigger{width:44px;height:44px;border:0;background:transparent;border-radius:50%}
.app-header .language-trigger:hover{background:#0000000a}

.icon-button.has-count{position:relative}
.app-count{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#b0442f;color:#fff;font:600 11px/18px -apple-system,Arial,sans-serif;text-align:center}
.app-count[hidden]{display:none}

.app-panel{position:fixed;top:60px;right:8px;left:8px;z-index:45;max-height:70svh;overflow:auto;
  background:var(--m3-surface);color:var(--m3-on-surface);border-radius:var(--m3-r-l);
  box-shadow:var(--m3-e3);padding:6px}
.app-panel[hidden]{display:none}
.app-panel.all{max-height:82svh}
.app-panel h2{font:600 14px/1.2 Georgia,serif;margin:10px 12px}
.app-panel .item{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:48px;padding:11px 12px;
  border:0;border-radius:var(--m3-r-m);background:transparent;color:inherit;text-align:left;
  font:15px/1.35 -apple-system,Arial,sans-serif;text-decoration:none;cursor:pointer}
.app-panel .item:hover{background:var(--m3-surface-2)}
.app-panel .item svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.4;margin-top:2px}
.app-panel .item span{flex:1;min-width:0}
.app-panel .item small{display:block;color:var(--m3-on-surface-variant);font-size:12px;margin-top:2px}
.app-panel .note{color:var(--m3-on-surface-variant);font-size:13px;padding:12px;margin:0}
.app-panel .notice:not(.unread) span{color:var(--m3-on-surface-variant)}
.app-panel .notice.unread{background:#fdf6ec}
.app-panel .notice.unread span{font-weight:600;color:var(--m3-on-surface)}
.app-panel .notice.unread svg{opacity:.9;color:var(--m3-primary)}
.app-panel .see-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;
  border:0;border-top:1px solid var(--m3-outline-variant);background:transparent;
  color:var(--m3-primary);font:600 14px/1 -apple-system,Arial,sans-serif;cursor:pointer;
  border-radius:0 0 var(--m3-r-m) var(--m3-r-m)}
@media(min-width:640px){.app-panel{left:auto;width:380px}}


/* A narrow telephone: the mark gives up room before the page's own name does,
   and only two faces are shown before the count. The name of the page is what
   a person is looking for. */
@media(max-width:430px){
  .app-header{gap:2px;padding:6px 4px}
  .app-mark{padding:0 4px}
  /* Not transform: a scaled element keeps the whole of its old box, so the
     mark looked smaller and still took the room the page's name needed. */
  .app-mark .company-wordmark>span{font-size:11px}
  .app-mark .company-wordmark>small{font-size:5.5px}
  .app-title{margin:0 2px;font-size:14px}
  .live-strip{padding:0 4px}
  .live-strip .live-face:nth-of-type(n+3){display:none}
}

/* ---- who else is here, in the one header ---- */
.live-strip{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 8px;margin:0 2px 0 0;
  border:0;border-radius:var(--m3-r-full);background:transparent;cursor:pointer;flex:0 0 auto}
.live-strip:hover{background:#0000000a}
.live-strip:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}
.live-strip[hidden]{display:none!important}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--m3-good);flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m3-good) 22%,transparent);animation:live-beat 2.4s ease-in-out infinite}
@keyframes live-beat{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-face{display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:50%;
  border:2px solid var(--m3-surface-1);color:#fff;flex:0 0 auto;
  font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.live-face:first-of-type{margin-left:2px}
.live-face.big{width:42px;height:42px;font-size:15px;margin:0;border-width:0}
.live-more{font:600 12px/1 -apple-system,Arial,sans-serif;color:var(--m3-on-surface-variant);padding-left:4px}

.live-sheet{border:0;padding:0;width:min(460px,100%);max-height:80svh;background:var(--m3-surface-2);
  color:var(--m3-on-surface);border-radius:var(--m3-r-l)}
.live-sheet::backdrop{background:#14131099}
.live-sheet-inner{padding:16px}
.live-sheet-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.live-sheet-head h2{flex:1;min-width:0;margin:0;font:600 17px/1.25 var(--m3-serif)}
.live-list{display:grid;gap:8px}
.live-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;
  border-radius:var(--m3-r-m);background:var(--m3-surface-1);color:inherit;text-align:left;cursor:pointer}
.live-row:hover{background:var(--m3-surface-3)}
.live-row .live-said{flex:1;min-width:0}
.live-row b{display:block;font:600 15px/1.3 -apple-system,Arial,sans-serif}
.live-row small{display:block;margin-top:2px;font-size:12px;color:var(--m3-on-surface-variant);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.live-sheet{width:100%;max-width:100%;border-radius:var(--m3-r-l) var(--m3-r-l) 0 0;
  margin:auto auto 0}}

/* ---- how a thing arrives, and how it answers ---- Law 14, and the owner's
   instruction of 10 September 2026: rounded, soft, elegant. No square popup
   with a border line anywhere in this application. */

/* Pages move rather than jump, where the browser can do it. */
@view-transition{navigation:auto}

dialog{border:0;padding:0;border-radius:var(--m3-r-l);background:var(--m3-surface-2);
  color:var(--m3-on-surface);box-shadow:var(--m3-e3)}
dialog::backdrop{background:#141310a6;backdrop-filter:blur(2px)}

/* In and out, both, without a line of script: the modern way of animating a
   thing that is not in the tree until it is opened. Browsers that do not know
   these simply show it. */
@media(prefers-reduced-motion:no-preference){
  dialog:not(.stage):not(.camera){
    opacity:0;transform:translateY(16px) scale(.99);
    transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1),
      overlay .26s allow-discrete,display .26s allow-discrete}
  dialog:not(.stage):not(.camera)[open]{opacity:1;transform:none}
  @starting-style{dialog:not(.stage):not(.camera)[open]{opacity:0;transform:translateY(16px) scale(.99)}}
  dialog::backdrop{opacity:0;transition:opacity .26s ease,overlay .26s allow-discrete,display .26s allow-discrete}
  dialog[open]::backdrop{opacity:1}
  @starting-style{dialog[open]::backdrop{opacity:0}}
  main{animation:page-in .34s cubic-bezier(.2,.7,.2,1) both}
  @keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* A press answers. Nothing bounces; everything settles. */
.icon-button,.thing,.tile,.button{transition:transform .12s cubic-bezier(.2,.7,.2,1),
  background-color .16s ease,box-shadow .16s ease}
.thing:active,.button:active{transform:scale(.985)}

/* On a telephone a sheet comes up from the bottom of the screen and keeps its
   rounded top. Full screen -- the picture viewer, the camera -- stays edge to
   edge, because there the picture is the page. */
@media(max-width:760px){
  dialog:not(.stage):not(.camera):not(.viewer){
    width:100%;max-width:100%;margin:auto auto 0;
    border-radius:var(--m3-r-l) var(--m3-r-l) 0 0;max-height:92dvh}
  /* It rises a little further on a telephone, and only on the way in: a
     resting sheet sits on the bottom edge, not below it. */
  @media(prefers-reduced-motion:no-preference){
    @starting-style{dialog:not(.stage):not(.camera):not(.viewer)[open]{transform:translateY(28px)}}
  }
}

/* ---- two panes on a wide screen ----
   Half and half. The screen you were on keeps working at half the width --
   it is not pushed under anything and it is not squeezed -- and the thing you
   opened has the other half. The one header stays above both. */
/* Under the header, whatever the header measures. It was 61px written down
   here, and a header of any other height left a gap or covered itself. */
.split-pane{position:fixed;z-index:30;top:var(--pane-top,61px);right:0;bottom:0;width:50vw;
  display:flex;flex-direction:column;background:var(--m3-surface);
  border-left:1px solid var(--m3-outline-variant);box-shadow:-24px 0 48px -32px #00000040}
.split-pane[hidden]{display:none}
.split-bar{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 16px;min-height:46px;
  background:var(--m3-surface-2);border-bottom:1px solid var(--m3-outline-variant)}
.split-name{flex:1;min-width:0;font:600 14px/1.2 var(--m3-serif);color:var(--m3-on-surface);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-frame{flex:1;min-height:0;width:100%;border:0;background:var(--m3-surface-1)}

/* The half that is left is a page in its own right: its own width, its own
   middle, and its grids read the room they are in rather than the window. */
/* Everything the page puts on the screen gives up the other half -- not only
   <main>: a page may have a switch or a bar above it, and half a switch under
   the pane is worse than none. The one header keeps the full width, above
   both. */
body.is-split>:not(.split-pane):not(.app-header):not(dialog):not(script):not(style){margin-right:50vw}
body.is-split .page,body.is-split .shell-main{max-width:none}
main{container-type:inline-size;container-name:room}
@media(prefers-reduced-motion:no-preference){
  .split-pane{animation:pane-in .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes pane-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  body.is-split>:not(.split-pane):not(.app-header){transition:margin-right .28s cubic-bezier(.2,.7,.2,1)}
}

body.in-pane .app-header{position:static;min-height:0;padding:0;border:0;background:transparent}
body.in-pane .app-header .app-mark,body.in-pane .app-header .app-trailing,
body.in-pane .app-header .language-control,body.in-pane .app-header .live-strip,
body.in-pane .app-header .app-back{display:none}
body.in-pane .app-header .app-title{display:none}
body.in-pane main{animation:none}

/* The row whose thing is open in the pane. Two panes and no sign of which of
   twenty things you are looking at is a guessing game. */
.is-open{position:relative;background:var(--m3-primary-container)!important;
  box-shadow:var(--m3-e2),inset 0 0 0 2px var(--m3-primary)!important}
.is-open::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:0 4px 4px 0;background:var(--m3-primary)}
.is-open .pill{background:#ffffffa6}
@media(prefers-reduced-motion:no-preference){
  .is-open{transition:background-color .18s ease,box-shadow .18s ease}
}

/* Tabs in the pane: what has been opened from inside it, beside what was
   opened into it. */
.split-tabs{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.split-tabs::-webkit-scrollbar{display:none}
.split-tab{display:inline-flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;max-width:16rem;
  min-height:34px;padding:0 6px 0 12px;border:0;border-radius:var(--m3-r-full);background:transparent;
  color:var(--m3-on-surface-variant);cursor:pointer;
  font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.split-tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-tab:hover{background:#00000008}
.split-tab[aria-current="true"]{background:var(--m3-surface);color:var(--m3-on-surface);
  box-shadow:inset 0 0 0 1px var(--m3-outline-variant)}
.split-tab .split-tab-close{width:26px;height:26px;margin-left:2px}
.split-tab .split-tab-close svg{width:14px;height:14px}
.split-stack{flex:1;min-height:0;display:flex}
.split-stack .split-frame{flex:1;min-height:0;width:100%;border:0;background:var(--m3-surface-1)}
.split-stack .split-frame[hidden]{display:none}
/* The switch across the top, the same one the Media Studio has. */
/* The switch is empty in the page and filled by the page's own script, which
   runs after the browser has already drawn once. Without a height of its own
   it was a thin line at first and a row of buttons a moment later, and
   everything below it jumped down 48 pixels. It keeps its height from the
   start; what goes in it can arrive whenever it likes. */
/* It scrolls with the page. Frozen under a sticky header it left a strip of
   the list showing above it -- the rows slid through the gap between the two
   bars, which is exactly what a person reads as broken. Asked for on
   15 September 2026: "don't like that page switch panel stays frozen and page
   scrolls through but you can see between the header and the switch bar". */
.switch{z-index:6;display:flex;justify-content:center;padding:10px 12px;
  box-sizing:border-box;min-height:69px;
  background:var(--m3-surface-1);border-bottom:1px solid var(--m3-outline-variant)}
.switch-inner{display:flex;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:4px;
  border-radius:var(--m3-r-full);background:var(--m3-surface-3)}
.switch-inner::-webkit-scrollbar{display:none}
.switch button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:40px;padding:0 16px;
  border:0;border-radius:var(--m3-r-full);background:transparent;color:var(--m3-on-surface-variant);
  white-space:nowrap;cursor:pointer;
  font:600 13.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.switch button[aria-current="true"]{background:var(--m3-primary);color:var(--m3-on-primary)}
.switch button:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}
.switch-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#00000014;font-size:11px;line-height:1}
.switch button[aria-current="true"] .switch-count{background:#ffffff2e}
@media(max-width:560px){.switch{padding:8px 6px;min-height:65px}.switch-inner{width:100%}
  .switch button{flex:1 1 auto;padding:0 9px;font-size:12.5px}}

/* ---- a button that says what it does ----
   Icons alone did not work: the owner had to be told what each shape meant
   and where it was. So a main action is a word and a shape together, in a
   colour that says how heavy it is. Law 1 stands for the small controls that
   everyone already knows -- back, close, send -- and this is for the rest. */
.act{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 18px;border:0;border-radius:var(--m3-r-full);cursor:pointer;text-decoration:none;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--m3-surface-3);color:var(--m3-on-surface);
  transition:transform .12s cubic-bezier(.2,.7,.2,1),background-color .16s ease,box-shadow .16s ease}
.act svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.act:hover{box-shadow:var(--m3-e1)}
.act:active{transform:scale(.97)}
.act:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}
.act[disabled],.act[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* The one thing this screen is for. */
.act.first{background:var(--m3-primary);color:var(--m3-on-primary);box-shadow:var(--m3-e1)}
.act.first:hover{background:#8a662a;box-shadow:var(--m3-e2)}
/* What is done often, but is not the point. */
.act.second{background:var(--m3-primary-container);color:var(--m3-on-primary-container)}
.act.second:hover{background:#ecdcc0}
/* Everything else. */
.act.quiet{background:transparent;color:var(--m3-on-surface-variant);
  box-shadow:inset 0 0 0 1px var(--m3-outline)}
.act.quiet:hover{background:#0000000a}
.act.danger{background:var(--m3-error-container);color:var(--m3-error)}
.act.good{background:var(--m3-good-container);color:var(--m3-good)}
/* A row of them: wraps rather than scrolling out of sight, and sits to the
   right, where a hand is. Law 4. */
/* Actions sit under the thing they act on, at its start.
   They were pushed to the right end of the card, which on a wide screen puts
   the main action eight hundred pixels from the title it belongs to and at the
   far end of the reading eye's return path. Right-alignment is a dialog's
   convention -- where the button is the terminus of a question -- and this is a
   content card. Material puts card actions at the start for the same reason.
   12 September 2026. */
.act-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
.act-row.spread{justify-content:space-between}
@media(max-width:520px){
  .act{flex:1 1 auto;padding:0 14px;font-size:13.5px}
  .act-row{gap:7px}
}

/* Looking for something on the page you are on. One bar, one shape, on every
   page that has a list. /site/page-search.js. Asked for on 11 September 2026. */
/* The bar's height belongs to the bar, not to the box inside it, so the room
   kept for it before any script runs is exactly the room it takes. */
.page-search{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 14px;min-height:46px;
  background:var(--m3-surface,#fff);border:1px solid var(--m3-outline-variant,#e3e3e8);
  border-radius:var(--m3-r-full,999px);transition:border-color .15s ease,box-shadow .15s ease}
.page-search:focus-within{border-color:var(--m3-primary,#7a5a22);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m3-primary,#7a5a22) 14%,transparent)}
.page-search.looking{border-color:var(--m3-primary,#7a5a22)}
.page-search-mark{display:flex;flex:0 0 auto;color:var(--m3-on-surface-variant,#6f6f78)}
.page-search-mark svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.page-search input{flex:1;min-width:0;min-height:46px;border:0;background:transparent;color:inherit;
  font:16px/1.4 inherit;outline:none}
.page-search input::-webkit-search-cancel-button{cursor:pointer}

/* The plus, in the lower right corner of the screen, on every page that can add
   something. /site/page-add.js. It used to sit in the row above the list and
   went off the screen the moment a person scrolled down -- exactly when they
   had looked through everything and wanted one more. Asked for 11 September 2026. */
.page-add{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:58px;height:58px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--m3-primary,#7a5a22);color:var(--m3-on-primary,#fff);cursor:pointer;
  box-shadow:0 6px 20px #00000038,0 1px 3px #0000002e;
  transition:transform .12s ease,box-shadow .15s ease}
.page-add svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.page-add:active{transform:scale(.94)}
.page-add:focus-visible{outline:3px solid var(--m3-primary,#7a5a22);outline-offset:3px}
/* Every page scrolls past it. */
html.has-page-add main,html.has-page-add .page{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
/* Beside an open pane the button belongs to the pane, not to the window edge. */
body.is-split .page-add{right:calc(50vw + max(16px,env(safe-area-inset-right)))}

/* ---- a page wears the stone its tile wears ----

   The workspace home is a wall of stone: every section is a tile cut from a
   real slab, with the ink that can be read on it. Tapping one used to throw all
   of that away — every page underneath was the same beige as every other,
   whatever it was for. Now the header carries the section's own stone, so
   Requests is honey onyx and the Media Studio is green marble, and the home and
   the page inside it can never drift apart: they read the same row of
   ui_sections. 12 September 2026. */

body.wears-stone .app-header{
  /* Sticky, not relative. Relative was enough for the wash below to hang off,
     and it quietly cancelled the sticky in the base rule: the header scrolled
     away on every workspace page wearing stone, and the split pane -- pinned
     under where the header used to be -- was left with a strip of the list
     showing above it. Reported 15 September 2026: "the split screen scrolls
     weird, right side gets detached from the header". A sticky box is a
     containing block too, so the wash still hangs off it. */
  position:sticky;top:0;
  background-image:var(--stone);
  background-size:cover;
  background-position:center;
  color:var(--stone-ink,var(--m3-on-surface));
  border-bottom:0;
}
/* The stone is a photograph, so the words on it need a ground of their own or
   the veining eats them. A wash the colour of the ink's opposite, weakest where
   the mark sits and strongest under the title. */
body.wears-stone .app-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#00000073,#0000004d 62%,#00000026);
}
body.wears-stone.pale-stone .app-header::before{
  background:linear-gradient(90deg,#ffffff8c,#ffffff66 62%,#ffffff33);
}
body.wears-stone .app-header>*{position:relative;z-index:1}
/* Everything in the header takes the ink the stone was given, including the
   shapes, which are drawn in currentColor. */
body.wears-stone .app-header .app-title,
body.wears-stone .app-header .icon-button,
body.wears-stone .app-header .company-wordmark{color:inherit}
/* A hairline of the stone's own ink, so the header ends somewhere. */
body.wears-stone .app-header{box-shadow:inset 0 -1px 0 #00000026,0 1px 10px #0000000f}

/* ---- the component kit, on the pages that have taken it ----

   docs/references/mockups/component-kit/. Written here rather than in
   `ui_tokens` because it is being tried on a page at a time: the engine room
   first, on 15 September 2026, then the requests list. When the owner says the
   whole workspace takes it, these become rows in `ui_tokens` -- where they can
   change without a deploy -- and this block goes.

   A page opts in by wearing `kit` (the engine room's container is addressed by
   its id as well, because that is what business.html gives it). Nothing global
   changes until it is asked for. */
/* The two faces the four languages are read in. Only the alphabets this
   application uses: Latin, Cyrillic including the Kazakh letters, Georgian.
   Self-hosted, because a page the owner's customers load asks nobody else for
   anything. font-display:swap, so the words are readable before they arrive. */
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSerifGeorgian-600-georgian.woff2') format('woff2');
  unicode-range:U+0589,U+058A,U+10A0-10FF,U+1C90-1CBF,U+1F10-1F1F,U+205A,U+2D00-2D2F}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSerifGeorgian-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif Georgian';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSerifGeorgian-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:400;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:400;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:400;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-400-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Sans Endel';font-style:normal;font-weight:600;font-display:swap;
  src:url('/site/assets/fonts/NotoSans-600-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

/* The container is `id="view-room"` in business.html, not a class. This block
   said `.view-room` and so matched nothing: every variable below was undefined,
   every background that referenced one fell back to transparent, and the dark
   room of 12 September 2026 never rendered at all. Found on 15 September 2026
   by reading the live page's computed styles rather than the source. Both
   selectors now, so neither spelling can lose the room again. */
.kit,#view-room,.view-room{
  /* The kit's ramps. One page's worth, until the workspace takes them. */
  --room-page:#f5ead8;
  --room-surface:#ebddc5;
  --room-surface-1:#f9f4ed;
  --room-surface-2:#eee7db;
  --room-surface-3:#dcd3c4;
  --room-ink:#201e1d;
  --room-muted:#645c50;
  --room-line:#c0b6a5;
  --room-line-soft:rgba(32,30,29,.16);

  --room-owed:#8c491a;        /* the fill of anything that carries pale ink */
  --room-owed-large:#c67139;  /* large numerals, icons and borders only */
  --room-owed-soft:#ffe1d0;
  --room-settled:#56633f;
  --room-settled-soft:#e1eecc;

  --room-serif:'Noto Serif Georgian',Georgia,serif;
  --room-sans:'Noto Sans Endel',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --room-shadow-1:0 1px 2px rgba(46,43,37,.14);
  --room-shadow-2:0 3px 10px rgba(46,43,37,.16);

  font-family:var(--room-sans);
  color:var(--room-ink);
}

/* ---- every form is a popup, and it looks the same on every page ----
   sheet.js builds this shape; the rules lived in business-page.css, which only
   that page loads -- so the same popup opened on a request with no styling at
   all: labels beside their boxes, the way out under the title, save and cancel
   loose at the bottom left. The owner, 16 September 2026: "what type and kind
   of popup is this". They are here now, where every page can see them. */
.form-sheet{width:min(600px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;padding:0;
  border:0;border-radius:24px;background:var(--m3-surface,#fffbf5);color:var(--m3-on-surface);
  display:none;flex-direction:column;overflow:hidden}
.form-sheet[open]{display:flex}
.form-sheet::backdrop{background:#11100dcc}
.form-sheet header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 10px 12px 20px;border-bottom:1px solid var(--m3-outline-variant,#ddd6c9)}
.form-sheet h2{margin:0;font:600 19px/1.2 var(--m3-sans,system-ui)}
.form-sheet header .language-control{margin-left:auto}
.sheet-out{width:44px;height:44px;min-width:44px;border-radius:50%}
.form-sheet-body{flex:1;min-height:0;padding:18px 20px 4px;overflow-y:auto;display:grid;gap:16px}
.form-sheet-note{margin:0 20px;padding:10px 14px;border-radius:12px;background:#fdf1ee;color:#6d2318;
  font-size:14px}
.form-sheet-note[hidden]{display:none}
.form-sheet-feet{display:flex;gap:8px;padding:16px 20px max(16px,env(safe-area-inset-bottom));
  border-top:1px solid var(--m3-outline-variant,#ddd6c9);background:var(--m3-surface,#fffbf5)}
.form-sheet-feet>*{flex:1;min-height:50px;justify-content:center}

.form-sheet-body .field{display:grid;gap:6px}
.form-sheet-body .field>span{display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--m3-on-surface-variant)}
.form-sheet-body .field input,.form-sheet-body .field textarea{width:100%;min-height:50px;
  padding:12px 14px;border:1px solid var(--m3-outline,#aaa294);border-radius:14px;
  background:var(--m3-surface-container-lowest,#fff);font-size:16px;color:inherit;font-family:inherit}

/* The assistant's key, shown once in a sheet to be copied. Law 11c. */
.form-sheet-body .assistant-key{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--m3-outline,#aaa294);
  border-radius:14px;font:14px/1.2 ui-monospace,Menlo,monospace;background:var(--m3-surface-container-lowest,#fff);color:inherit}