/* Copied from Naldano/brand@c0e1598 (glass.css). Naldano glass: the screen layer for the workbench and the customer sign-in.
   Uses only the custom properties of tokens.css (copy both files and fonts/ together).
   Glass is the control layer (frame, side panel, dialogs, cards); content such as tables stays on
   solid sheets, so lists scroll without blur. Works under a style-src 'self' CSP: no inline styles,
   no data: URLs. */

:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
/* The ground: brand paper in light, the night forest in dark, with a faint light from above. It needs no markup
   and scrolls with the page. */
html{background:radial-gradient(1600px 720px at 50% -240px,light-dark(var(--cream),var(--dusk)),transparent) no-repeat light-dark(var(--paper),var(--night));
  color:var(--glass-text);-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{margin:0;font:var(--text-body)/1.6 var(--sans)}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--glass-focus);outline-offset:2px}
::selection{background:var(--glass-row-current)}

/* Shared glass surface: tint, sheen, bright rim, depth. Blur only where content can pass under. */
.g-frame,.g-panel,.g-dialog,.g-card{position:relative;isolation:isolate;color:var(--glass-text);box-shadow:var(--glass-edge),var(--glass-shadow-m)}
/* Thin glass (frame, panel, cards) carries every text in the full text colour; dialogs are dense. */
.g-frame,.g-panel,.g-card{--glass-text-2:var(--glass-text);--glass-text-accent:var(--glass-text)}
.g-card{border-radius:var(--glass-radius-l);background:var(--glass-sheen),var(--glass-card)}
.g-frame{background:var(--glass-sheen),var(--glass-frame);-webkit-backdrop-filter:var(--glass-filter-frame);backdrop-filter:var(--glass-filter-frame)}
.g-panel{border-radius:var(--glass-radius-l);background:var(--glass-sheen),var(--glass-panel);-webkit-backdrop-filter:var(--glass-filter-panel);backdrop-filter:var(--glass-filter-panel);box-shadow:var(--glass-edge),var(--glass-shadow-l)}
.g-dialog{border:0;padding:0;color:var(--glass-text);border-radius:var(--glass-radius-l);background:var(--glass-sheen),var(--glass-dialog);-webkit-backdrop-filter:var(--glass-filter-dialog);backdrop-filter:var(--glass-filter-dialog);box-shadow:var(--glass-edge),var(--glass-shadow-l)}
.g-dialog::backdrop{background:var(--glass-scrim)}
.g-dialog:modal{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.g-dialog[open]{animation:g-rise var(--glass-slow) var(--glass-ease-liquid)}
/* Under a modal the scrim covers everything else, so the other layers drop their blur. */
:root:has(.g-dialog:modal) :is(.g-frame,.g-panel,.g-dialog:not(:modal)){-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes g-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* Pointer light: glass catches the light where the pointer is (glass.js sets --mx and --my). */
.g-frame::after,.g-btn::after,.g-icon-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,-60%),var(--glass-glow),transparent 70%);opacity:0;transition:opacity var(--glass-base) var(--glass-ease)}
:is(.g-frame,.g-btn,.g-icon-btn):hover::after{opacity:1}

/* Solid content */
.g-sheet{background:var(--glass-sheet);border-radius:var(--glass-radius-l);box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-shadow-m)}
.g-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--glass-control-line) transparent}

/* Type */
.g-label{margin:0;font:500 var(--text-label)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--glass-text-2)}
.g-title{margin:0;font-family:var(--serif);font-weight:400;font-variant-numeric:lining-nums;font-size:var(--text-chapter);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.g-title em,.g-entry em{font-style:italic}
.g-entry{margin:0;font:500 var(--text-entry)/1.15 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.01em}
.g-text-2{color:var(--glass-text-2)}
.g-mono{font-family:var(--mono);font-size:.9em}
.g-key{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;font:12px/1 var(--mono);color:var(--glass-text-2);background:var(--glass-control);box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 -1px 0 var(--glass-line)}

/* Buttons: rounded glass, the primary in the room's accent; the round button is the brand circle. */
.g-btn,.g-icon-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;margin:0;cursor:pointer;
  color:var(--glass-text);background:var(--glass-control);box-shadow:var(--glass-edge-s),var(--glass-shadow-s);text-decoration:none;
  transition:transform var(--glass-fast) var(--glass-ease),box-shadow var(--glass-base) var(--glass-ease),background-color var(--glass-base) var(--glass-ease)}
