/*
 * pos.css -- the POS back-office design layer.
 *
 * The POS hostname serves /pos/ and nothing else, so this file cannot @import
 * or link the shared workspace stylesheets. It is therefore self-contained --
 * but it is not a second design language: the tokens, the type hierarchy, the
 * control height, the flat surfaces and the graphite dark treatment are the
 * ones company.css and theme-dark-overrides.css already define, restated here
 * with the same values.
 *
 * House rules that apply throughout:
 *   - Flat. No shadows, no gradients, no frosted glass, no cards inside cards.
 *     Grouping is a hairline divider and a background shift.
 *   - No decorative rule, dash or accent line in front of a heading or label.
 *   - Colour is a token. Nothing here hardcodes a text colour.
 *   - The company CSP is script-src 'self'; style-src 'self', so no page may
 *     carry an inline style. Every state below is reachable through a class or
 *     a data-* attribute.
 */

@font-face {
    font-family: "Inter Variable";
    src: url("/pos/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-display: swap;
    font-weight: 100 900;
}

/* -----------------------------------------------------------------
   TOKENS -- the company.css :root layer, restated
   ----------------------------------------------------------------- */
:root {
    --cp-app-bg:            #edecea;
    --cp-bg:                #ffffff;
    --cp-border:            #d0cece;
    --cp-divider:           #e6e4e0;
    --cp-radius:            8px;

    --cp-accent:            #1e56d9;
    --cp-accent-hover:      #1748b8;
    --cp-accent-soft:       rgba(30, 86, 217, 0.08);
    --cp-accent-ink:        #ffffff;

    --cp-heading:           #111111;
    --cp-text:              #1a1a1a;
    --cp-text-muted:        #6b6b6b;
    --cp-text-faint:        #6b6b6b;

    --cp-surface:           #ffffff;
    --cp-surface-soft:      #f5f4f2;
    --cp-surface-hover:     #edecea;

    --cp-ctrl-h:            34px;
    --cp-ctrl-r:            5px;
    --cp-ctrl-vpad:         7px;
    --cp-ctrl-hpad:         11px;
    --cp-section-pad-y:     16px;
    --cp-section-pad-x:     20px;

    /* Status meanings. Three only: settled, needs attention, gone wrong. */
    --cp-good:              #0f7a4d;
    --cp-good-soft:         rgba(15, 122, 77, 0.08);
    --cp-warning:           #a56100;
    --cp-warning-soft:      rgba(165, 97, 0, 0.09);
    --cp-serious:           #b3261e;
    --cp-serious-soft:      rgba(179, 38, 30, 0.08);

    --pos-topbar-h:         52px;
    --pos-measure:          62ch;
    --pos-focus:            0 0 0 3px rgba(30, 86, 217, 0.22);

    --font-main: "Inter Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 560;
}

/* Graphite dark, matching the authenticated Workspace convention: black,
   grey, white and semantic status colours, without blue chrome. Authentication
   pages never receive data-theme="dark". */
html[data-pos-theme-enabled="true"][data-theme="dark"] {
    --cp-app-bg:            #101010;
    --cp-bg:                #171717;
    --cp-border:            #333333;
    --cp-divider:           #2d2d2d;

    --cp-accent:            rgba(255, 255, 255, 0.07);
    --cp-accent-hover:      rgba(255, 255, 255, 0.12);
    --cp-accent-soft:       rgba(255, 255, 255, 0.06);
    --cp-accent-ink:        #f2f2f2;

    --cp-heading:           #93c5fd;
    --cp-text:              rgba(255, 255, 255, 0.88);
    --cp-text-muted:        rgba(255, 255, 255, 0.55);
    --cp-text-faint:        rgba(255, 255, 255, 0.55);

    --cp-surface:           #1a1a1a;
    --cp-surface-soft:      #151515;
    --cp-surface-hover:     #202020;

    --cp-good:              #4ac48a;
    --cp-good-soft:         rgba(74, 196, 138, 0.12);
    --cp-warning:           #fab219;
    --cp-warning-soft:      rgba(250, 178, 25, 0.12);
    --cp-serious:           #f0796d;
    --cp-serious-soft:      rgba(240, 121, 109, 0.12);

    --pos-focus:            0 0 0 3px rgba(190, 190, 190, 0.32);

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

body.pos-body {
    margin: 0;
    min-height: calc(100 * var(--hb-vh, 1vh));
    background: var(--cp-app-bg);
    color: var(--cp-text);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

h1, h2, h3 {
    margin: 0;
    color: var(--cp-heading);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

p {
    margin: 0;
}

a {
    color: var(--cp-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] a {
    color: #c2c5cc;
}

a:hover {
    color: var(--cp-accent-hover);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] a:hover {
    color: #e6e8ec;
}

:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--pos-focus);
    border-radius: var(--cp-ctrl-r);
}

/* Forced-colours modes drop box-shadow entirely, which would leave the focus
   ring invisible for exactly the people who need it most. Give the outline a
   real colour there instead of a transparent placeholder. */
@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

.pos-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pos-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    padding: 10px 14px;
    background: var(--cp-bg);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
    text-decoration: none;
}

.pos-skip:focus {
    left: 8px;
    top: 8px;
}

/* -----------------------------------------------------------------
   CONTROLS
   ----------------------------------------------------------------- */
.pos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--cp-ctrl-h);
    padding: var(--cp-ctrl-vpad) 14px;
    border: 1px solid var(--cp-accent);
    border-radius: var(--cp-ctrl-r);
    background: var(--cp-accent);
    color: var(--cp-accent-ink);
    font: inherit;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.pos-btn:hover {
    background: var(--cp-accent-hover);
    border-color: var(--cp-accent-hover);
    color: var(--cp-accent-ink);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-btn {
    border-color: #444444;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-btn:hover {
    border-color: #555555;
}

.pos-btn--block {
    width: 100%;
}

.pos-btn--secondary {
    background: var(--cp-bg);
    border-color: var(--cp-border);
    color: var(--cp-text);
}

.pos-btn--secondary:hover {
    background: var(--cp-surface-hover);
    border-color: var(--cp-border);
    color: var(--cp-text);
}

.pos-btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--cp-text-muted);
    padding-inline: 8px;
}

.pos-btn--quiet:hover {
    background: var(--cp-surface-hover);
    border-color: transparent;
    color: var(--cp-text);
}

.pos-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.pos-field {
    display: block;
    margin: 0 0 14px;
}

.pos-field:last-of-type {
    margin-bottom: 0;
}

.pos-field-label {
    display: block;
    margin: 0 0 5px;
    color: var(--cp-text-muted);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
}

.pos-input {
    display: block;
    width: 100%;
    height: var(--cp-ctrl-h);
    padding: var(--cp-ctrl-vpad) var(--cp-ctrl-hpad);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-ctrl-r);
    background: var(--cp-bg);
    color: var(--cp-text);
    font: inherit;
}

.pos-input::placeholder {
    color: var(--cp-text-faint);
}

