/* ============================================================
   NexERP — Style system
   Same design system as Nexbase (docs/DESIGN-SYSTEM.md there): the fonts and every token below are copied
   unchanged from Nexbase's assets/css/style.css (2026 redesign). Change them in both apps together.
   Rail #CC4700 · Accent #FF5900 · Page #232323 · 1rem = 10px
   ============================================================ */
/* ── Fonts (unchanged from current Nexbase) ── */
@font-face {
    font-family: 'D-DIN Condensed';
    src: url('../fonts/D-DINCondensed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN Next LT Pro';
    src: url('../fonts/DINNextLTPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Fixed density, sized against ClickUp (1rem = 10px). */
html { font-size: 10px; }

/* ── Tokens (dark — the mockups) ── */
body {
    --rail: #cc4700;
    --rail-active: rgba(255, 255, 255, 0.28);
    --accent: #ff5900;
    --accent-press: #e65000;
    --accent-soft: rgba(255, 89, 0, 0.19);
    --accent-text: #ff6a1a;

    --bg: #232323;
    --surface: #393939;
    --frame: #2a2a2a;
    --panel: #353535;
    --track: #474747;
    --chip: rgba(210, 210, 210, 0.19);
    --chip-hover: rgba(210, 210, 210, 0.28);
    --well: #161616;
    --line: #ffffff;
    --hair: rgba(255, 255, 255, 0.12);
    --grey-btn: #878787;

    --ink: #ffffff;
    --ink-2: #c8c8c8;
    --ink-3: #8e8e8e;
    --on-rail-active: #141414;

    --success: #22c55e;
    --warning: #f5a524;
    --danger: #ff4d4d;
    --info: #4b8bff;
    --purple: #9b7bff;

    --r-xl: 3rem;
    --r-lg: 2.4rem;
    --r-md: 1.2rem;
    --r-sm: 0.8rem;

    --font-heading: 'D-DIN Condensed', 'DIN Next LT Pro', sans-serif;
    --font-body: 'DIN Next LT Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Aliases kept so Nexbase snippets drop in unchanged */
    --orange: var(--accent);
    --orange-hover: var(--accent-press);
    --orange-light: var(--accent-soft);
    --orange-glow: rgba(255, 89, 0, 0.25);
    --dark: #1c1c1c;
    --dark-card: var(--surface);
    --dark-surface: #333333;
    --dark-border: var(--hair);
    --dark-hover: #444444;
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --topnav-height: 0px;
    --panel-w: 25rem;
    --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-snap: 0.2s;

    /* Layers — measured from Side_Rail / Selector / Selections / Panel SVGs.
       Edges are ONE even 1px ring (inset 0 0 0 1px), never 1px lines shifted to a side (Aaron, 29 Oct 2026):
       on round corners a shifted line becomes a crescent, thick mid-corner. Depth comes from the soft --lift
       shadows below; a surface never has both a border and an edge ring (that draws two outlines). */
    --rail-bg: linear-gradient(90deg, #cc4f0c 0%, #d95c19 50%, #e76a28 100%);
    --rail-edge: inset 0 0 0 1px rgba(255, 150, 90, 0.35);
    --rail-edge-c: rgba(255, 150, 90, 0.35);
    --selector-bg: linear-gradient(to bottom left, rgba(255, 255, 255, 0.45), rgba(240, 240, 240, 0.45) 45%, rgba(170, 170, 170, 0.45));
    --accent-edge: inset 0 0 0 1px rgba(255, 150, 90, 0.45);
    --accent-edge-c: rgba(255, 150, 90, 0.45);
    --panel-bg: linear-gradient(90deg, #424242 0%, #474747 50%, #4e4e4e 100%);
    --panel-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    --panel-edge-c: rgba(255, 255, 255, 0.07);     /* each edge's colour, for the squircle layer */
    --frame-bg: linear-gradient(90deg, #282828 0%, #2c2c2c 50%, #303030 100%);
    --column-bg: linear-gradient(90deg, #333333 0%, #363636 50%, #3a3a3a 100%);
    --grey-btn-bg: linear-gradient(90deg, #4c4c4c 0%, #545454 100%);
    --dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8c8c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --grey-btn-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    --grey-btn-edge-c: rgba(255, 255, 255, 0.09);
    --pressed: inset 0 1px 2px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.05);     /* wells: kept as designed (sets where the To-do / Calendar circles look centred) */
    --lift: 0 0 0.6rem rgba(0, 0, 0, 0.3), 0 0 1.4rem rgba(0, 0, 0, 0.24);          /* shadows even on all four sides: no y offset */
    --lift-sm: 0 0 2px rgba(0, 0, 0, 0.35), 0 0 0.6rem rgba(0, 0, 0, 0.2);
    --float: 0 0 1rem rgba(0, 0, 0, 0.35), 0 0 4rem rgba(0, 0, 0, 0.45);
}

/* ── Tokens (light) ── */
body.light {
    --rail-active: rgba(255, 255, 255, 0.32);
    --accent-text: #d24a00;
    --bg: #e6e6e6;
    --surface: #ffffff;
    --frame: #f7f7f7;
    --panel: #ffffff;
    --track: #d9d9d9;
    --chip: rgba(0, 0, 0, 0.07);
    --chip-hover: rgba(0, 0, 0, 0.12);
    --well: #f1f1f1;
    --line: #2b2b2b;
    --hair: rgba(0, 0, 0, 0.12);
    --grey-btn: #c2c2c2;
    --ink: #161616;
    --ink-2: #474747;
    --ink-3: #7a7a7a;
    --dark: #f1f1f1;
    --dark-surface: #f6f6f6;
    --dark-hover: #ececec;

    --panel-bg: linear-gradient(90deg, #f5f5f5 0%, #fafafa 50%, #ffffff 100%);
    --panel-edge: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    --panel-edge-c: rgba(0, 0, 0, 0.05);
    --frame-bg: linear-gradient(90deg, #e9e9e9 0%, #ededed 50%, #f1f1f1 100%);
    --column-bg: linear-gradient(90deg, #e3e3e3 0%, #e7e7e7 50%, #ebebeb 100%);
    --grey-btn-bg: linear-gradient(90deg, #f1f1f1 0%, #fafafa 100%);
    --dd-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474747' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --grey-btn-edge: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
    --grey-btn-edge-c: rgba(0, 0, 0, 0.07);
    --pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 -1px 0 #ffffff;
    --lift: 0 0 0.5rem rgba(0, 0, 0, 0.07), 0 0 1.4rem rgba(0, 0, 0, 0.07);
    --lift-sm: 0 0 2px rgba(0, 0, 0, 0.08), 0 0 0.6rem rgba(0, 0, 0, 0.06);
    --float: 0 0 1rem rgba(0, 0, 0, 0.08), 0 0 4rem rgba(0, 0, 0, 0.16);
}

/* ── Base (as Nexbase) ── */
:root { --sq: 1; --frame-r: 3.3rem; --frame-gap: 0.6rem; }
@supports (corner-shape: superellipse(1.3)) {
    :root { --sq: 1.18; }
    * { corner-shape: superellipse(1.3); }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.4;
    background: var(--bg);
    color: var(--ink);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.3px;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, .page-title, .card-title, .modal-title, .panel-title, .empty-state h3, .stat-num, .login-name { -webkit-text-stroke-width: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: calc(8px * var(--sq)); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ════════════════════════════════════════════
   SHELL + RAIL (Nexbase: floating flat-orange rail, icons only, widens with labels on hover)
   ════════════════════════════════════════════ */
.shell { position: relative; display: flex; height: 100vh; padding: 0.8rem; padding-left: calc(0.8rem + 5.2rem + 0.8rem); }
.rail-wrap {
    position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); z-index: 60;
    width: 5.2rem; max-height: calc(100% - 1.6rem); display: flex;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.16));
    transition: width 0.22s var(--ease-snap), filter 0.22s ease;
}
.rail-wrap:has(> .rail:hover:not(.shut)), .rail-wrap:has(:focus-visible):not(:has(> .rail.shut)) { width: 14.4rem; filter: drop-shadow(0 0 1.6rem rgba(0, 0, 0, 0.4)); }
.rail {
    flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0.4rem; gap: 0.2rem; overflow: hidden;
    background: #d95c19; box-shadow: var(--rail-edge); border-radius: calc(2.6rem * var(--sq));
}
.rail-item {
    flex: 0 1 4.4rem; min-height: 0; display: flex; align-items: center; gap: 1.2rem;
    border: 0; background: none; color: #ffffff; padding: 0 1.2rem; overflow: hidden;
    border-radius: calc(2.2rem * var(--sq)); transition: background 0.15s;
}
.rail-item svg { width: 2rem; height: 2rem; flex: none; }
.rail-item span { font-size: 1.35rem; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.rail:hover:not(.shut) .rail-item span, .rail:has(:focus-visible):not(.shut) .rail-item span { opacity: 1; }
.rail-item:hover { background: rgba(255, 255, 255, 0.16); }
.rail-item.active { background: var(--selector-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: var(--on-rail-active); }
.rail-item:focus-visible { outline-color: #ffffff; outline-offset: -3px; }
.rail-item:active { box-shadow: var(--pressed); }
.rail-div { flex: none; height: 1px; margin: 1rem 0.6rem 0; background: rgba(255, 255, 255, 0.55); }
.rail-me {
    flex: none; width: 3.2rem; height: 3.2rem; margin: 1rem auto 0.6rem 0.6rem;
    border-radius: 50%; corner-shape: round; border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: none; color: #ffffff; font-size: 1.1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; letter-spacing: 0.03em;
}
.rail-me:hover { background: rgba(255, 255, 255, 0.15); }

.main { flex: 1; min-width: 0; height: 100%; position: relative; }

/* ════════════════════════════════════════════
   PAGES (Home) and the framed WORKSPACE (modules: side list + page)
   ════════════════════════════════════════════ */
.page { height: 100%; overflow-y: auto; padding: 2.8rem 2.8rem 3.2rem 3.2rem; }
.page-inner { max-width: 120rem; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.page-title { font-family: var(--font-heading); font-weight: 400; font-size: 3.2rem; line-height: 1; letter-spacing: 0.005em; }
.page-sub { color: var(--ink-3); font-size: 1.4rem; margin-top: 0.8rem; }

.workspace {
    height: 100%; display: flex; gap: var(--frame-gap); padding: var(--frame-gap);
    background: var(--frame-bg); box-shadow: var(--panel-edge), var(--lift);
    border-radius: var(--frame-r); corner-shape: round; overflow: visible;
}
.side-panel {
    width: var(--panel-w); flex: none; display: flex; flex-direction: column; min-height: 0;
    background: var(--panel-bg); box-shadow: var(--panel-edge), var(--lift);
    border-radius: calc(var(--frame-r) - var(--frame-gap)); corner-shape: round;
}
.side-head { padding: 1.8rem 1.6rem 1.2rem; }
.side-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; line-height: 1; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke-width: 0; }
.side-list { list-style: none; overflow-y: auto; flex: 1; padding: 0.4rem 0.6rem 1rem; }
.side-item {
    display: flex; align-items: center; gap: 0.8rem; min-height: 3.4rem; padding: 0 0.8rem 0 1.2rem; margin-bottom: 0.2rem;
    border: 1px solid transparent; border-radius: calc(0.8rem * var(--sq)); font-size: 1.4rem; line-height: 1.2; color: var(--ink);
    text-decoration: none; cursor: pointer;
}
.side-item:hover { background: var(--chip); }
.side-item.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
body.light .side-item.active { box-shadow: 0 0 3px rgba(0, 0, 0, 0.08); }
.side-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item.dim .side-name { color: var(--ink-3); }

.ws { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: 1.8rem 1.6rem 0 2.2rem; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex: none; flex-wrap: wrap; }
.ws-title { font-family: var(--font-heading); font-weight: 400; font-size: 2.8rem; line-height: 1; -webkit-text-stroke-width: 0; }
.ws-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.8rem 1.4rem 2.4rem; margin: 0 -1.4rem; }
/* The page scrolls up under the title, which sits on frosted glass that fades out downwards (no hard edge) */
.ws-head { position: relative; z-index: 2; pointer-events: none; }
.ws-head > * { pointer-events: auto; }
.ws-head::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none; left: -2.2rem; right: -1.6rem; top: -1.8rem; bottom: -3.2rem;
    border-radius: 0 calc(var(--frame-r) - var(--frame-gap)) 0 0; corner-shape: round;
    background: linear-gradient(to bottom, rgba(44, 44, 44, 0.85), rgba(44, 44, 44, 0.35));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
body.light .ws-head::before { background: linear-gradient(to bottom, rgba(237, 237, 237, 0.85), rgba(237, 237, 237, 0.35)); }
.ws-head + .ws-body { margin-top: -5.2rem; padding-top: 7rem; }

/* ── Cards (raised panels) ── */
.card { background: var(--panel-bg); box-shadow: var(--panel-edge), var(--lift); border-radius: calc(1.6rem * var(--sq)); padding: 2rem 2.2rem; min-width: 0; }
.card + .card { margin-top: 1.6rem; }
.card-title { font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; line-height: 1; margin-bottom: 1.4rem; }
.card-sub { color: var(--ink-3); font-size: 1.3rem; margin: -0.6rem 0 1.6rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 1.6rem; }
.grid > .card + .card { margin-top: 0; }

/* ── Status chips (page build status) ── */
.badge { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 0.9rem; border-radius: 2rem; corner-shape: round; font-size: 1.1rem; line-height: 1; white-space: nowrap; flex: none; text-box: trim-both cap alphabetic; }
.badge-ready   { background: rgba(34, 197, 94, 0.16); color: var(--success); }
.badge-next    { background: var(--accent-soft); color: var(--accent-text); }
.badge-planned { background: var(--chip); color: var(--ink-3); }
.badge-parked  { background: rgba(245, 165, 36, 0.16); color: var(--warning); }
.badge-off     { background: rgba(255, 77, 77, 0.14); color: var(--danger); }
.side-item .badge { height: 1.9rem; padding: 0 0.7rem; font-size: 1rem; }

/* ── Home: build plan ── */
.plan-row { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
.plan-row:last-child { border-bottom: 0; }
.plan-row:hover .plan-name { color: var(--accent-text); }
.plan-name { flex: 1; min-width: 0; font-size: 1.4rem; }
.plan-meta { color: var(--ink-3); font-size: 1.2rem; }
.meter { height: 0.6rem; background: var(--hair); border-radius: 1rem; corner-shape: round; overflow: hidden; margin-top: 1rem; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.stat-num { font-family: var(--font-heading); font-size: 4rem; line-height: 1; }

/* ── Placeholder pages ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; color: var(--ink-3); padding: 6.4rem 2rem; font-size: 1.4rem; }
.empty-state h3 { font-family: var(--font-heading); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--ink); }
.empty-state p { max-width: 56rem; line-height: 1.55; color: var(--ink-2); }
.empty-state svg { width: 4.8rem; height: 4.8rem; opacity: 0.35; }
.content-loading { display: flex; justify-content: center; padding: 4.8rem; }
.spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; corner-shape: round; border: 3px solid var(--hair); border-top-color: var(--accent); animation: nxSpin 0.7s linear infinite; }
@keyframes nxSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════
   BUTTONS (every button a full capsule; orange follows the rail)
   ════════════════════════════════════════════ */
.btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.2rem; padding: 0 1.6rem;
    border-radius: 2rem; corner-shape: round; border: 0; font-size: 1.35rem; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background 0.15s, filter 0.15s;
}
.btn-primary { background: var(--rail-bg); box-shadow: var(--rail-edge), var(--lift-sm); color: #ffffff; }
.btn-primary:hover { background: linear-gradient(90deg, #d6560f 0%, #e3631e 50%, #ef7330 100%); }
.btn-secondary { background: var(--grey-btn-bg); box-shadow: var(--grey-btn-edge), var(--lift-sm); color: var(--ink); }
.btn-secondary:hover { filter: brightness(1.1); }
body.light .btn-secondary:hover { filter: brightness(0.97); }
.btn-danger { background: var(--danger); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), var(--lift-sm); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { box-shadow: var(--pressed); filter: none; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary svg, .btn-secondary svg { width: 1.4rem; height: 1.4rem; flex: none; }
.ws-head .btn-primary, .ws-head .btn-secondary { height: 3.6rem; }
.btn-icon-sm {
    display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex: none; padding-bottom: 0.2rem;
    background: none; border: 0; border-radius: 50%; corner-shape: round; color: var(--ink-2); font-size: 3.4rem; line-height: 1;
}
.btn-icon-sm:hover { background: var(--chip); color: var(--ink); }

/* ════════════════════════════════════════════
   FORMS (inputs pushed into the surface)
   ════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-group { margin-bottom: 1.6rem; }
.form-group label, .field-label { display: block; font-size: 1.25rem; color: var(--ink-2); margin-bottom: 0.6rem; }
.field-hint { font-size: 1.2rem; color: var(--ink-3); margin-top: 0.5rem; }
.field {
    width: 100%; min-height: 3.6rem; padding: 0.8rem 1.1rem; background: var(--well); border: 1px solid transparent;
    border-radius: calc(0.8rem * var(--sq)); box-shadow: var(--pressed); color: var(--ink); font-size: 1.35rem; line-height: 1.3;
}
textarea.field { resize: vertical; min-height: 9rem; }
select.field { -webkit-appearance: none; appearance: none; padding-right: 3.4rem; background: var(--dd-arrow) no-repeat right 1rem center / 1.4rem 1.4rem, var(--well); }
.field:focus { outline: none; box-shadow: var(--pressed), 0 0 0 2px var(--accent); }
.field:disabled { opacity: 0.6; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 0.4rem; }

/* Switch: round tick, like Nexbase's chip-toggle */
.switch { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.4rem; cursor: pointer; }
.switch input {
    -webkit-appearance: none; appearance: none; margin: 0; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; corner-shape: round;
    background: var(--track); box-shadow: var(--pressed); cursor: pointer; transition: background 0.15s ease;
}
.switch input:checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 1.3rem 1.3rem, var(--rail-bg);
    box-shadow: var(--rail-edge);
}

.error-msg {
    display: none; background: rgba(255, 77, 77, 0.12); border: 1px solid rgba(255, 77, 77, 0.35); color: var(--danger);
    font-size: 1.3rem; padding: 0.8rem 1.1rem; border-radius: calc(0.8rem * var(--sq)); margin-bottom: 1.2rem;
}
.error-msg.visible { display: block; }

/* ════════════════════════════════════════════
   TABLES (Nexbase .nx-table: hairlines only, one main column takes the spare width)
   ════════════════════════════════════════════ */
.nx-table { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
.nx-table thead th { text-align: left; font-weight: 400; color: var(--ink-3); font-size: 1.15rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.nx-table td { padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--hair); color: var(--ink-2); vertical-align: middle; }
.nx-table tbody tr:last-child td { border-bottom: 0; }
.nx-table.clickable tbody tr { cursor: pointer; }
.nx-table.clickable tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nx-table .t-fit { width: 1%; white-space: nowrap; }
.nx-table .t-main { color: var(--ink); }
.nx-table .t-empty { color: var(--ink-3); text-align: center; padding: 2.4rem; }
.nx-table .t-sub { display: block; margin-top: 0.3rem; font-size: 1.25rem; color: var(--ink-3); }
.nx-table .t-clip { max-width: 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-table .t-group th { text-align: left; font-weight: 400; font-size: 1.4rem; color: var(--ink); padding: 1.6rem 1.6rem 0.8rem; border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.nx-table .t-group th span { margin-left: 0.8rem; color: var(--ink-3); font-size: 1.2rem; }
.nx-table .t-group { cursor: default !important; }
.nx-table .t-group:hover th { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.nx-table .t-num { text-align: right; font-variant-numeric: tabular-nums; }
.nx-table .t-mono { font-family: var(--font-mono); font-size: 1.25rem; -webkit-text-stroke-width: 0; }
.nx-table .field { min-height: 3.2rem; padding: 0.5rem 0.9rem; font-size: 1.3rem; }
.table-card { padding: 0.6rem 0.4rem; }
.report-head { padding: 1.4rem 1.6rem 0.4rem; }
.report-head .card-sub { margin: -0.6rem 0 0.4rem; }
.nx-table tfoot .t-total td { border-top: 1px solid var(--line); border-bottom: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-table .t-group th.t-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── View toggle (Nexbase): equal-width options in a pressed track, the chosen one raised orange ── */
.view-toggle { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 3.2rem; padding: 0; background: var(--track); box-shadow: var(--pressed); border-radius: 2rem; corner-shape: round; overflow: hidden; }
.view-toggle button { border: 0; background: none; padding: 0 1.6rem; font-size: 1.35rem; line-height: 1; color: var(--ink); white-space: nowrap; border-radius: 2rem; corner-shape: round; transition: background 0.15s, color 0.15s; }
.view-toggle button:not(.active):hover { background: var(--chip); }
.view-toggle button.active { background: var(--rail-bg); box-shadow: var(--rail-edge); color: #ffffff; }
.view-toggle button:disabled { cursor: default; }
.view-toggle button:disabled:not(.active):hover { background: none; }

/* ── Quotation editor ── */
.q-editor .card + .card, .q-editor .q-bottom, .q-editor .q-bottom + .card { margin-top: 1.6rem; }
.q-head { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.q-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: flex-end; }
.q-actions .badge { height: 2.6rem; padding: 0 1.1rem; font-size: 1.2rem; }
.q-lines td { padding: 0.6rem 0.5rem; vertical-align: top; }
.q-lines th { padding: 1rem 0.5rem; }
.q-lines td.t-num { padding-top: 1.4rem; }
.q-lines .ql-no { color: var(--ink-3); padding-top: 1.4rem; text-align: right; min-width: 2.4rem; font-variant-numeric: tabular-nums; }
.q-lines td:has(> .ql-desc) { min-width: 21rem; width: 100%; }
.q-lines .ql-amt { min-width: 9rem; }
.q-lines-card { overflow-x: auto; }
.q-lines textarea.ql-desc { min-height: 3.6rem; resize: none; overflow: hidden; }
.q-lines .ql-title .ql-desc { font-family: var(--font-heading); font-size: 1.6rem; -webkit-text-stroke-width: 0; }
.q-lines .ql-title td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.q-lines .ql-amt .t-sub { font-size: 1.15rem; }
.q-line-actions { display: flex; gap: 0.8rem; padding: 1.2rem 1rem 1rem; }
.q-mini-row { display: flex; gap: 0; padding-top: 0.4rem; }
.q-mini { width: 2.4rem; height: 2.8rem; border: 0; background: none; color: var(--ink-3); border-radius: 50%; corner-shape: round; font-size: 1.5rem; line-height: 1; }
.q-mini:hover { background: var(--chip); color: var(--ink); }
.q-mini.ql-del { font-size: 2rem; }
.q-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
.q-bottom > .card + .card { margin-top: 0; }
.q-mode { height: 3.6rem; }
.q-trow { display: flex; justify-content: space-between; gap: 1.6rem; padding: 0.7rem 0; font-size: 1.45rem; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hair); }
.q-trow.q-grand { font-family: var(--font-heading); font-size: 2.4rem; -webkit-text-stroke-width: 0; border-bottom: 0; padding-top: 1.2rem; }
.q-trow.q-fx { color: var(--ink-3); font-size: 1.3rem; border-bottom: 0; }
.q-revbar { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.q-revs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.q-rev { display: inline-flex; align-items: center; gap: 0.6rem; height: 3rem; padding: 0 1.2rem; border-radius: 2rem; corner-shape: round; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 1.3rem; }
.q-rev span { color: var(--ink-3); font-size: 1.15rem; }
.q-rev.active { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.field:disabled { opacity: 0.85; }
@media (max-width: 1100px) { .q-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-bottom { grid-template-columns: 1fr; } }

/* Printing a report: just the page, black on white */
@media print {
    @page { margin: 14mm; }
    body, body.light { background: #fff; color: #000; height: auto; overflow: visible; -webkit-text-stroke-width: 0; }
    body * { --ink: #000; --ink-2: #222; --ink-3: #555; --hair: #ccc; --line: #000; }
    .rail-wrap, .side-panel, .toolbar, #wsActions, .field-hint, .toast { display: none !important; }
    .shell { padding: 0; height: auto; display: block; }
    .workspace, .ws, .ws-body, .main { display: block; height: auto; overflow: visible; padding: 0; margin: 0; background: none; box-shadow: none; }
    .card { background: none; box-shadow: none; padding: 0; break-inside: auto; }
    .card + .card { margin-top: 8mm; }
    .nx-table tr { break-inside: avoid; }
    .nx-table .t-group th { background: #f2f2f2; }
}
.toolbar { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1.4rem; flex-wrap: wrap; }
.toolbar .field { max-width: 32rem; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; corner-shape: round; color: #ffffff; font-size: 1.1rem; line-height: 1; flex: none; }
.who { display: flex; align-items: center; gap: 1rem; }

/* ════════════════════════════════════════════
   MODALS + MENUS (floating)
   ════════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: 1000; animation: nxFade 0.15s ease;
}
.modal-card {
    background: var(--panel-bg); box-shadow: var(--panel-edge), var(--float);
    border-radius: 4rem; corner-shape: round; padding: 2.4rem; width: 52rem; max-width: 100%; max-height: 88vh; overflow-y: auto;
    animation: nxRise 0.18s ease;
}
.modal-card.wide { width: 96rem; }
.jl-table td { padding: 0.6rem 0.6rem; }
.jl-table th { padding: 1rem 0.6rem; }
.jl-table tfoot td { border-bottom: 0; padding-top: 1.2rem; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.modal-title { font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem; line-height: 1.05; }
.modal-note { color: var(--ink-2); font-size: 1.35rem; margin-bottom: 1.4rem; line-height: 1.5; }
.secret { font-family: var(--font-mono); font-size: 1.8rem; padding: 1.2rem 1.4rem; background: var(--well); box-shadow: var(--pressed); border-radius: calc(0.8rem * var(--sq)); margin-bottom: 1.6rem; user-select: all; -webkit-text-stroke-width: 0; }
@keyframes nxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxRise { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }

.menu-pop {
    position: fixed; left: 7rem; bottom: 1.2rem; min-width: 24rem; z-index: 1200;
    background: var(--panel-bg); box-shadow: var(--panel-edge), var(--float);
    border-radius: calc(1.2rem * var(--sq)); padding: 0.6rem; animation: nxRise 0.15s ease;
}
.menu-head { padding: 0.8rem 1rem 1rem; border-bottom: 1px solid var(--hair); margin-bottom: 0.4rem; }
.menu-name { font-size: 1.45rem; }
.menu-role { font-size: 1.2rem; color: var(--ink-3); }
.menu-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.8rem 1rem; border: 0; background: none; border-radius: calc(0.6rem * var(--sq)); font-size: 1.35rem; text-align: left; color: var(--ink); }
.menu-item:hover { background: var(--chip); }
.menu-item svg { width: 1.6rem; height: 1.6rem; flex: none; }
.menu-item .menu-check { margin-left: auto; color: var(--accent-text); }
.menu-label { padding: 0.8rem 1rem 0.2rem; font-size: 1.1rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }

.toast {
    position: fixed; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 1300;
    padding: 1rem 1.8rem; border-radius: 2rem; corner-shape: round; font-size: 1.35rem;
    background: var(--panel-bg); box-shadow: var(--panel-edge), var(--float); animation: nxRise 0.18s ease;
}
.toast.bad { color: var(--danger); }

/* ════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════ */
body.login { height: auto; min-height: 100vh; overflow-y: auto; padding: 0.8rem; }
.login-stage {
    min-height: calc(100vh - 1.6rem); display: flex; align-items: center; justify-content: center; padding: 2.4rem;
    background: var(--frame-bg); border-radius: var(--frame-r); corner-shape: round; box-shadow: var(--panel-edge), var(--lift);
}
.login-card {
    width: 100%; max-width: 40rem; padding: 3.2rem 3.2rem 2.8rem;
    background: var(--panel-bg); border-radius: 4rem; corner-shape: round; box-shadow: var(--panel-edge), var(--float);
    animation: nxRise 0.28s var(--ease-snap) both;
}
.login-brand { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.8rem; }
.login-brand img { height: 4.4rem; width: auto; display: block; }
.login-name { font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; }
.login-sub { font-size: 1.2rem; color: var(--ink-3); margin-top: 0.3rem; }
.login-card h1 { font-family: var(--font-heading); font-weight: 400; font-size: 3.2rem; line-height: 1; margin-bottom: 0.6rem; }
.login-subtitle { font-size: 1.4rem; color: var(--ink-3); margin-bottom: 2.4rem; }
.login-card .field { min-height: 4.2rem; font-size: 1.5rem; padding: 0.9rem 1.3rem; }
.login-btn { width: 100%; height: 4.4rem; font-size: 1.6rem; margin-top: 0.6rem; }

/* ════════════════════════════════════════════
   NARROW SCREENS: the side list becomes a strip of capsules above the page
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
    .workspace { flex-direction: column; }
    .side-panel { width: auto; flex: none; }
    .side-head { display: none; }
    .side-list { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.6rem; }
    .side-item { flex: none; margin: 0; border-radius: 2rem; corner-shape: round; }
    .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }

/* ── Invoices ── */
.field-static { min-height: 4rem; display: flex; align-items: center; font-size: 1.5rem; color: var(--ink); }
#iLines tr.i-unbilled td { color: var(--ink-3); }
#iLines .il-amt { min-width: 10rem; }

/* ── Reports: P&L and Balance Sheet ── */
.nx-table tbody .t-total td { border-top: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-table tbody .rp-strong td { font-family: var(--font-heading, inherit); font-size: 1.6rem; }
.nx-table tbody .t-total { cursor: default; }

/* ── Paper editor (quotations; design B, 1 Nov 2026) ──
   The page is the printout: a white sheet on the desk in both themes, values are blanks on the page,
   actions and settings that do not print in the column beside it. Ink colours are the printout's, not the theme's. */
.pp-desk { display: flex; align-items: flex-start; gap: 2rem; padding-bottom: 4rem; }
.pp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pp-col > .error-msg { width: 100%; max-width: 92rem; }
.pp-sheet { --p-ink: #161616; --p-ink2: #555; --p-ink3: #8a8a8a; --p-rule: #d6d6d6; --p-hover: #f3f3f3; --p-focus: #fff1e7; --p-acc: #cc4700;
    width: 100%; max-width: 92rem; background: #fff; color: var(--p-ink); border-radius: 0.4rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0.6rem 2.4rem rgba(0, 0, 0, 0.18);
    padding: 4.8rem 5.6rem; font-family: var(--font-body); font-size: 1.35rem; line-height: 1.45; -webkit-text-stroke: 0.2px; }
.pp-sheet input, .pp-sheet textarea, .pp-sheet select { color: var(--p-ink); font: inherit; }
.pp-in { border: 0; background: transparent; padding: 0.15rem 0.3rem; margin: -0.15rem -0.3rem; border-radius: 0.3rem; outline: none;
    text-align: inherit; resize: none; width: 100%; transition: background-color 0.12s; }
.pp-in:hover:not(:disabled) { background-color: var(--p-hover); }
.pp-in:focus { background-color: var(--p-focus); box-shadow: inset 0 -1px 0 var(--p-acc); }
.pp-in::placeholder { color: #b8b8b8; }
.pp-in.n { text-align: right; }
.pp-in:disabled { -webkit-text-fill-color: var(--p-ink); color: var(--p-ink); opacity: 1; }
select.pp-in { -webkit-appearance: none; appearance: none; width: auto; cursor: pointer; }
select.pp-in:disabled { cursor: default; }
.pp-readonly .pp-sheet input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.pp-meta input[type=date]::-webkit-date-and-time-value { text-align: right; }                    /* Safari */
.pp-meta input[type=date]::-webkit-datetime-edit { flex: 0 1 auto; margin-left: auto; }        /* Chrome, Edge */
.pp-meta input[type=date]::-webkit-calendar-picker-indicator { display: none; }                /* flush right; a click opens the calendar (quote_paper.js) */
.pp-readonly .pp-sheet { cursor: pointer; }
.pp-readonly .pp-in { pointer-events: none; }        /* clicks reach the page, which offers a new revision (quote_paper.js) */
.pp-bottom .pp-notes[hidden] + div { margin-left: auto; }
.pp-faint { color: var(--p-ink3); }
.pp-link { color: var(--p-acc); cursor: pointer; font-size: 1.25rem; text-decoration: none; }
.pp-hint { display: inline-block; margin-top: 0.4rem; font-size: 1.15rem; }
.pp-lbl { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-ink3); margin-bottom: 0.3rem; }
.pp-top { display: flex; justify-content: space-between; gap: 3rem; }
.pp-co { display: flex; gap: 1.4rem; } .pp-co img { height: 6rem; }
.pp-coname { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; margin-bottom: 0.4rem; }
.pp-co small { color: var(--p-ink2); font-size: 1.1rem; line-height: 1.5; display: block; }
.pp-right h1 { font-family: var(--font-heading); font-weight: 400; font-size: 3.2rem; color: var(--p-acc); text-align: right; margin: 0 0 0.6rem; }
.pp-meta { border-collapse: collapse; margin-left: auto; font-size: 1.25rem; }
.pp-meta th { font-weight: 400; color: var(--p-ink3); text-align: left; padding: 0.15rem 1.4rem 0.15rem 0; white-space: nowrap; vertical-align: top; }
.pp-meta td { text-align: right; padding: 0.15rem 0; }
.pp-meta .pp-in { width: 14rem; text-align: right; } .pp-meta select.pp-in { width: auto; }
.pp-meta .no td { font-family: var(--font-heading); font-size: 1.6rem; }
.pp-meta .pp-opt th { color: #c0c0c0; }
.pp-readonly .pp-meta .pp-opt { display: none; }
.pp-to { margin-top: 3rem; font-size: 1.3rem; color: var(--p-ink2); }
.pp-cust { font-size: 1.6rem; color: var(--p-ink); margin-bottom: 0.2rem; }
.pp-attn-row { margin-top: 0.4rem; } .pp-attn { color: var(--p-ink); }
.pp-change { display: inline-block; margin-top: 0.4rem; opacity: 0; transition: opacity 0.15s; } .pp-to:hover .pp-change, .pp-change:focus { opacity: 1; }
.pp-cust-pick { position: relative; max-width: 40rem; }
.pp-cust-search { font-size: 1.6rem; border-bottom: 1px dashed var(--p-rule); border-radius: 0; }
.pp-cust-list { position: absolute; z-index: 20; top: calc(100% + 0.4rem); left: -0.3rem; right: 0; background: #fff; border-radius: 0.6rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0.8rem 2.4rem rgba(0, 0, 0, 0.18); max-height: 32rem; overflow: auto; padding: 0.4rem; }
.pp-cust-opt { display: flex; flex-direction: column; padding: 0.7rem 1rem; border-radius: 0.4rem; cursor: pointer; color: var(--p-ink); }
.pp-cust-opt span { font-size: 1.15rem; color: var(--p-ink3); } .pp-cust-opt:hover, .pp-cust-opt:first-child { background: var(--p-hover); }
.pp-cust-new { color: var(--p-acc); border-top: 1px solid #eee; border-radius: 0; margin-top: 0.2rem; }
.pp-subj { margin-top: 2.4rem; font-size: 1.6rem; display: flex; align-items: baseline; gap: 0.4rem; }
.pp-lines { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.pp-lines th { font-weight: 400; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p-ink3); text-align: left; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--p-ink); white-space: nowrap; }
.pp-lines td { padding: 0.8rem 0.6rem; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
.pp-lines .n { text-align: right; white-space: nowrap; }
.pp-lines td.pp-desc-cell { width: 100%; }
.pp-no { color: var(--p-ink3); width: 3rem; white-space: nowrap; position: relative; }
.pp-sect td { font-family: var(--font-heading); font-size: 1.6rem; padding-top: 1.6rem; border-bottom-color: #aaa; position: relative; }
.pp-meta-row { display: flex; gap: 0.8rem; align-items: center; min-height: 1.6rem; }
.pp-type { border: 0; background: none; font-size: 1.05rem; color: #b0b0b0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pp-type:hover, .pp-type:focus { color: var(--p-acc); outline: none; }
.pp-code { font-size: 1.1rem; color: var(--p-ink3); width: 14rem; }
.pp-sheet .pp-code { color: var(--p-ink3); -webkit-text-fill-color: var(--p-ink3); }
.pp-desc { display: block; }
.pp-qty .pp-in + .pp-in { margin-left: 0.3rem; }
.pp-disc select.pp-in { margin-right: 0.3rem; color: var(--p-ink3); }
.pp-amt { min-width: 10rem; } .pp-less { display: block; font-size: 1.05rem; color: var(--p-ink3); }
.pp-tools { position: absolute; left: -5.2rem; top: 0.8rem; display: flex; gap: 0.1rem; opacity: 0; transition: opacity 0.12s; }
.pp-sect .pp-tools { top: 1.7rem; }
tr:hover .pp-tools, .pp-tools:focus-within { opacity: 1; }
.pp-tools button { width: 1.7rem; height: 2rem; border: 0; background: none; color: #a8a8a8; cursor: pointer; font-size: 1.3rem; padding: 0; border-radius: 0.3rem; }
.pp-tools button:hover { background: var(--p-hover); color: var(--p-ink); } .pp-tools button:last-child:hover { color: #d33; }
.pp-new td { border-bottom: 0; } .pp-new .pp-no { color: #c4c4c4; } .pp-newin { font-size: 1.3rem; }
.pp-adds { display: flex; gap: 2.4rem; padding: 0.2rem 0 0 3.6rem; }
.pp-bottom { display: flex; justify-content: space-between; gap: 3rem; margin-top: 2rem; }
.pp-notes { flex: 1; font-size: 1.25rem; } .pp-para { display: block; line-height: 1.5; white-space: pre-wrap; }
.pp-tot { border-collapse: collapse; min-width: 28rem; } .pp-tot td { padding: 0.5rem 0; text-align: right; }
.pp-tot td:first-child { text-align: left; color: var(--p-ink2); padding-right: 3rem; }
.pp-tot .g td { border-top: 1px solid var(--p-ink); padding-top: 0.8rem; font-family: var(--font-heading); font-size: 2rem; color: var(--p-ink); }
.pp-tot .pp-fx td { font-size: 1.15rem; color: var(--p-ink3); }
.pp-tc { margin-top: 2.4rem; font-size: 1.2rem; }
.pp-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4rem; }
.pp-sign { width: 24rem; border-top: 1px solid var(--p-ink); padding-top: 0.6rem; font-size: 1.15rem; color: var(--p-ink2); }
.pp-gen { font-size: 1.05rem; color: #aaa; }
/* Every document on paper (paper.js): party beside an extra block, notes column, purchase line extras */
.pp-parties { display: flex; justify-content: space-between; gap: 3rem; } .pp-parties > .pp-to { flex: 1; min-width: 0; }
.pp-parties > .pp-to + .pp-to { flex: 0 1 30rem; }
.pp-notecol { flex: 1; display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.pp-kind { font-size: 1.05rem; }
.pp-acc { font-size: 1.1rem; color: var(--p-ink2); max-width: 18rem; text-overflow: ellipsis; }
.pp-desc-cell .pp-meta-row { flex-wrap: wrap; row-gap: 0.2rem; }
.pp-attn-row .pp-in { width: 24rem; }
.pp-readonly .pp-qty input[value=""] { display: none; }
.pp-lines td.pp-desc-cell { min-width: 0; }
.pp-copy { border: 0; background: none; -webkit-appearance: none; appearance: none; padding: 0; font: inherit; font-size: 1.25rem; color: var(--p-acc); cursor: pointer; max-width: 40rem; }
.pp-lines td.pp-units { white-space: nowrap; } .pp-units .pp-in { width: 6rem; }
.pp-lines tr.pp-off td { color: var(--p-ink3); }
.pp-filed { display: flex; flex-direction: column; gap: 0.1rem; font-size: 1.25rem; margin-top: 0.6rem; min-width: 0; }
.pp-filed span { color: var(--ink-3); font-size: 1.15rem; overflow-wrap: anywhere; } .pp-filed-link { color: var(--accent-text); overflow-wrap: anywhere; }
.pp-filed .pp-filed-wait { color: var(--ink-2); }
.pp-set-row.pp-strong { color: var(--ink); font-weight: 400; border-top: 1px solid var(--rule, rgba(128,128,128,0.25)); padding-top: 0.6rem; }
.pp-set-row > span:last-child:not(:first-child) { margin-left: auto; }
.pp-side { position: sticky; top: 0; width: 23rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.pp-actions { display: flex; flex-direction: column; gap: 0.8rem; } .pp-side button { width: 100%; }
.pp-status { display: flex; align-items: center; justify-content: space-between; min-height: 2.4rem; }
.pp-sep { height: 1px; background: var(--hair); margin: 0.6rem 0; }
.pp-set { display: flex; flex-direction: column; gap: 0.8rem; }
.pp-set-row { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; color: var(--ink-2); } .pp-set-row > span:first-child { flex: 1; }
.pp-set-in { height: 3rem; max-width: 9rem; text-align: right; }
.pp-mode { display: flex; } .pp-mode button { flex: 1; padding: 0 0.6rem; }
.pm-sel { height: 3rem; border-radius: 1.5rem; border: 0; padding: 0 1.2rem; background: var(--chip); color: var(--ink); font: inherit; font-size: 1.25rem; }
.pp-danger { color: var(--danger) !important; }
.pp-plist { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; margin-bottom: 1.2rem; }
.pp-prow { display: grid; grid-template-columns: 2rem 1fr auto 7rem; gap: 1rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.pp-pq { height: 3.2rem; text-align: right; }
@media (max-width: 1200px) { .pp-desk { flex-direction: column-reverse; } .pp-side { position: static; width: 100%; } .pp-actions { flex-direction: row; flex-wrap: wrap; } .pp-side button { width: auto; } }
@media (max-width: 760px) { .pp-sheet { padding: 2.4rem 2rem; } .pp-top { flex-direction: column; } .pp-tools { left: auto; right: 0; top: -1.6rem; } }

/* ── Outlook: Settings > Integrations and the Send window ── */
.ol-wrap { display: flex; flex-direction: column; gap: 1.6rem; max-width: 96rem; }
.ol-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; font-size: 1.4rem; color: var(--ink-2); }
.ol-steps li { display: flex; gap: 1.2rem; } .ol-steps b { color: var(--ink); }
.ol-n { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.ol-copy { display: flex; gap: 0.8rem; align-items: center; margin: 0.6rem 0; } .ol-copy code { background: var(--chip); padding: 0.6rem 1rem; border-radius: 0.6rem; font-size: 1.25rem; word-break: break-all; }
.sd-files { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; font-size: 1.35rem; }
.sd-file { display: flex; align-items: center; gap: 0.6rem; } .sd-big { color: var(--danger); }
.sd-x { border: 0; background: none; color: var(--ink-3); font-size: 1.8rem; cursor: pointer; } .sd-x:hover { color: var(--danger); }
.form-group .sd-add { display: inline-flex; align-items: center; width: fit-content; cursor: pointer; } .sd-hist { margin-top: 1rem; }