.g-btn{min-height:40px;padding:0 16px;border-radius:var(--glass-radius-s);font:500 var(--text-small)/1 var(--sans);white-space:nowrap}
.g-icon-btn{width:40px;height:40px;flex:none;border-radius:50%;padding:0}
.g-btn svg,.g-icon-btn svg{width:18px;height:18px;flex:none}
:is(.g-btn,.g-icon-btn):hover{transform:translateY(-1px);box-shadow:var(--glass-edge-s),var(--glass-shadow-m)}
:is(.g-btn,.g-icon-btn):active{transform:translateY(0) scale(.97);transition-duration:60ms}
.g-btn--primary{color:var(--glass-on-accent);background:var(--glass-accent);box-shadow:inset 0 1px 0 color-mix(in srgb,white 28%,transparent),0 8px 22px -10px var(--glass-accent)}
.g-btn--primary:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,white 28%,transparent),0 12px 28px -10px var(--glass-accent)}
.g-btn--quiet{background:transparent;box-shadow:none}
.g-btn--quiet:hover{background:var(--glass-control);box-shadow:var(--glass-edge-s)}
.g-btn--danger{color:var(--glass-text-accent);box-shadow:inset 0 0 0 1.5px currentColor}
.g-btn--danger:hover{box-shadow:inset 0 0 0 1.5px currentColor,var(--glass-shadow-m)}
.g-btn--large{min-height:52px;padding:0 24px;font-size:var(--text-body);border-radius:calc(var(--glass-radius-s) + 4px)}
:is(.g-btn,.g-icon-btn):disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--glass-edge-s)}
.g-btn .g-count{font-variant-numeric:tabular-nums;padding-left:8px;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent)}

/* Fields */
.g-field{display:grid;gap:6px;min-width:0}
.g-field > label,.g-field > .g-label{font:500 var(--text-label)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--glass-text-2)}
.g-hint{margin:0;font-size:13px;line-height:1.45;color:var(--glass-text-2)}
.g-input,.g-select select{appearance:none;width:100%;min-height:42px;margin:0;padding:9px 14px;border:1px solid var(--glass-control-line);border-radius:var(--glass-radius-s);
  background:var(--glass-field);color:var(--glass-text);font:var(--text-small)/1.4 var(--sans);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent);
  transition:border-color var(--glass-base) var(--glass-ease),box-shadow var(--glass-base) var(--glass-ease)}
.g-input::placeholder{color:var(--glass-hint);opacity:1}
.g-input:hover,.g-select select:hover{border-color:var(--glass-text-2)}
.g-input:focus-visible,.g-select select:focus-visible{border-color:var(--glass-accent);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent),0 0 0 4px var(--glass-row-hover)}
.g-select{position:relative;display:block}
.g-select select{padding-right:40px;cursor:pointer}
.g-select::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border:solid var(--glass-text-2);border-width:0 1.5px 1.5px 0;translate:0 -70%;rotate:45deg;pointer-events:none}
.g-search{position:relative;display:flex;align-items:center;min-width:0}
.g-search > svg{position:absolute;left:13px;width:17px;height:17px;color:var(--glass-text-2);pointer-events:none}
.g-search .g-input{padding-left:38px;padding-right:40px}
.g-search .g-key{position:absolute;right:10px}
.g-search .g-input::-webkit-search-cancel-button{display:none}
.g-check,.g-radio{appearance:none;flex:none;display:inline-grid;place-content:center;width:18px;height:18px;margin:0;border:1.5px solid var(--glass-control-line);background:var(--glass-field);cursor:pointer;
  transition:background-color var(--glass-fast) var(--glass-ease),border-color var(--glass-fast) var(--glass-ease)}