.pos-input:focus-visible {
    border-color: var(--cp-accent);
    box-shadow: var(--pos-focus);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-input:focus-visible {
    border-color: #666666;
}

.pos-input--code {
    letter-spacing: 0.32em;
    font-variant-numeric: tabular-nums;
}

/* Form help is an instruction, not a caption: muted, so it clears 4.5:1. */
.pos-field-hint {
    margin: 5px 0 0;
    color: var(--cp-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* -----------------------------------------------------------------
   NOTICES -- one hairline-bordered band, never a tinted card
   ----------------------------------------------------------------- */
.pos-notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--cp-border);
    border-left-width: 3px;
    border-radius: var(--cp-ctrl-r);
    background: var(--cp-surface-soft);
    color: var(--cp-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-notice p + p {
    margin-top: 6px;
}

.pos-notice--error {
    border-left-color: var(--cp-serious);
    background: var(--cp-serious-soft);
}

.pos-notice--warning {
    border-left-color: var(--cp-warning);
    background: var(--cp-warning-soft);
}

.pos-notice--info {
    border-left-color: var(--cp-accent);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-notice--info {
    border-left-color: #6f7681;
}

.pos-notice--success {
    border-left-color: var(--cp-good);
    background: var(--cp-good-soft);
}

/* -----------------------------------------------------------------
   SIGNED-OUT SCREENS -- two panes: brand on the left, task on the right

   This is a brand moment, so it uses the marketing navy from
   css/hisabooks.css (the colour of assets/icons/logo.svg) rather than the
   --cp-accent the signed-in workspace chrome uses. They are different jobs:
   one is a front door, the other is a dense back office.
   ----------------------------------------------------------------- */
.pos-auth {
    --pos-brand:              #003f9b;
    --pos-brand-deep:         #00306f;
    --pos-brand-action:       #003f9b;
    --pos-brand-action-hover: #00306f;
    --pos-brand-pad:          clamp(30px, calc(3.4 * var(--hb-vw, 1vw)), 54px);

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: calc(100 * var(--hb-vh, 1vh));
}

.pos-auth-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--pos-brand-pad);
    background: var(--pos-brand);
    overflow: hidden;
}

.pos-auth-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pos-auth-mark {
    display: block;
    height: 30px;
    width: auto;
}

.pos-auth-lockup-rule {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.22);
}

.pos-auth-surface {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pos-auth-title {
    color: #ffffff;
    font-size: clamp(27px, calc(2.5 * var(--hb-vw, 1vw)), 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.14;
}

.pos-auth-brand-lead {
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.74);
    font-size: 15.5px;
    line-height: 1.65;
}

.pos-auth-byline {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* Numbered setup steps. A spine joins the three markers and grows down on
   load, so the sequence reads as a sequence rather than as three bullets.
   Each marker wears the panel colour as a ring so it masks the spine behind
   it -- an outline, not a shadow, because the design system is flat. */
.pos-steps {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pos-steps-spine {
    position: absolute;
    left: 15px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: rgba(255, 255, 255, 0.34);
    transform: scaleY(0);
    transform-origin: top;
    animation: posGrowDown 900ms cubic-bezier(.32, .72, .3, 1) 420ms forwards;
}

.pos-step {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 18px;
    padding: 15px 0;
}

.pos-step-n {
    position: relative;
    z-index: 1;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: var(--pos-brand);
    outline: 5px solid var(--pos-brand);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(.6);
    animation: posPopIn 520ms cubic-bezier(.2, .9, .3, 1.25) forwards;
}

.pos-step-body {
    padding-top: 3px;
    opacity: 0;
    animation: posRiseIn 560ms cubic-bezier(.22, .68, .32, 1) forwards;
}

.pos-step:nth-child(2) .pos-step-n    { animation-delay: 480ms; }
.pos-step:nth-child(3) .pos-step-n    { animation-delay: 640ms; }
.pos-step:nth-child(4) .pos-step-n    { animation-delay: 800ms; }
.pos-step:nth-child(2) .pos-step-body { animation-delay: 540ms; }
.pos-step:nth-child(3) .pos-step-body { animation-delay: 700ms; }
.pos-step:nth-child(4) .pos-step-body { animation-delay: 860ms; }

.pos-step-body h2 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pos-step-body p {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13.5px;
    line-height: 1.55;
}

/* The counter drawing. Its width is budgeted from viewport height -- the art
   is 560x360, so 1.55x its height allowance -- which keeps a 900px-tall
   laptop free of a scrollbar without shrinking it on a taller screen. */
.pos-auth-art {
    width: 100%;
    max-width: min(520px, calc(52 * var(--hb-vh, 1vh)));
    margin-top: auto;
    margin-right: calc(var(--pos-brand-pad) * -1);
    align-self: flex-end;
}

.pos-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pos-art .s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pos-art .d { stroke-dasharray: var(--dash, 900); animation: posDrawIn 1500ms cubic-bezier(.5, .1, .2, 1) forwards; }
.pos-art .f { animation: posFadeIn 800ms ease 700ms both; }

/* Per-stroke dash lengths. These live here rather than in a style attribute
   because the company CSP profile is style-src 'self'. */
.pos-art .d-80  { --dash: 80; }
.pos-art .d-120 { --dash: 120; }
.pos-art .d-160 { --dash: 160; }
.pos-art .d-200 { --dash: 200; }
.pos-art .d-220 { --dash: 220; }
.pos-art .d-300 { --dash: 300; }
.pos-art .d-420 { --dash: 420; }
.pos-art .d-480 { --dash: 480; }
.pos-art .d-560 { --dash: 560; }
.pos-art .d-620 { --dash: 620; }
.pos-art .d-820 { --dash: 820; }

/* ── The task pane ───────────────────────────────────────────────────── */

.pos-auth-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pos-brand-pad);
    background: var(--cp-bg);
}

.pos-auth-form {
    width: 100%;
    max-width: 384px;
}

/* The last field sits flush to the bottom of its stack, so the actions below
   own the space that separates them from it. */
.pos-auth-submit { margin-top: 24px; }

.pos-auth-alt { margin-top: 10px; }

/* The signed-in chrome follows the workspace's graphite dark convention, where
   every button becomes a neutral surface. That is wrong here: a sign-in screen
   has exactly one action and it has to be findable. The submit keeps the brand
   colour in both themes, lifted in dark so it clears the dark surface. */
.pos-auth .pos-auth-submit {
    background: var(--pos-brand-action);
    border-color: var(--pos-brand-action);
    color: #ffffff;
}

.pos-auth .pos-auth-submit:hover {
    background: var(--pos-brand-action-hover);
    border-color: var(--pos-brand-action-hover);
    color: #ffffff;
}

.pos-form-head { margin-bottom: 24px; }

.pos-form-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--pos-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-auth {
    --pos-brand-action:       #2564c8;
    --pos-brand-action-hover: #2f74dd;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-form-eyebrow {
    color: #8fb4ec;
}

.pos-form-title { font-size: 25px; }

.pos-form-sub {
    margin-top: 8px;
    color: var(--cp-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.pos-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    color: var(--cp-text-faint);
    font-size: 12px;
}

.pos-rule::before,
.pos-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cp-divider);
}

.pos-google svg {
    width: 17px;
    height: 17px;
    margin-right: 9px;
    flex: none;
}

.pos-auth-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-divider);
    color: var(--cp-text-faint);
    font-size: 12.5px;
    line-height: 1.6;
}

.pos-auth-foot p + p { margin-top: 6px; }

/* The identity being re-confirmed on the sign-in code step. */
.pos-auth-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--cp-divider);
    border-radius: var(--cp-ctrl-r);
    background: var(--cp-surface-soft);
    font-size: 12.5px;
}

.pos-auth-identity dt { margin: 0; color: var(--cp-text-faint); }

.pos-auth-identity dd {
    margin: 0 12px 0 0;
    color: var(--cp-text);
    font-weight: var(--font-weight-medium);
}

.pos-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

/* A form whose only content is one full-width action. */
.pos-action-form {
    width: 100%;
    margin: 0;
}

/* ── Entrance motion ─────────────────────────────────────────────────── */

@keyframes posRiseIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes posFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes posGrowDown {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes posPopIn {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: none; }
}

@keyframes posDrawIn {
    from { stroke-dashoffset: var(--dash, 900); }
    to   { stroke-dashoffset: 0; }
}

.pos-rise { opacity: 0; animation: posRiseIn 620ms cubic-bezier(.22, .68, .32, 1) forwards; }
.pos-rise-1 { animation-delay: 60ms; }
.pos-rise-2 { animation-delay: 150ms; }
.pos-rise-3 { animation-delay: 240ms; }
.pos-rise-4 { animation-delay: 330ms; }

/* -----------------------------------------------------------------
   SIGNED-IN SHELL
   ----------------------------------------------------------------- */
.pos-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--pos-topbar-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--cp-divider);
    background: var(--cp-bg);
}

.pos-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pos-topbar-mark {
    display: block;
    height: 24px;
    width: auto;
}

/* Only one cut of the wordmark is shown, so the hidden copy takes no space and
   is never announced twice. */
