/*
 * Application shell + catalogue reference pages.
 *
 * Plain CSS, no build step -- house convention across all EJS projects.
 *
 * Two audiences drive every choice here:
 *   1. an operator reading a bright shop-floor screen at arm's length, so the
 *      type is large, the contrast is high and nothing important is grey;
 *   2. the same page pinned to a wall, so there is a real print stylesheet at
 *      the bottom rather than an afterthought.
 */

/*
 * These are ALIASES onto the house design system in ejs.css, which is the same
 * stylesheet Daily Tasks and Purchasing use. Nothing here invents a colour.
 *
 * Aliasing rather than find-and-replacing every rule means this app inherits
 * the house palette and typography wholesale, and inherits any future change to
 * it for free -- while the component rules below keep reading in the vocabulary
 * they were written in. If a value looks wrong, fix it in ejs.css, where every
 * app will get the fix.
 */
:root {
    --ink: var(--color-neutral-900);
    --ink-soft: var(--color-neutral-700);
    --ink-faint: var(--color-neutral-500);
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --line: var(--color-divider);
    --line-strong: var(--color-neutral-400);
    --brand: var(--color-accent);
    --brand-dark: var(--color-accent-800);
    --brand-tint: var(--color-accent-100);

    /* A cut is the destructive outcome, so it gets the alarm colour. */
    --cut-bg: #fdecec;
    --cut-ink: #8c1d1d;
    --cut-line: #e8b7b7;

    /* Ink is the safe outcome -- it prints, and a mistake is correctable.
       Drawn from the house accent so "will print" reads as the same blue the
       rest of the suite uses for ordinary information. */
    --ink-bg: var(--color-accent-100);
    --ink-ink: var(--color-accent-800);
    --ink-line: var(--color-accent-300);

    --warn-bg: #fdf3e2;
    --warn-ink: #8a5a08;
    --warn-line: #e8cea0;

    --off-bg: var(--color-neutral-200);
    --off-ink: var(--color-neutral-600);

    --radius: var(--radius-md);
    --mono: var(--font-mono);
}

* {
    box-sizing: border-box;
}

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

/*
 * Typography and background come from ejs.css so this app reads as part of the
 * suite. Only one thing is overridden: the base size.
 *
 * The house sets 14px, which is right for Daily Tasks on a desk. This app is
 * read at arm's length on a shop-floor screen by someone holding a sheet of
 * Corflute, so it steps up to 15px. That is a deliberate divergence, and the
 * smallest one that fixes the problem -- family, colour and rhythm stay house.
 */
body {
    font-size: 15px;
}

a {
    color: var(--brand);
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    z-index: 10;
    padding: 8px 12px;
    background: var(--surface);
    border: 2px solid var(--brand);
    border-radius: var(--radius);
}

/* .app-shell is the HOUSE shell wrapper now (see ejs.css) -- a fixed app bar
 * plus tab bar plus .app-content. Our old centred-column version fought it, so
 * it is gone rather than overridden; width now comes from .content-wrap. */

/* ---------------------------------------------------------------- header */

.app-header {
    background: var(--surface);
    border-bottom: 2px solid var(--line);
}

.app-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.app-brand {
    text-decoration: none;
    color: inherit;
}