.g-check{border-radius:5px}
.g-radio{border-radius:50%}
.g-check::after{content:"";width:9px;height:5px;border:solid var(--glass-on-accent);border-width:0 0 2px 2px;transform:translate(0,-1px) rotate(-45deg) scale(0);transition:transform var(--glass-base) var(--glass-ease-liquid)}
.g-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--glass-on-accent);transform:scale(0);transition:transform var(--glass-base) var(--glass-ease-liquid)}
:is(.g-check,.g-radio):checked{background:var(--glass-accent);border-color:var(--glass-accent)}
.g-check:checked::after{transform:translate(0,-1px) rotate(-45deg) scale(1)}
.g-radio:checked::after{transform:scale(1)}
.g-choice{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-small);cursor:pointer}

/* Segmented control with a liquid lens (glass.js moves it; without script the current item is lit). */
.g-seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:calc(var(--glass-radius-s) + 4px);background:var(--glass-well);box-shadow:inset 0 1px 3px color-mix(in srgb,var(--ink) 16%,transparent),inset 0 -1px 0 var(--glass-rim-low);max-width:100%;overflow-x:auto;scrollbar-width:none}
.g-seg > :is(a,button){position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border:0;border-radius:var(--glass-radius-s);background:none;
  color:var(--glass-text-2);font:500 var(--text-small)/1 var(--sans);text-decoration:none;cursor:pointer;transition:color var(--glass-base) var(--glass-ease)}
.g-seg > :is(a,button):hover{color:var(--glass-text)}
.g-seg > :is([aria-current]:not([aria-current="false"]),[aria-pressed="true"],[aria-checked="true"]){color:var(--glass-text)}
.g-seg:not([data-lens]) > :is([aria-current]:not([aria-current="false"]),[aria-pressed="true"],[aria-checked="true"]){background:var(--glass-lens);box-shadow:var(--glass-edge-s),var(--glass-shadow-s)}
.g-seg__lens{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:var(--glass-radius-s);background:var(--glass-lens);box-shadow:var(--glass-edge-s),var(--glass-shadow-s);
  transition:transform var(--glass-slow) var(--glass-ease-liquid),width var(--glass-slow) var(--glass-ease-liquid)}

/* Status marks: a small dot and a word, never a pill. */
.g-status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.g-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sage)}
.g-status--new::before{background:var(--glass-accent);box-shadow:0 0 0 3px var(--glass-row-hover)}
.g-status--held::before{border-radius:2px;background:var(--glass-text)}
.g-status--scanning::before{background:none;border:1.5px solid var(--glass-text-2);border-top-color:transparent;animation:g-spin 1.1s linear infinite}
@keyframes g-spin{to{rotate:1turn}}

/* Table on a solid sheet: no blur, sticky solid head, rows light up on hover and when current. */
.g-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-small);font-variant-numeric:tabular-nums}
.g-table th{position:sticky;top:0;z-index:1;padding:13px 12px;background:var(--glass-sheet);border-bottom:1px solid var(--glass-line);text-align:left;white-space:nowrap;
  font:500 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--glass-text-2)}
.g-table td{height:46px;padding:0 12px;border-bottom:1px solid var(--glass-line);white-space:nowrap}
.g-table :is(th,td):first-child{padding-left:20px}
.g-table :is(th,td):last-child{padding-right:20px}
.g-table tbody tr{cursor:pointer;transition:background-color var(--glass-fast) var(--glass-ease)}
.g-table tbody tr:hover{background:var(--glass-row-hover)}
.g-table tbody tr[aria-current="true"]{background:var(--glass-row-current)}
.g-table tbody tr[aria-current="true"] td:first-child{box-shadow:inset 3px 0 0 var(--glass-accent)}
.g-table .g-num{text-align:right}

/* Meta list and version list inside panels */
.g-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:var(--text-small)}
.g-meta dt{color:var(--glass-text-2)}
.g-meta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.g-list{list-style:none;margin:0;padding:0}
.g-list > li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--glass-line)}

/* Large QR block for the sign-in: always ink on a paper plate, in every theme and mode, so phones read it. */
.g-qr{display:grid;place-items:center;margin:0 auto;padding:16px;border-radius:var(--glass-radius-m);background:var(--page);color:var(--ink);forced-color-adjust:none;
  box-shadow:inset 0 0 0 1px var(--line),0 1px 0 var(--glass-rim),var(--glass-shadow-m)}