.pos-mark-dark {
    display: none;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-mark-light {
    display: none;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-mark-dark {
    display: block;
}

.pos-topbar-surface {
    padding-left: 8px;
    border-left: 1px solid var(--cp-divider);
    color: var(--cp-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.pos-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pos-topbar-user {
    max-width: 22ch;
    overflow: hidden;
    color: var(--cp-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-topbar-signout {
    margin: 0;
}

.pos-theme {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-ctrl-r);
}

.pos-theme-choice {
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-left: 1px solid var(--cp-border);
    background: transparent;
    color: var(--cp-text-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.pos-theme-choice:first-child {
    border-left: 0;
    border-radius: calc(var(--cp-ctrl-r) - 1px) 0 0 calc(var(--cp-ctrl-r) - 1px);
}

.pos-theme-choice:last-child {
    border-radius: 0 calc(var(--cp-ctrl-r) - 1px) calc(var(--cp-ctrl-r) - 1px) 0;
}

.pos-theme-choice:hover {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
}

.pos-theme-choice[aria-pressed="true"] {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
    font-weight: var(--font-weight-medium);
}

.pos-theme-choice:focus-visible {
    position: relative;
    z-index: 1;
}

.pos-app-shell {
    --pos-sidebar-expanded: 216px;
    --pos-sidebar-collapsed: 64px;
    --pos-sidebar-width: var(--pos-sidebar-expanded);
    display: grid;
    grid-template-columns: var(--pos-sidebar-width) minmax(0, 1fr);
    min-height: calc((100 * var(--hb-vh, 1vh)) - var(--pos-topbar-h));
    background: var(--cp-bg);
    transition: grid-template-columns 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-pos-sidebar="collapsed"] .pos-app-shell {
    --pos-sidebar-width: var(--pos-sidebar-collapsed);
}

/* The workspace surface: one white sheet on the app background, edge to edge,
   the same relationship company.css gives .cp-workspace. */
.pos-main {
    min-width: 0;
    min-height: calc((100 * var(--hb-vh, 1vh)) - var(--pos-topbar-h));
    padding: var(--cp-section-pad-y) var(--cp-section-pad-x) 40px;
    background: var(--cp-bg);
}

.pos-page-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-page-title {
    font-size: 17px;
}

.pos-page-lead {
    margin-top: 5px;
    max-width: var(--pos-measure);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
   SECTIONS AND FLAT ROWS
   ----------------------------------------------------------------- */
.pos-section {
    padding: var(--cp-section-pad-y) 0;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-section:last-child {
    border-bottom: 0;
}

.pos-section-title {
    font-size: 15px;
}

.pos-section-lead {
    margin-top: 4px;
    max-width: var(--pos-measure);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--cp-divider);
}

.pos-fact {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-fact-label {
    display: block;
    margin-bottom: 3px;
    color: var(--cp-text-muted);
    font-size: 11.5px;
}

.pos-fact-value {
    display: block;
    color: var(--cp-text);
    font-size: 17px;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.pos-fact-note {
    display: block;
    margin-top: 3px;
    color: var(--cp-text-faint);
    font-size: 11.5px;
    line-height: 1.4;
}

/* Status is a plain word carrying a functional colour, never a chip. */
.pos-state {
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pos-state[data-tone="good"] {
    color: var(--cp-good);
}

.pos-state[data-tone="warning"] {
    color: var(--cp-warning);
}

.pos-state[data-tone="serious"] {
    color: var(--cp-serious);
}

.pos-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cp-divider);
}

.pos-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-list-name {
    color: var(--cp-text);
    font-weight: var(--font-weight-medium);
}

.pos-list-meta {
    color: var(--cp-text-muted);
    font-size: 12.5px;
}

/* A figure under a list is supporting information, not a caption: muted, so it
   stays readable next to the rows it counts. */
.pos-note {
    margin: 12px 0 0;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-empty {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-ctrl-r);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-prose {
    max-width: var(--pos-measure);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.pos-prose p + p {
    margin-top: 8px;
}

/* -----------------------------------------------------------------
   SECTION NAVIGATION
   Built destinations only. Desktop uses a collapsible left rail; mobile uses
   the native details disclosure as an accessible drawer.
   ----------------------------------------------------------------- */
.pos-sidebar {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--cp-divider);
    background: var(--cp-bg);
}

.pos-nav-disclosure--desktop {
    width: 100%;
    min-width: 0;
}

.pos-sidebar-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--cp-divider);
    background: transparent;
    color: var(--cp-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
}

.pos-sidebar-toggle:hover {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
}

.pos-sidebar-toggle:focus-visible,
.pos-nav-link:focus-visible {
    outline-color: var(--cp-accent);
    outline-offset: -3px;
}

.pos-sidebar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-sidebar-toggle-menu,
.pos-sidebar-toggle-chevron,
.pos-nav-summary-icon,
.pos-nav-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.pos-sidebar-toggle-chevron {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    margin-left: auto;
    transition: transform 0.18s ease;
}

.pos-nav-disclosure > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cp-divider);
    color: var(--cp-text-muted);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
}

.pos-nav-disclosure > summary::-webkit-details-marker {
    display: none;
}

.pos-nav-disclosure--mobile {
    display: none;
    width: 100%;
}

.pos-nav {
    display: grid;
    gap: 4px;
    padding: 10px 9px;
    background: var(--cp-bg);
}

.pos-nav-link {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    padding: 9px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--cp-ctrl-r) var(--cp-ctrl-r) 0;
    color: var(--cp-text-muted);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.pos-nav-icon {
    color: currentColor;
}

.pos-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A group is a disclosure, so it looks like a nav row and behaves like a
   heading: it opens the pages under it and never navigates itself. */
.pos-nav-group {
    min-width: 0;
}

.pos-nav-summary {
    cursor: pointer;
    list-style: none;
}

.pos-nav-summary::-webkit-details-marker {
    display: none;
}

.pos-nav-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--cp-text-faint);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}

.pos-nav-group[open] > .pos-nav-summary .pos-nav-chevron {
    transform: rotate(180deg);
}

/* The children are indented to the group's icon rather than given icons of
   their own: a second column of glyphs would compete with the groups and make
   the rail harder to scan, not easier. */
.pos-nav-children {
    display: grid;
    gap: 2px;
    padding: 2px 0 6px;
}

.pos-nav-link--child {
    min-height: 34px;
    padding-left: 43px;
    font-size: 12.5px;
}

/* A group whose page is open keeps its own row quiet: the child carries the
   current-page mark, and two marked rows would read as two locations. */
.pos-nav-group[open] > .pos-nav-summary {
    color: var(--cp-text);
}

/* How many things in this section are still open. Amber, never red: an
   unattended till is a condition to look at, not a failure. */
.pos-nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cp-warning-soft);
    color: var(--cp-warning);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 18px;
    text-align: center;
}

html[data-pos-sidebar="collapsed"] .pos-sidebar-toggle {
    justify-content: center;
    gap: 0;
    padding-right: 0;
    padding-left: 0;
}

html[data-pos-sidebar="collapsed"] .pos-sidebar-toggle-menu,
html[data-pos-sidebar="collapsed"] .pos-sidebar-title,
html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Collapsed to icons there is no room for a number, but hiding the badge
   entirely would hide the warning. It becomes a dot on the icon; the link's
   own name still says how many. */
html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-count {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    overflow: hidden;
    background: var(--cp-warning);
    text-indent: -999px;
}

html[data-pos-sidebar="collapsed"] .pos-sidebar-toggle-chevron {
    margin-left: 0;
    transform: rotate(180deg);
}

html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav {
    padding-right: 9px;
    padding-left: 9px;
}

html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-link {
    justify-content: center;
    gap: 0;
    padding-right: 9px;
    padding-left: 9px;
}

html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-chevron,
html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-children {
    display: none;
}

html[data-pos-sidebar="collapsed"] .pos-nav-disclosure--desktop .pos-nav-link--child {
    padding-left: 9px;
}

.pos-nav-link:hover {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
    text-decoration: none;
}

.pos-nav-link[aria-current="page"] {
    border-left-color: var(--cp-accent);
    background: var(--cp-surface-hover);
    color: var(--cp-text);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-nav-link[aria-current="page"] {
    border-left-color: #8fb4ec;
}

@media (forced-colors: active) {
    .pos-nav-link[aria-current="page"] {
        border-left-color: Highlight;
    }

    .pos-sidebar-toggle:focus-visible,
    .pos-nav-link:focus-visible {
        outline-offset: -3px;
    }
}

/* -----------------------------------------------------------------
   PAGE HEAD
   ----------------------------------------------------------------- */
.pos-back {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    text-decoration: none;
}

.pos-back::before {
    content: "\2190";
    margin-right: 6px;
}

.pos-back:hover {
    color: var(--cp-text);
    text-decoration: underline;
}

.pos-page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
}

.pos-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* -----------------------------------------------------------------
   FORMS
   One column of fields on a narrow screen, two where there is room.
   Fields are grid items, so they carry no bottom margin: a margin
   counts in track sizing and would pull the rows out of line.
   ----------------------------------------------------------------- */
.pos-form { margin-top: 16px; }

/* Some setup and Phase 5 pages wrap several bands in one form. The wrapper is
   intentionally layout-only: each band keeps the same flat page rhythm and we
   do not introduce a second card surface around it. */
.pos-form-card {
    margin: 0;
    padding: 0;
}

.pos-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px 24px;
    max-width: 880px;
}

.pos-form-grid .pos-field { margin-bottom: 0; }

.pos-field--wide {
    margin-top: 16px;
    margin-bottom: 0;
    max-width: 880px;
}

select.pos-input {
    padding-right: 32px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 7px;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] select.pos-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a0a0a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------
   SELECT
   pos/js/pos_select.js replaces every select.pos-input with the control
   below, because a native select draws its option list with the operating
   system and that list ignores everything in this file. The rules above stay
   as the fallback the page shows before the script runs, and for any select
   opted out with data-native-select="true".

   This is a port of the desktop app's .dt-select (desktop-app/src/theme.css);
   the workspace runs the same thing as .enhanced-select
   (css/select_enhancer.css). The values are restated rather than shared
   because this hostname serves /pos/ and nothing else -- but they are the same
   values, and a change to one of the three belongs in all three.
   ----------------------------------------------------------------- */
.pos-select {
    /* Desktop --cp-brand. One accent: the selected row and the open border. */
    --ps-brand:          #003f9b;
    --ps-brand-wash:     #e9f0fb;

    --ps-bg:             #fcfdfe;
    --ps-border:         #dbe0ea;
    --ps-border-hover:   #b9c1d1;
    --ps-surface-muted:  #f5f7fb;
    --ps-surface-soft:   #eef1f7;

    --ps-heading:        #0a1224;
    --ps-text:           #33405c;
    --ps-muted:          #5f6b85;
    --ps-faint:          #8590a6;

    --ps-ctrl-r:         6px;
    --ps-menu-r:         8px;
    --ps-size:           12.5px;

    position: relative;
    display: block;
    min-width: 0;
}

/* Kept in the form for submission; never shown. */
.pos-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.pos-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: var(--cp-ctrl-h);
    padding: 6px 10px;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-ctrl-r);
    background: var(--ps-bg);
    color: var(--ps-heading);
    font: inherit;
    font-size: var(--ps-size);
    text-align: left;
    cursor: pointer;
}