.app-brand__name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-brand__sub {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-nav__link {
    display: block;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.app-nav__link:hover,
.app-nav__link:focus {
    background: var(--brand-tint);
    border-color: var(--brand);
}

.app-nav__link.is-current {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

/* ------------------------------------------------------------ page head */

.app-main {
    padding-top: 28px;
    padding-bottom: 40px;
}

.page-head {
    margin-bottom: 20px;
}

.page-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.page-lede {
    margin: 8px 0 0;
    max-width: 90ch;
    font-size: 16px;
    color: var(--ink-soft);
}

.section-title {
    margin: 32px 0 12px;
    font-size: 20px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 6px;
}

/* --------------------------------------------------------------- panels */

.panel {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
}

.panel--warn {
    border-left-color: var(--warn-ink);
    background: var(--warn-bg);
}

.panel h2 {
    margin: 0 0 8px;
    font-size: 17px;
}

.panel p,
.panel li {
    margin: 0 0 8px;
    max-width: 100ch;
}

.panel p:last-child,
.panel li:last-child {
    margin-bottom: 0;
}

.panel ol,
.panel ul {
    margin: 0 0 8px;
    padding-left: 22px;
}

/* --------------------------------------------------------------- tables */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

table.data caption {
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}

table.data th,
table.data td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

table.data thead th {
    background: #e7ecf2;
    border-bottom: 2px solid var(--line);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

table.data tbody tr:nth-child(even) {
    background: #fafbfd;
}

table.data tbody tr:last-child td {
    border-bottom: 0;
}

table.data tbody tr.is-inactive {
    color: var(--ink-faint);
}

td.num,
th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The reasoning column. Narrower and quieter than the facts beside it, but
 * never so quiet that it reads as decoration -- the notes are why the rule
 * exists, and they are the part that stops the mistake. */
td.why {
    max-width: 46ch;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.45;
}

/* --------------------------------------------------------------- badges */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--cut {
    background: var(--cut-bg);
    color: var(--cut-ink);
    border-color: var(--cut-line);
}

.badge--ink {
    background: var(--ink-bg);
    color: var(--ink-ink);
    border-color: var(--ink-line);
}

.badge--warn {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-color: var(--warn-line);
}

.badge--off {
    background: var(--off-bg);
    color: var(--off-ink);
    border-color: var(--line);
}

.badge--plain {
    background: var(--surface);
    color: var(--ink-soft);
    border-color: var(--line);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* ------------------------------------------------------ inline elements */

.code {
    font-family: var(--mono);
    font-size: 14px;
    background: #eef1f5;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 6px;
    word-break: break-word;
}

.spot-name {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}

.muted {
    color: var(--ink-faint);
}

/* A measurement must never wrap between the number and its unit. */
.mm {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stack-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

/* Material chips. Deliberately boxed rather than a comma list: "cuts on
 * these three things and nothing else" should be countable at a glance. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 3px 9px;
    background: var(--brand-tint);
    border: 1px solid var(--ink-line);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

.chips--cut li {
    background: var(--cut-bg);
    border-color: var(--cut-line);
    color: var(--cut-ink);
}

.chips--order li {
    background: var(--surface);
    border-color: var(--line);
    font-weight: 600;
}

.chips--order .chips__order {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    background: var(--ink);
    color: #ffffff;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 12px;
}

.hint {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.nothing {
    display: inline-block;
    padding: 3px 9px;
    background: var(--off-bg);
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ----------------------------------------------------------- card lists */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    break-inside: avoid;
}

.card__title {
    margin: 0 0 2px;
    font-size: 19px;
}

.card__sub {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--ink-faint);
}

.card h3 {
    margin: 16px 0 6px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

.facts {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 4px 14px;
    font-size: 15px;
}

.facts dt {
    color: var(--ink-soft);
}

.facts dd {
    margin: 0;
    font-weight: 600;
}

.mark {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.mark__type {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

/* ---------------------------------------------------------- empty state */

.empty {
    padding: 28px;
    background: var(--surface);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-soft);
}

.empty strong {
    display: block;
    color: var(--ink);
    font-size: 17px;
    margin-bottom: 4px;
}

/* -------------------------------------------------------------- footer */

.app-footer {
    padding-bottom: 32px;
    font-size: 13px;
    color: var(--ink-faint);
}

.app-footer__print {
    display: none;
}

/* --------------------------------------------------------------- print */

@media print {
    body {
        background: #ffffff;
        font-size: 11pt;
    }

    /* The house shell fixes the bar and offsets the content to clear it.
       On paper there is no bar to clear, so undo both or every page starts
       with 106px of white. */
    .app-bar,
    .tab-bar {
        display: none;
    }

    .app-content,
    .app-shell.has-tabs .app-content {
        padding-top: 0;
    }

    .content-wrap {
        max-width: none;
        padding: 0;
    }

    /* Navigation is meaningless on paper, and the header would repeat. */
    .app-nav,
    .skip-link,
    .app-header {
        display: none !important;
    }

    .app-footer__print {
        display: block;
    }

    .page-title {
        font-size: 18pt;
    }

    .panel,
    .table-wrap,
    .card,
    .empty {
        border: 1px solid #000000;
        border-radius: 0;
        box-shadow: none;
    }

    .panel {
        border-left-width: 3px;
    }

    table.data thead th {
        background: #ffffff;
        border-bottom: 2px solid #000000;
    }

    table.data tbody tr:nth-child(even) {
        background: #ffffff;
    }

    /* A rule split across a page break is a rule half-read. */
    table.data tr,
    .card,
    .mark {
        break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    .badge {
        border-color: #000000 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .chips li,
    .code,
    .nothing {
        background: #ffffff !important;
        border-color: #000000 !important;
        color: #000000 !important;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    a {
        color: #000000;
        text-decoration: none;
    }
}

/* ---------------------------------------------------------------------------
   Secondary navigation and the sign-out control.

   The subnav is a SECOND level under the primary one. It only appears inside
   the reference area, and it exists at a lower visual weight so it reads as
   "where in this section" rather than "where in this app" -- being inside a
   section must never look like being in a different application.
   --------------------------------------------------------------------------- */

.app-subnav {
    background: var(--surface-sunken, #f1f3f5);
    border-bottom: 1px solid var(--rule, #d5d9de);
}

.app-subnav .app-nav {
    gap: 0.25rem;
    padding: 0.35rem 0;
}

.app-subnav .app-nav__link {
    font-size: 0.9rem;
    padding: 0.3rem 0.7rem;
}

/* Pushed to the far end: it is not a destination, and it must never sit next
   to the section a tired operator is aiming for. */
.app-nav__signout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    padding-left: 1rem;
}

.app-nav__who {
    font-size: 0.85rem;
    opacity: 0.75;
    white-space: nowrap;
}

.app-nav__signout-button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
}

.app-nav__signout-button:hover,
.app-nav__signout-button:focus-visible {
    opacity: 1;
}

/* Neither the sign-out nor the section nav belongs on a pinned copy. */
@media print {
    .app-subnav,
    .app-nav__signout {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Second-level navigation inside the reference area.

   House chips, laid out. Deliberately not a second tab bar: two rows of tabs
   read as two applications, and the primary bar has already said where you
   are. These only say which page within it.
   --------------------------------------------------------------------------- */

.reference-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.reference-nav .chip-toggle {
    text-decoration: none;
    font-size: 13px;
    padding: 5px 12px;
}

/* Neither the section chips nor the skip link belongs on a pinned copy. */
@media print {
    .reference-nav,
    .skip-link {
        display: none;
    }
}