.g-qr svg{display:block;width:min(232px,58vw);height:auto;shape-rendering:crispEdges}

/* Shell: floating frame on top, content and side panel below. */
.g-frame{position:fixed;z-index:20;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 12px 10px 24px;border-radius:var(--glass-radius-l)}
.g-frame__mark{display:inline-flex;flex:none;line-height:0;border-radius:6px}
.g-frame__mark img{height:24px;width:auto}
.g-frame__end{display:flex;align-items:center;gap:8px;margin-left:auto}
.g-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:16px;height:100vh;height:100dvh;padding:96px 16px 16px}
.g-shell > *{min-height:0}
.g-on-dark{display:none}
:root[data-theme="dark"] .g-on-dark{display:revert}
:root[data-theme="dark"] .g-on-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .g-on-dark{display:revert}
  :root:not([data-theme="light"]) .g-on-light{display:none}
}
@media (max-width:760px){
  html{scroll-padding-top:136px}
  .g-frame{top:8px;left:8px;right:8px;flex-wrap:wrap;row-gap:8px;padding:10px 10px 10px 18px}
  .g-frame > .g-seg{order:3;flex:1 1 100%}
  .g-frame > .g-seg > *{flex:1 1 auto;justify-content:center;padding:0 10px}
  .g-shell{display:block;height:auto;padding:136px 8px 8px}
  .g-panel{position:fixed;z-index:30;left:8px;right:8px;bottom:8px;max-height:min(78vh,640px);overflow:auto;
    transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform var(--glass-slow) var(--glass-ease-liquid),visibility 0s linear var(--glass-slow)}
  .g-panel[data-open]{transform:none;visibility:visible;transition:transform var(--glass-slow) var(--glass-ease-liquid),visibility 0s}
}

/* Opaque fallbacks: reduced transparency and more contrast swap every tint for a solid surface. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root{--glass-frame:var(--glass-solid);--glass-panel:var(--glass-solid);--glass-dialog:var(--glass-solid);--glass-card:var(--glass-solid);
    --glass-control:var(--glass-solid-2);--glass-sheen:none;--glass-filter-frame:none;--glass-filter-panel:none;--glass-filter-dialog:none;--glass-glow:transparent}
}
@media (prefers-contrast:more){
  :root{--glass-text-2:var(--glass-text);--glass-line:var(--glass-control-line);--glass-control-line:var(--glass-text);--glass-rim:var(--glass-control-line);--glass-rim-low:var(--glass-control-line);
    --glass-scrim:light-dark(color-mix(in srgb,var(--ink) 70%,transparent),color-mix(in srgb,black 80%,transparent))}
}

/* Forced colours: system colours, solid surfaces with borders, the lens as a highlighted outline. */
@media (forced-colors:active){
  :is(.g-frame,.g-btn,.g-icon-btn)::after{display:none}
  :is(.g-frame,.g-panel,.g-dialog,.g-card,.g-sheet){background:Canvas;color:CanvasText;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  :is(.g-btn,.g-icon-btn){border:1px solid ButtonText;box-shadow:none}
  .g-seg{border:1px solid CanvasText}
  .g-seg__lens{display:none}
  .g-seg > :is([aria-current]:not([aria-current="false"]),[aria-pressed="true"],[aria-checked="true"]){outline:2px solid Highlight;outline-offset:-2px}
  .g-table tbody tr[aria-current="true"] td{border-block:2px solid Highlight}
  .g-table tbody tr[aria-current="true"] td:first-child{border-left:4px solid Highlight}
  .g-status::before{forced-color-adjust:none;background:CanvasText}
  .g-key{border:1px solid CanvasText}
  :is(.g-check,.g-radio){forced-color-adjust:none;background:Canvas;border-color:CanvasText}
  :is(.g-check,.g-radio):checked{background:Highlight;border-color:Highlight}
  .g-check::after{border-color:HighlightText}
  .g-radio::after{background:HighlightText}
}

/* Reduced motion: no transitions, no animations, no smooth scrolling. glass.js skips its own motion. */
@media (prefers-reduced-motion:reduce){
  :root{--glass-fast:0s;--glass-base:0s;--glass-slow:0s}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}