.pos-select__trigger > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-select__placeholder { color: var(--ps-faint); }

.pos-select__trigger svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--ps-muted);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 120ms cubic-bezier(.4, 0, .2, 1);
}

.pos-select__trigger:hover:not(:disabled) { border-color: var(--ps-border-hover); }

.pos-select__trigger.is-open {
    border-color: var(--ps-brand);
    /* Inset, so the ring cannot nudge the control's neighbours. */
    box-shadow: inset 0 0 0 1px var(--ps-brand);
}

.pos-select__trigger.is-open svg { transform: rotate(180deg); }

.pos-select__trigger:disabled {
    background: var(--ps-surface-soft);
    color: var(--ps-faint);
    cursor: not-allowed;
}

/* Fixed and parented to <body>, so no panel's overflow can clip it. Its top,
   left, width and max-height are measured onto it by the script.

   The tokens are repeated rather than inherited: the menu is moved out to
   <body>, so it is no longer a descendant of .pos-select and inherits nothing
   from it. Only the values this block actually uses are restated. */
.pos-select__menu {
    --ps-brand:          #003f9b;
    --ps-brand-wash:     #e9f0fb;
    --ps-bg:             #fcfdfe;
    --ps-border:         #dbe0ea;
    --ps-surface-muted:  #f5f7fb;
    --ps-text:           #33405c;
    --ps-heading:        #0a1224;
    --ps-faint:          #8590a6;
    --ps-menu-r:         8px;
    --ps-size:           12.5px;

    position: fixed;
    z-index: 900;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-menu-r);
    background: var(--ps-bg);
    /* The one place a shadow earns its keep: this floats above the page and
       needs to separate from whatever it covers. Everything else stays flat. */
    box-shadow: 0 8px 24px rgba(10, 18, 36, .14);
}

.pos-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 4px;
    color: var(--ps-text);
    font-size: var(--ps-size);
    cursor: pointer;
}

.pos-select__option-label {
    display: grid;
    min-width: 0;
}

.pos-select__option-label small {
    color: var(--ps-faint);
    font-size: 11px;
}

.pos-select__option.is-active {
    background: var(--ps-surface-muted);
    color: var(--ps-heading);
}

.pos-select__option.is-selected {
    color: var(--ps-brand);
    font-weight: 550;
}

.pos-select__option.is-selected.is-active { background: var(--ps-brand-wash); }

.pos-select__option.is-disabled {
    color: var(--ps-faint);
    cursor: not-allowed;
}

.pos-select__check {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The desktop app is light-only, so there is no dark .dt-select to port. The
   geometry, type and behaviour above are unchanged; only the palette moves, to
   the graphite this surface already uses. The accent becomes the light blue
   that carries on a dark ground -- navy does not. Matches the workspace's dark
   dropdown value for value. */
html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-select,
html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-select__menu {
    --ps-brand:          #93c5fd;
    --ps-brand-wash:     rgba(147, 197, 253, .12);

    --ps-bg:             #1a1a1a;
    --ps-border:         #333333;
    --ps-border-hover:   #4a4a4a;
    --ps-surface-muted:  #202020;
    --ps-surface-soft:   #151515;

    --ps-heading:        rgba(255, 255, 255, .92);
    --ps-text:           rgba(255, 255, 255, .88);
    --ps-muted:          rgba(255, 255, 255, .55);
    --ps-faint:          rgba(255, 255, 255, .45);
}

/* A light-absorbing shadow does nothing on a dark ground; this one has to be
   darker than the surface it falls on to read as separation at all. */
html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-select__menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.pos-input:disabled,
.pos-textarea:disabled {
    background: var(--cp-surface-soft);
    color: var(--cp-text-muted);
    cursor: not-allowed;
}

.pos-textarea {
    height: auto;
    min-height: 62px;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.5;
    resize: vertical;
}

.pos-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

/* Compact read-only totals. This is one divided surface, not a set of nested
   dashboard cards, so it stays useful on customer-account and tax pages without
   breaking the back-office flat-surface rule. */
.pos-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-top: 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-divider);
    overflow: hidden;
}

.pos-summary-card {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 13px 16px;
    background: var(--cp-surface);
}

.pos-summary-card > span,
.pos-summary-label {
    color: var(--cp-text-muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.pos-summary-card > strong {
    color: var(--cp-text);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* A checkbox with explanatory copy is a single hit target. The divider gives
   consecutive choices a readable rhythm without turning each into a card. */
.pos-choice-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 880px;
    margin-top: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--cp-divider);
    color: var(--cp-text);
    cursor: pointer;
}

.pos-choice-row + .pos-choice-row {
    margin-top: 0;
}

.pos-choice-row input {
    flex: none;
    margin: 2px 0 0;
    accent-color: var(--cp-accent);
}

.pos-choice-row > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pos-choice-row strong {
    font-weight: var(--font-weight-medium);
}

.pos-choice-row small {
    color: var(--cp-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* A band inside a form, separated by a rule rather than a nested card. */
.pos-subsection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cp-divider);
}

.pos-subsection-title {
    color: var(--cp-heading);
    font-size: 13.5px;
    font-weight: var(--font-weight-semibold);
}

.pos-subsection-lead {
    margin: 4px 0 16px;
    max-width: var(--pos-measure);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-btn--danger {
    background: var(--cp-serious);
    border-color: var(--cp-serious);
    color: #ffffff;
}

.pos-btn--danger:hover {
    background: var(--cp-serious);
    border-color: var(--cp-serious);
    color: #ffffff;
    filter: brightness(0.92);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-btn--danger {
    color: #1a0f0e;
}

/* A list row whose name is the way in. */
.pos-list-link {
    color: var(--cp-text);
    text-decoration: none;
}

.pos-list-link:hover {
    color: var(--cp-accent);
    text-decoration: underline;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-list-link:hover {
    color: #8fb4ec;
}

/* A fact whose value is a word rather than a figure does not want the
   tabular figure size. */
.pos-fact-value--text {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

/* -----------------------------------------------------------------
   CHECKBOX SETS AND INLINE ROW ACTIONS
   ----------------------------------------------------------------- */
.pos-fieldset {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    max-width: 880px;
}

.pos-fieldset-legend {
    padding: 0;
    color: var(--cp-heading);
    font-size: 13.5px;
    font-weight: var(--font-weight-semibold);
}

.pos-fieldset-lead {
    margin: 4px 0 12px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.pos-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-ctrl-r);
    background: var(--cp-surface);
    cursor: pointer;
}

.pos-check:hover { border-color: var(--cp-text-faint); }

.pos-check input {
    margin: 1px 0 0;
    accent-color: var(--cp-accent);
    flex: none;
}

.pos-check-body { min-width: 0; }

.pos-check-name {
    display: block;
    color: var(--cp-text);
    font-size: 13.5px;
    font-weight: var(--font-weight-medium);
}

.pos-check-note {
    display: block;
    margin-top: 2px;
    color: var(--cp-text-muted);
    font-size: 12px;
}

/* An action that belongs to one row, sitting on that row's baseline. */
.pos-inline-form {
    display: inline;
    margin: 0 0 0 6px;
}

/* -----------------------------------------------------------------
   THE INTERIOR

   One idea holds this surface together: until trading is switched on,
   POS is a setup journey. The sign-in screen promises three numbered
   steps; the overview is those same three steps carrying live state,
   and the section screens are where each one is done. The numbered
   spine is the through-line, not decoration.

   Rhythm matters as much as the parts. Four identical heading-plus-
   paragraph-plus-content blocks read as a document, not a product, so
   each band here has a different shape: a dense strip, a journey, a
   grid of tiles, a form.
   ----------------------------------------------------------------- */

/* The nav already draws the line under the chrome. A second rule under
   the page head put two hairlines 94px apart. */
.pos-page-head {
    padding-bottom: 0;
    border-bottom: 0;
}

.pos-page-title {
    font-size: 21px;
    letter-spacing: -0.015em;
}

.pos-page-lead {
    margin-top: 4px;
    font-size: 13px;
}

.pos-main {
    padding-top: 22px;
}

/* -----------------------------------------------------------------
   DENSE FACT STRIP
   A single row of figures, divided by verticals rather than stacked
   into their own section. Used for plan state and shop identity.
   ----------------------------------------------------------------- */
.pos-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    margin-top: 20px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    overflow: hidden;
}

.pos-strip-cell {
    padding: 13px 16px;
    border-left: 1px solid var(--cp-divider);
}

.pos-strip-cell:first-child { border-left: 0; }

.pos-strip-label {
    display: block;
    margin-bottom: 4px;
    color: var(--cp-text-muted);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pos-strip-value {
    display: block;
    color: var(--cp-text);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

.pos-strip-note {
    display: block;
    margin-top: 3px;
    color: var(--cp-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* -----------------------------------------------------------------
   THE SETUP JOURNEY
   The sign-in spine, continued on a light surface and carrying state.
   ----------------------------------------------------------------- */
.pos-journey {
    position: relative;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.pos-journey-spine {
    position: absolute;
    left: 17px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: var(--cp-divider);
}

.pos-journey-step {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 18px;
    padding: 16px 0;
}

.pos-journey-step + .pos-journey-step {
    border-top: 1px solid var(--cp-divider);
}

.pos-journey-marker {
    position: relative;
    z-index: 1;
    grid-row: span 2;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background: var(--cp-bg);
    outline: 4px solid var(--cp-bg);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Done: the brand carries it. Current: outlined in the brand. Pending
   stays quiet, because a step nobody can start yet should not shout. */
.pos-journey-step[data-state="done"] .pos-journey-marker {
    border-color: var(--pos-journey-accent);
    background: var(--pos-journey-accent);
    color: #ffffff;
}

.pos-journey-step[data-state="current"] .pos-journey-marker {
    border-color: var(--pos-journey-accent);
    color: var(--pos-journey-accent);
}

.pos-journey-step[data-state="pending"] .pos-journey-marker {
    color: var(--cp-text-faint);
}

.pos-journey {
    --pos-journey-accent: #003f9b;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-journey {
    --pos-journey-accent: #4d86dd;
}

.pos-journey-title {
    color: var(--cp-text);
    font-size: 14.5px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.pos-journey-step[data-state="pending"] .pos-journey-title {
    color: var(--cp-text-muted);
}

.pos-journey-state {
    grid-column: 2;
    margin-top: 3px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-journey-action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}

.pos-journey-soon {
    color: var(--cp-text-faint);
    font-size: 12px;
    white-space: nowrap;
}

/* -----------------------------------------------------------------
   TILES
   Shops are places. A grid of them is scannable in a way a stack of
   full-width rows is not, and there are rarely more than a handful.
   ----------------------------------------------------------------- */
.pos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.pos-tile {
    display: flex;
    flex-direction: column;
    padding: 16px 17px 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    transition: border-color 0.14s ease;
}

.pos-tile:hover { border-color: var(--cp-text-faint); }

.pos-tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pos-tile-name {
    color: var(--cp-text);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    text-decoration: none;
}

/* The whole tile is the target; the name carries the accessible link. */
.pos-tile-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pos-tile { position: relative; }

.pos-tile:hover .pos-tile-name { color: var(--pos-tile-accent); }

.pos-tiles { --pos-tile-accent: #003f9b; }

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-tiles {
    --pos-tile-accent: #8fb4ec;
}

.pos-tile-code {
    color: var(--cp-text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-tile-meta {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--cp-divider);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--cp-text-muted);
    font-size: 12px;
}

.pos-tile-place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An empty state that offers the way out of itself. */
.pos-blank {
    margin-top: 20px;
    padding: 30px 26px;
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-radius);
    text-align: center;
}

.pos-blank-title {
    color: var(--cp-text);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}

.pos-blank-body {
    margin: 6px auto 0;
    max-width: 46ch;
    color: var(--cp-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.pos-blank-action { margin-top: 16px; }

/* -----------------------------------------------------------------
   BANDS
   A titled band inside a page. Separated by space and a single rule,
   never by a box inside a box.
   ----------------------------------------------------------------- */
.pos-band {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--cp-divider);
}

.pos-band:first-of-type {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

.pos-band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.pos-band-title {
    color: var(--cp-heading);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

.pos-band-lead {
    max-width: var(--pos-measure);
    margin-top: 4px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.pos-band-count {
    color: var(--cp-text-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* The destructive action sits apart, below everything it could undo. */
.pos-danger {
    margin-top: 34px;
    padding: 16px 18px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.pos-danger-copy {
    max-width: 58ch;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.pos-danger-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--cp-text);
    font-size: 13.5px;
    font-weight: var(--font-weight-semibold);
}

.pos-danger form { margin: 0; }

/* -----------------------------------------------------------------
   STAFF CREATE AND PROFILE
   These layouts are deliberately scoped away from the staff directory.
   ----------------------------------------------------------------- */
.pos-body--staff-create .pos-page-head {
    padding-bottom: 0;
}

.pos-staff-create {
    width: min(100%, 880px);
    margin: 8px auto 0;
    border: 1px solid var(--cp-divider);
    border-radius: 10px;
    background: var(--cp-surface);
    overflow: hidden;
}

.pos-staff-create-head {
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-staff-create-kicker {
    margin: 0 0 5px;
    color: var(--cp-accent);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pos-staff-create-title {
    color: var(--cp-heading);
    font-size: 19px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
}

.pos-staff-create-lead {
    max-width: 66ch;
    margin-top: 5px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.pos-staff-create-form {
    margin-top: 0;
}

.pos-staff-create-section {
    max-width: none;
    margin: 0;
    padding: 20px 24px 22px;
    border: 0;
}

.pos-staff-create-section + .pos-staff-create-section {
    border-top: 1px solid var(--cp-divider);
}

.pos-staff-create-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 0;
    color: var(--cp-text);
}

.pos-staff-create-step-number {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cp-accent);
    border-radius: 50%;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.pos-staff-create-step-copy,
.pos-staff-create-section-title,
.pos-staff-create-section-lead {
    display: block;
}

.pos-staff-create-section-title {
    color: var(--cp-heading);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.pos-staff-create-section-lead {
    margin-top: 3px;
    color: var(--cp-text-muted);
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.45;
}

.pos-staff-create-section .pos-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    max-width: none;
}

.pos-staff-pin-field {
    width: min(100%, 190px);
}

.pos-staff-link-field {
    grid-column: 1 / -1;
    width: min(100%, 420px);
}

.pos-staff-create-section--access > .pos-fieldset-lead {
    margin: -7px 0 14px 39px;
}

.pos-staff-create-section--access .pos-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pos-staff-create-actions {
    justify-content: flex-end;
    margin-top: 0;
    padding: 14px 24px;
    border-top: 1px solid var(--cp-divider);
}

/* The page head and every edit card share one readable centre line. */
.pos-body--staff-profile .pos-page-head,
.pos-staff-profile {
    width: min(100%, 920px);
    margin-inline: auto;
}

.pos-staff-profile {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.pos-staff-profile-summary {
    margin-top: 0;
    border-radius: 10px;
}

.pos-staff-profile-summary .pos-strip-cell {
    padding: 13px 16px;
}

.pos-staff-profile > .pos-staff-profile-card {
    margin: 0;
    padding: 20px 24px;
    border: 1px solid var(--cp-divider);
    border-radius: 10px;
    background: var(--cp-surface);
    overflow: hidden;
}

.pos-staff-profile-card .pos-band-title {
    font-size: 15px;
}

.pos-staff-profile-card .pos-band-lead {
    max-width: 68ch;
}

.pos-staff-profile-card .pos-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    max-width: none;
}

.pos-staff-profile-card--security .pos-form-grid {
    grid-template-columns: minmax(0, 190px);
    max-width: 190px;
}

.pos-staff-profile-card--access .pos-form-grid {
    grid-template-columns: minmax(0, 380px);
    max-width: 380px;
}

.pos-staff-profile-actions {
    justify-content: flex-end;
    margin: 20px -24px -20px;
    padding: 14px 24px;
    border-top: 1px solid var(--cp-divider);
}

.pos-staff-profile-card--access .pos-form {
    margin-top: 18px;
}

.pos-staff-profile-card--access .pos-list {
    margin-inline: -24px;
}

.pos-staff-profile-card--access .pos-list-row {
    padding-inline: 24px;
}

.pos-staff-profile-card--access .pos-list-row:last-child {
    border-bottom: 0;
}

.pos-staff-profile-card--access > .pos-list:last-child {
    margin-bottom: -20px;
}

.pos-staff-revoke-button {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
}

.pos-staff-profile-card--status .pos-band-head {
    align-items: center;
}

.pos-staff-status-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 18px -24px -20px;
    padding: 16px 24px;
    border-top: 1px solid var(--cp-divider);
}

.pos-staff-status-action form {
    flex: none;
    margin: 0;
}

@media (max-width: 720px) {
    .pos-staff-create {
        margin-top: 4px;
    }

    .pos-staff-create-head,
    .pos-staff-create-section {
        padding-inline: 16px;
    }

    .pos-staff-create-section .pos-form-grid,
    .pos-staff-profile-card .pos-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-staff-link-field {
        grid-column: auto;
    }

    .pos-staff-create-section--access .pos-checks {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-staff-create-actions {
        padding-inline: 16px;
    }

    .pos-staff-profile {
        gap: 12px;
        margin-top: 14px;
    }

    .pos-staff-profile .pos-staff-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-staff-profile .pos-strip-cell {
        border-top: 1px solid var(--cp-divider);
        border-left: 1px solid var(--cp-divider);
    }

    .pos-staff-profile .pos-strip-cell:nth-child(odd) {
        border-left: 0;
    }

    .pos-staff-profile .pos-strip-cell:nth-child(-n + 2) {
        border-top: 0;
    }

    .pos-staff-profile > .pos-staff-profile-card {
        padding: 18px 16px;
    }

    .pos-staff-profile-card--security .pos-form-grid,
    .pos-staff-profile-card--access .pos-form-grid {
        max-width: 100%;
    }

    .pos-staff-profile-actions {
        margin: 18px -16px -18px;
        padding-inline: 16px;
    }

    .pos-staff-profile-card--access .pos-list {
        margin-inline: -16px;
    }

    .pos-staff-profile-card--access .pos-list-row {
        padding-inline: 16px;
    }

    .pos-staff-profile-card--access > .pos-list:last-child {
        margin-bottom: -18px;
    }

    .pos-staff-status-action {
        align-items: stretch;
        flex-direction: column;
        margin: 18px -16px -18px;
        padding-inline: 16px;
    }
}

@media (max-width: 480px) {
    .pos-staff-create-actions,
    .pos-staff-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pos-staff-create-actions .pos-btn,
    .pos-staff-profile-actions .pos-btn,
    .pos-staff-status-action form,
    .pos-staff-status-action .pos-btn {
        width: 100%;
    }

    .pos-staff-profile .pos-staff-profile-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-staff-profile .pos-strip-cell {
        border-left: 0;
    }

    .pos-staff-profile .pos-strip-cell:nth-child(2) {
        border-top: 1px solid var(--cp-divider);
    }
}

/* -----------------------------------------------------------------
   STAFF DIRECTORY
   Scoped to the F3 list so shops and staff detail keep their existing layout.
   ----------------------------------------------------------------- */
.pos-body--staff .pos-page-head {
    padding-bottom: 4px;
    border-bottom: 0;
}

.pos-body--staff .pos-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pos-body--staff .pos-page-actions .pos-btn > span {
    font-size: 17px;
    line-height: 1;
}

.pos-staff-directory {
    --pos-staff-head-bg: #f7f9fb;

    margin-top: 12px;
    border: 1px solid var(--cp-divider);
    border-radius: 10px;
    background: var(--cp-surface);
    overflow: hidden;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-staff-directory {
    --pos-staff-head-bg: var(--cp-surface-soft);
}

.pos-staff-directory--with-form {
    margin-top: 30px;
}

.pos-staff-directory-message {
    padding: 20px;
}

.pos-staff-blank {
    margin: 0;
    padding: 36px 26px;
    border: 0;
    border-radius: 0;
}

.pos-staff-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    min-height: 54px;
    padding: 10px;
}

.pos-staff-tabs,
.pos-staff-tools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pos-staff-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cp-border);
    border-radius: 6px;
    background: var(--cp-bg);
    color: var(--cp-text);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
}

.pos-staff-tab span {
    margin-left: 3px;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.pos-staff-tab:hover {
    background: var(--cp-surface-hover);
    border-color: var(--cp-border);
    color: var(--cp-text);
}

.pos-staff-tab[aria-pressed="true"] {
    border-color: var(--cp-accent);
    background: var(--cp-accent);
    color: var(--cp-accent-ink);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-staff-tab[aria-pressed="true"] {
    border-color: #555555;
}

.pos-staff-tools {
    margin-left: auto;
}

.pos-staff-search,
.pos-staff-filter {
    position: relative;
    display: block;
    color: var(--cp-text-muted);
}

.pos-staff-search svg,
.pos-staff-filter svg {
    position: absolute;
    top: 50%;
    left: 9px;
    z-index: 1;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    pointer-events: none;
}

.pos-staff-search input,
.pos-staff-filter select {
    min-height: 30px;
    border: 1px solid var(--cp-border);
    border-radius: 6px;
    background: var(--cp-bg);
    color: var(--cp-text);
    font: inherit;
    font-size: 12px;
}

.pos-staff-search input {
    width: 220px;
    padding: 5px 10px 5px 32px;
}

.pos-staff-search input::placeholder {
    color: var(--cp-text-faint);
}

.pos-staff-filter select {
    min-width: 86px;
    padding: 5px 8px 5px 31px;
    cursor: pointer;
}

.pos-staff-table-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--cp-divider);
}

.pos-staff-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.pos-staff-table th {
    padding: 8px 12px;
    background: var(--pos-staff-head-bg);
    color: var(--cp-text-muted);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    text-align: left;
}

.pos-staff-table td {
    height: 58px;
    padding: 9px 12px;
    color: var(--cp-text);
    font-size: 12.5px;
    vertical-align: middle;
}

.pos-staff-table tbody tr {
    border-top: 1px solid var(--cp-divider);
}

.pos-staff-table tbody tr:first-child {
    border-top: 0;
}

.pos-staff-table tbody tr:not(.pos-staff-no-results):hover {
    background: var(--cp-surface-soft);
}

.pos-staff-col-member { width: 28%; }
.pos-staff-col-code { width: 17%; }
.pos-staff-col-status { width: 14%; }
.pos-staff-col-access { width: 21%; }
.pos-staff-col-pin { width: 14%; }
.pos-staff-col-action { width: 46px; }

.pos-staff-member {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pos-staff-avatar {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-staff-avatar {
    color: #c2c5cc;
}

.pos-staff-member-copy {
    display: block;
    min-width: 0;
}

.pos-staff-member-name,
.pos-staff-primary,
.pos-staff-secondary {
    display: block;
}

.pos-staff-member-name,
.pos-staff-primary {
    overflow: hidden;
    color: var(--cp-text);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-staff-member-name {
    text-decoration: none;
}

.pos-staff-member-name:hover {
    color: var(--cp-accent);
    text-decoration: underline;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-staff-member-name:hover {
    color: #e6e8ec;
}

.pos-staff-secondary {
    margin-top: 2px;
    overflow: hidden;
    color: var(--cp-text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-staff-action-cell {
    text-align: center;
}

.pos-staff-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--cp-text-muted);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.pos-staff-row-action:hover {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
    text-decoration: none;
}

.pos-staff-no-results td {
    height: 90px;
    color: var(--cp-text-muted);
    text-align: center;
}

/* The staff list pages in the browser, but its footer is the same pager the
   server-paged lists use (see "Pager" below). All it adds is the inset of the
   table it sits under. */
.pos-staff-footer {
    padding-right: 12px;
    padding-left: 12px;
}

.pos-staff-pages {
    display: inline-flex;
    align-items: center;
}

.pos-staff-page-ellipsis {
    min-width: 20px;
    color: var(--cp-text-muted);
    text-align: center;
}

@media (max-width: 720px) {
    .pos-staff-toolbar {
        align-items: stretch;
    }

    .pos-staff-tools {
        width: 100%;
        margin-left: 0;
    }

    .pos-staff-search {
        flex: 1 1 auto;
    }

    .pos-staff-search input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .pos-staff-tabs {
        width: 100%;
    }

    .pos-staff-tab {
        flex: 1 1 0;
    }

    .pos-staff-tools {
        flex-wrap: wrap;
    }

    .pos-staff-search,
    .pos-staff-filter,
    .pos-staff-filter select {
        width: 100%;
    }
}

/* -----------------------------------------------------------------
   RESPONSIVE
   Nothing between 1200px and 1599px: css/viewport_scale.css lays the
   product out at ~1600px inside that band, and a media query there would
   fire against the wrong width. The POS surface does not load that layer,
   but it keeps the same rule so the two can never disagree.
   ----------------------------------------------------------------- */
@media (max-width: 1199px) {
    .pos-main {
        padding-inline: 16px;
    }
}

@media (max-width: 960px) {
    .pos-auth {
        grid-template-columns: minmax(0, 1fr);
    }

    /* On a narrow screen the job is signing in, not reading the pitch. The
       task pane comes first and the brand panel follows it; nothing is
       dropped except the drawing, which has no room left to read. */
    .pos-auth-pane {
        order: -1;
        padding-block: 40px;
    }

    .pos-auth-art {
        display: none;
    }

    .pos-auth-byline {
        margin-top: 8px;
    }
}

@media (max-width: 840px) {
    .pos-app-shell {
        display: block;
        transition: none;
    }

    .pos-sidebar {
        width: 100%;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--cp-divider);
    }

    .pos-nav-disclosure--desktop {
        display: none;
    }

    .pos-nav-disclosure--mobile,
    .pos-nav-disclosure--mobile[open] {
        display: block;
        width: 100%;
    }
}

@media (max-width: 720px) {
    /* One column, because the rail is now groups: two columns put an open
       group's children beside the next group's heading, and the list stopped
       reading top to bottom. */
    .pos-nav {
        grid-template-columns: minmax(0, 1fr);
        padding: 8px 16px 12px;
    }

    .pos-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-strip-cell {
        border-left: 0;
        border-top: 1px solid var(--cp-divider);
    }

    .pos-strip-cell:first-child { border-top: 0; }

    .pos-journey-step {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .pos-journey-action {
        grid-column: 2;
        grid-row: auto;
        margin-top: 10px;
    }

    .pos-page-actions {
        width: 100%;
    }

    .pos-topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px;
    }

    .pos-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .pos-topbar-user {
        order: -1;
    }

    .pos-step {
        gap: 14px;
        padding: 11px 0;
    }

    .pos-facts {
        grid-template-columns: 1fr;
    }

    .pos-fact {
        padding-right: 0;
    }
}

@media (max-width: 400px) {
    .pos-theme-choice {
        padding: 0 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pos-btn,
    .pos-app-shell,
    .pos-sidebar-toggle-chevron {
        transition: none;
    }

    .pos-rise,
    .pos-step-n,
    .pos-step-body {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .pos-steps-spine {
        animation: none;
        transform: scaleY(1);
    }

    .pos-art .d {
        animation: none;
        stroke-dashoffset: 0;
    }

    .pos-art .f {
        animation: none;
        opacity: 1;
    }
}

/* -----------------------------------------------------------------
   REPORTING
   Sales, shifts and exceptions. One table style, one filter bar and one
   pagination control shared by all three, so a report never invents a
   second way to show a row.
   ----------------------------------------------------------------- */
.pos-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
}

.pos-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pos-filter-label {
    color: var(--cp-text-muted);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
}

.pos-filter-input {
    min-width: 172px;
}

.pos-filter--action {
    margin-left: auto;
}

.pos-table-scroll {
    margin-top: 14px;
    overflow-x: auto;
    border-top: 1px solid var(--cp-divider);
}

.pos-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.pos-table th {
    padding: 8px 12px;
    background: var(--cp-surface-soft);
    color: var(--cp-text-muted);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
}

.pos-table td {
    padding: 10px 12px;
    color: var(--cp-text);
    font-size: 12.5px;
    line-height: 1.45;
    vertical-align: top;
}

.pos-table tbody tr {
    border-top: 1px solid var(--cp-divider);
}

.pos-table tbody tr:first-child {
    border-top: 0;
}

.pos-table tbody tr:hover {
    background: var(--cp-surface-soft);
}

/* Figures line up on their last digit; tabular numerals stop a column of
   totals from shifting as the digits change. */
.pos-table-numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.pos-table th.pos-table-col-amount,
.pos-table th.pos-table-col-count {
    text-align: right;
}

.pos-table-col-time { width: 96px; }
.pos-table-col-reference { width: 168px; }
.pos-table-col-person { width: 148px; }
.pos-table-col-count { width: 76px; }
.pos-table-col-amount { width: 124px; }
.pos-table-col-method { width: 148px; }
.pos-table-col-status { width: 156px; }

.pos-table-sub {
    display: block;
    margin-top: 2px;
    color: var(--cp-text-muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.pos-table .pos-state {
    margin-left: 6px;
    font-size: 11px;
}

.pos-table-numeric .pos-state {
    margin-left: 0;
}

.pos-report-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 32px;
    margin-top: 18px;
}

.pos-report-panel {
    min-width: 0;
}

.pos-report-panel .pos-subsection-title {
    margin: 0;
}

/* ── Pager ─────────────────────────────────────────────────────────────────
   The workspace's shared pager (app_render_pager), drawn again here because
   the POS host serves nothing outside /pos/ and so cannot load the workspace
   stylesheet that styles it. css/enterprise-ui.css holds the original; keep
   the two in step.

   One line: what is showing, then the step to the next page. The top rule is
   also a position rail. Its accented stretch is where this page sits in the
   whole list, the way a scrollbar thumb sits in its track. */
.ui-pagination {
    --pos-pager-accent: var(--cp-accent);
    --pos-pager-hover: #eef3fc;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Only matters once the line has had to break: the controls that dropped
       to a second row stay on the right, under where they were. */
    justify-content: flex-end;
    column-gap: 12px;
    min-height: 34px;
    padding-top: 2px;
    border-top: 1px solid var(--cp-divider);
    color: var(--cp-text-muted);
    font-size: 12px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}

/* Graphite dark carries no blue chrome, and its accent token is a surface
   tint rather than an ink, so the marked state is the text colour itself. */
html[data-pos-theme-enabled="true"][data-theme="dark"] .ui-pagination {
    --pos-pager-accent: var(--cp-text);
    --pos-pager-hover: var(--cp-surface-hover);
}

.pos-pagination {
    margin-top: 14px;
}

.ui-pagination__rail {
    position: absolute;
    top: -1px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    pointer-events: none;
}

.ui-pagination__rail rect {
    fill: var(--pos-pager-accent);
}

/* The sentence a screen reader hears in place of the short visible form. */
.ui-pagination__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Takes whatever the controls leave, which pushes them to the right edge. */
.ui-pagination__summary {
    flex: 1 1 0;
    margin: 0;
}

/* The noun is the first thing to go when the line is short: it wraps to a
   second line that this fixed height does not show. */
.ui-pagination__count {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
}

.ui-pagination__summary b,
.ui-pagination__page b {
    color: var(--cp-text);
    font-weight: var(--font-weight-semibold);
}

.ui-pagination__controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
}

/* Nothing here is boxed. A page is a number and a step is a chevron; the hover
   ground and the accent say which of them can be pressed. Both anchors and
   buttons land here, so everything a button brings with it is reset. */
.ui-pagination__button,
.ui-pagination__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cp-text-muted);
    font: inherit;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
}

.ui-pagination__button {
    width: 28px;
    padding: 0;
    color: var(--cp-text);
}

/* The rule under the page in force is a border, kept transparent on the others
   so the numbers do not shift when the mark moves. (The workspace draws it as
   an inset shadow; this surface carries no shadows.) */
.ui-pagination__size {
    min-width: 26px;
    padding: 0 6px;
    border-bottom: 2px solid transparent;
}

.ui-pagination__button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.ui-pagination__button:hover,
a.ui-pagination__size:hover,
button.ui-pagination__button:hover:not([disabled]),
button.ui-pagination__size:hover:not([disabled]) {
    background: var(--pos-pager-hover);
    color: var(--pos-pager-accent);
}

.ui-pagination__button:focus-visible,
.ui-pagination__size:focus-visible {
    border-radius: 0;
}

.ui-pagination__page {
    min-width: 38px;
    padding: 0 4px;
    text-align: center;
}

.ui-pagination__button.is-disabled,
.ui-pagination__button[disabled] {
    color: var(--cp-text-muted);
    opacity: 0.4;
    cursor: default;
}

/* The page in force is marked by the accent and a rule under it, no fill. */
.ui-pagination__size.is-active,
.ui-pagination__size[aria-current="page"] {
    border-bottom-color: currentColor;
    color: var(--pos-pager-accent);
    font-weight: var(--font-weight-semibold);
}

/* A pager the browser pages itself (the staff list) stays in the page when
   everything fits; it then keeps its count and drops the rest. */
.ui-pagination--single .ui-pagination__rail,
.ui-pagination--single .ui-pagination__controls {
    display: none;
}

@media (max-width: 840px) {
    .pos-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .pos-filter-input {
        min-width: 0;
        width: 100%;
    }

    .pos-filter--action {
        margin-left: 0;
    }

    .pos-report-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

/* -----------------------------------------------------------------
   ALERTS

   An alert is a short piece of prose, not a table row: a state word,
   what happened, what was measured when it was detected, and where to
   go. The measurements sit under the sentence in muted type because
   they are evidence for the sentence, not competing with it.
   ----------------------------------------------------------------- */

.pos-alerts {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cp-divider);
}

.pos-alert {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cp-divider);
}

.pos-alert-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.pos-alert-title {
    margin: 0;
    color: var(--cp-text);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.pos-alert-sentence {
    max-width: var(--pos-measure);
    margin: 0;
    color: var(--cp-text);
    font-size: 13px;
    line-height: 1.5;
}

.pos-alert-details {
    display: grid;
    max-width: var(--pos-measure);
    gap: 3px;
    margin: 2px 0 0;
    padding: 0;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    list-style: none;
}

.pos-alert-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
}

.pos-alert-foot form {
    margin: 0;
}

/* A cleared alert stays readable but stops competing with the open
   ones above it. */
.pos-alert--cleared .pos-alert-title,
.pos-alert--cleared .pos-alert-sentence {
    color: var(--cp-text-muted);
}

/* -----------------------------------------------------------------
   INVENTORY

   The stock list is a matrix, not a list: every goods item is joined
   against every location, so most rows are zero. The design answers
   that rather than styling around it. The four counts at the top are
   the filter, so seeing "3 short" and acting on it is one click and no
   scrolling. Rows are laid out as a grid rather than a table because
   the number is the thing being read, and a table makes it just
   another cell.
   ----------------------------------------------------------------- */

.pos-strip--views {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pos-strip-cell--view {
    display: block;
    /* Every cell reserves the marker so choosing one does not resize the bar.
       A border rather than an inset shadow: this surface is flat. */
    border-bottom: 2px solid transparent;
    color: inherit;
    text-decoration: none;
}

.pos-strip-cell--view:hover {
    background: var(--cp-surface-hover);
}

/* The chosen view is marked by a rule on its own edge, not a fill: the
   cells sit in one bar and a filled cell reads as a button. */
.pos-strip-cell--view[aria-current="true"] {
    border-bottom-color: var(--cp-accent);
}

/* Dark redefines --cp-accent as a 7% white tint for surfaces, so a mark drawn
   in it disappears. The dark theme's own blue is --cp-heading. */
html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-strip-cell--view[aria-current="true"] {
    border-bottom-color: var(--cp-heading);
}

.pos-strip-cell--view[aria-current="true"] .pos-strip-label {
    color: var(--cp-text);
}

/* A shortage is the one state here that has gone wrong, so it is the
   one that carries colour. Everything else stays neutral. */
.pos-strip-cell--alert .pos-strip-value {
    color: var(--cp-serious);
}

/* An explanation nobody needs twice should not occupy the page every
   visit. It sits behind the heading's info button and opens over the
   page, so asking for it costs nothing and never moves the list. */
.pos-band-title-group {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pos-info {
    position: relative;
}

.pos-info-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--cp-text-muted);
    cursor: pointer;
    list-style: none;
}

.pos-info-toggle::-webkit-details-marker {
    display: none;
}

.pos-info-toggle:hover,
.pos-info[open] > .pos-info-toggle {
    background: var(--cp-surface-hover);
    color: var(--cp-text);
}

.pos-info-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.pos-info-body {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    width: 320px;
    max-width: 320px;
    padding: 12px 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    color: var(--cp-text-muted);
    font-size: 12.5px;
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
}

.pos-info-body p {
    margin: 0;
}

.pos-info-body p + p {
    margin-top: 8px;
}

.pos-info-body strong {
    color: var(--cp-text);
    font-weight: var(--font-weight-medium);
}

/* A list is one outlined unit: the filter row, the table and the pager
   inside a single border, exactly as .pos-staff-directory already does
   it. Boxing the filters on their own and leaving the table open at the
   sides made two shapes out of one thing. */
.pos-directory {
    --pos-directory-head-bg: #f7f9fb;

    margin-top: 14px;
    border: 1px solid var(--cp-divider);
    border-radius: 10px;
    background: var(--cp-surface);
    overflow: hidden;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-directory {
    --pos-directory-head-bg: var(--cp-surface-soft);
}

/* Inside the card the filter row is part of the card: it keeps the
   padding and drops its own outline, so there is one border around the
   whole list rather than a box inside a box. */
.pos-directory .pos-filters {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pos-directory .pos-table-scroll {
    margin-top: 0;
}

.pos-directory .pos-table th {
    background: var(--pos-directory-head-bg);
}

/* Inside a directory the pager is the table's last row: flush under it, its
   rule running the width of the box and its content inset as the cells are. */
.pos-directory .pos-pagination {
    margin: 0;
    padding-right: 14px;
    padding-left: 14px;
}

.pos-directory .pos-blank {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--cp-divider);
    border-radius: 0;
}

/* A quantity beside a product name reads as a price until a column
   heading says otherwise, so the balances are a real table with real
   headers rather than a styled list. */
.pos-table--stock td {
    vertical-align: middle;
}

.pos-table-col-action {
    width: 120px;
}

.pos-table th.pos-table-col-action {
    text-align: right;
}

.pos-stock-name {
    display: block;
    color: var(--cp-text);
    font-weight: var(--font-weight-medium);
}

/* The count is the answer the page exists to give, so it is set larger
   than the rest of the row and aligned on the digits. */
.pos-stock-count {
    display: block;
    color: var(--cp-text);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.pos-stock-count[data-state="short"] {
    color: var(--cp-serious);
}

.pos-stock-count[data-state="empty"] {
    color: var(--cp-text-muted);
    font-weight: var(--font-weight-regular);
}

.pos-stock-actions {
    text-align: right;
    white-space: nowrap;
}

.pos-stock-actions .pos-stock-action + .pos-stock-action {
    margin-left: 14px;
}

/* These navigate: Adjust and Move open the record panel already filled in
   for this row. A bordered button on twelve consecutive rows reads as twelve
   decisions, and the surface's blue link treatment twelve times over is just
   as loud, so they are quiet until the row is under the pointer. */
.pos-stock-action {
    color: var(--cp-text-muted);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.pos-table--stock tr:hover .pos-stock-action {
    color: var(--cp-text);
}

.pos-stock-action:hover,
.pos-stock-action:focus-visible {
    color: var(--cp-accent);
    text-decoration: underline;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-stock-action:hover,
html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-stock-action:focus-visible {
    color: var(--cp-heading);
}

.pos-stock-delta {
    font-variant-numeric: tabular-nums;
}

.pos-stock-delta[data-direction="out"] {
    color: var(--cp-serious);
}

/* Recording stock is the minority visit, so it is closed until asked
   for. A row's own Adjust link opens it already filled in. */
.pos-record {
    margin-top: 20px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}

.pos-record-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.pos-record-summary::-webkit-details-marker {
    display: none;
}

.pos-record-summary-title {
    color: var(--cp-text);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.pos-record-summary-note {
    color: var(--cp-text-muted);
    font-size: 12.5px;
}

/* The disclosure triangle is drawn here so it turns with the state and
   agrees with the rest of the surface. */
.pos-record-summary::after {
    order: -1;
    color: var(--cp-text-muted);
    content: "+";
    font-size: 15px;
    line-height: 1;
}

.pos-record[open] > .pos-record-summary::after {
    content: "\2212";
}

.pos-record[open] > .pos-record-summary {
    border-bottom: 1px solid var(--cp-divider);
}

.pos-record-body {
    padding: 16px 18px 18px;
}

.pos-record-switch {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: end;
}

/* Kept in the tab order and reachable, but drawn as the tab above it. */
.pos-record-choice {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pos-record-tab {
    padding: 8px 2px;
    margin-right: 20px;
    border-bottom: 2px solid transparent;
    color: var(--cp-text-muted);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.pos-record-choice:checked + .pos-record-tab {
    border-bottom-color: var(--cp-accent);
    color: var(--cp-text);
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-record-choice:checked + .pos-record-tab {
    border-bottom-color: var(--cp-heading);
}

.pos-record-choice:focus-visible + .pos-record-tab {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

html[data-pos-theme-enabled="true"][data-theme="dark"] .pos-record-choice:focus-visible + .pos-record-tab {
    outline-color: var(--cp-heading);
}

.pos-record-panel {
    display: none;
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--cp-divider);
    margin-top: -1px;
}

#pos-record-movement:checked ~ .pos-record-panel[data-mode="movement"],
#pos-record-transfer:checked ~ .pos-record-panel[data-mode="transfer"] {
    display: block;
}

.pos-record-lead {
    max-width: var(--pos-measure);
    margin: 0 0 14px;
    color: var(--cp-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.pos-record--quiet .pos-record-body {
    padding-top: 0;
}