/*
  Manutenzioni - screens specific to this app.

  The shared vocabulary (tokens, shell, glass cards, badges, status lamps, buttons) comes from the
  Quindi design system, loaded before this file.

  Two organising ideas own this file. The board is "il mio turno": the shift laid on a rail whose
  gutter carries the clock and the verdict - a big time with IN RITARDO or OGGI under it - and
  whose one fixed point, ADESSO, carries the job in progress as a hero card. And an open job is a
  worksite: a live elapsed-time face, the evidence rows, and a dock with photo, voice note and
  close always under the thumb.
*/

:root {
    /* One scale for messages, result cards, widgets and their controls. */
    --chat-text-size: 1rem;
    --chat-meta-size: .8125rem;
    --chat-line-height: 1.5;
    --chat-radius: .75rem;
    --chat-gap: .5rem;
    --chat-control-size: 2.25rem;
    --chat-touch-size: 2.75rem;
    --chat-info: #9fd7ff;
    --chat-danger: #ff9d8f;

    /* The device's safe areas, readable (and overridable in QA) as ordinary variables.
       On iPhones the top inset is the notch or the Dynamic Island: 59px on island models,
       around 47px on notched ones, 0 in a browser tab. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    /* Height of the on-screen keyboard, written by js/keyboard-inset.js from
       visualViewport: iOS never shrinks dvh when the keyboard opens. */
    --keyboard-inset: 0px;

    /* Status colours, mapped from the platform's own palette so the two products agree. */
    --st-pending: #5baeff;
    --st-scheduled: var(--text-muted);
    --st-open: var(--primary);
    --st-closed: #7f8794;
    --st-overdue: var(--danger);

    /* Small instrument labels still need to remain readable in a noisy, low-contrast workshop. */
    --text-muted: rgba(255, 255, 255, 0.5);

    /* Timeline geometry: the gutter holds "17:50 / IN RITARDO", the rail runs just right of it. */
    --gutter: 4rem;
    --rail-x: 4.6rem;
    --card-x: 5.5rem;
}

@media (pointer: coarse) {
    :root { --chat-control-size: var(--chat-touch-size); }
}

/* "Testo più grande" from the device sheet: every size in this app is rem-based, so one
   root bump scales type AND touch targets together - gloves and shop-floor light are real.
   Keep this a rule of its own: folding it into :root once orphaned every token above it
   behind the switch. */
html.text-lg {
    font-size: 112.5%;
}

/* The Blazor host div sits between body and .shell: without an explicit height the
   percentage chain from html/body dies here, .shell sizes to its content and nothing
   inside can ever scroll — body just clips the overflow. */
#app {
    height: 100%;
}

/* With viewport-fit=cover, installed iOS web apps resolve percentage heights to the
   viewport minus the top safe area. Legacy vh is the one WebKit unit that still includes
   that inset in standalone mode, so keep the browser-tab strategy above and override the
   complete height chain only for the installed app. */
@media (display-mode: standalone) {
    html,
    body,
    #app,
    .shell {
        height: 100vh;
    }
}

/* The CMMS is an installed work surface, not a reading column. Its routed page, scrolling
   region and docked bars paint the complete shell; narrower measures belong inside them. */
.shell > .measure {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Every top bar lives inside its page, so auto-placement would seat each routed surface in
   the shell's first row and size it to content — /admin, the one page with no bar at all,
   would clip a tall notice there. Pin the surfaces to the rows they own. */
.shell > main,
.shell > .dashboard {
    grid-row: 2;
}

/* The plan form's bar is a real grid row, not a floating dock: it owns the bottom slot. */
.shell > .actionbar {
    grid-row: 3;
}

/* ---------------------------------------------------------------- board */

.board {
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 4.6rem;
}

/* "Il mio turno": the page states its subject, its two vital signs, and the day. */
.shift {
    padding: 1.15rem 0 0.5rem;
}

.shift__titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.shift__titlerow h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.shift__titlerow h1:focus {
    outline: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:active {
    background: var(--surface);
}

.chip.is-active {
    color: var(--primary);
    border-color: rgba(28, 214, 133, 0.34);
    background: var(--accent-soft);
}

.shift__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.shift__stats {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.shift__stat {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.42rem;
    padding: 0 0.65rem;
    color: var(--text-secondary);
}

.shift__stat + .shift__stat {
    border-left: 1px solid var(--border);
}

.shift__stat b {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-primary);
}

.shift__stat small {
    grid-column: 2;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-muted);
}

.shift__stat.is-quiet {
    opacity: 0.55;
    font-weight: 400;
}

.shift__dot {
    grid-row: 1 / span 2;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.shift__dot--live {
    background: var(--primary);
    box-shadow: 0 0 8px rgba(28, 214, 133, 0.6);
}

/* The amber of the paused face, carried up to the shift's vital signs. */
.shift__dot--paused {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(229, 179, 100, 0.55);
}

.shift__dot--late {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(224, 81, 81, 0.5);
}

.shift__date {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: var(--primary);
}

.shift__date span {
    display: grid;
    min-width: 0;
}

.shift__date b {
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.shift__date small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- flow: the shift timeline */

.flow {
    position: relative;
    margin-top: 0.9rem;
}

/* The rail itself, running behind every list, divider and the now block. */
.flow::before {
    content: "";
    position: absolute;
    left: var(--rail-x);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.13) 4%,
        rgba(255, 255, 255, 0.13) 96%,
        transparent);
}

.flow__list {
    position: relative;
    display: grid;
    gap: 0.85rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.flow__item {
    position: relative;
    /* Grid items default to min-width auto: without this, a long no-wrap machine name
       widens the row past the viewport and clips instead of ellipsizing. */
    min-width: 0;
    padding-left: var(--card-x);
}

/* The gutter carries the clock and the verdict, so state reads before any card word does. */
.flow__when {
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: var(--gutter);
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    padding-right: 0.45rem;
    text-align: right;
}

.flow__when b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.flow__when i {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--text-muted);
}

.flow__item--late .flow__when b,
.flow__item--late .flow__when i {
    color: var(--danger);
}

/* A late job from an earlier day stacks its date over the clock: a step smaller than the clock,
   a step larger than the verdict, and closer to the clock than to the verdict below, so
   "28/8 08:00" reads as one moment without outweighing the time itself. */
.flow__when .flow__date,
.turnline .flow__when .flow__date,
.turnline__origin-when .turnline__origin-date {
    margin-bottom: -0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.flow__item--sched .flow__when i,
.flow__item--pending .flow__when i {
    color: var(--st-pending);
}

.flow__node {
    position: absolute;
    left: calc(var(--rail-x) - 0.24rem);
    top: 0.72rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--bg-1);
    border: 1.5px solid var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flow__item--sched .flow__node,
.flow__item--pending .flow__node {
    background: var(--st-pending);
    border-color: var(--st-pending);
}

.flow__item--late .flow__node {
    left: calc(var(--rail-x) - 0.42rem);
    top: 0.55rem;
    width: 0.98rem;
    height: 0.98rem;
    background: rgba(224, 81, 81, 0.15);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 10px rgba(224, 81, 81, 0.45);
}

.flow__item--closed .flow__node {
    background: var(--st-closed);
    border-color: var(--st-closed);
}

.flow__card {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.flow__card:active {
    border-color: rgba(28, 214, 133, 0.32);
}

.flow__item--late .flow__card {
    border-color: rgba(224, 81, 81, 0.38);
    background: rgba(224, 81, 81, 0.05);
}

.flow__item--closed {
    opacity: 0.5;
}

.flow__machine {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.flow__headline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.2rem;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
}

.flow__sub {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.flow__tags {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.flow__op {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.flow__section {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.3rem 0 0.7rem;
    padding-left: var(--card-x);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.flow__section span {
    color: var(--text-muted);
    font-weight: 400;
}

.flow__section--next { color: var(--st-pending); }
.flow__section--alta { color: var(--danger); }
.flow__section--media { color: #9fd7ff; }
.flow__section--bassa { color: var(--primary); }

.flow__group {
    position: relative;
}

/* Inside a per-machine group the header already names the machine once. */
.flow__group--machine .flow__machine {
    display: none;
}

.flow__rollup {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0 0.6rem var(--card-x);
    background: none;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-align: left;
}

.flow__rollup em {
    font-style: normal;
    color: var(--primary);
}

.flow__rollup--late em {
    color: var(--danger);
}

.flow__rollup svg {
    transition: transform 0.2s ease;
}

.flow__ellipsis {
    margin: -0.3rem 0 0.7rem;
    padding-left: var(--card-x);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- the now block + hero */

.now {
    position: relative;
    margin: 1.4rem 0;
    padding-left: var(--card-x);
    display: grid;
    gap: 0.85rem;
}

.now__when {
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: var(--gutter);
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    padding-right: 0.45rem;
    text-align: right;
}

.now__when i {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--primary);
}

.now__when b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
}

/* The marker: a white core in widening mint rings, the board's single fixed point. */
.now__node {
    position: absolute;
    left: calc(var(--rail-x) - 0.5rem);
    top: 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 7px rgba(28, 214, 133, 0.12), 0 0 0 14px rgba(28, 214, 133, 0.05);
    animation: now-ping 2.6s ease-out infinite;
    z-index: 1;
}

.now__node i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #fff;
}

@keyframes now-ping {
    0% { box-shadow: 0 0 0 7px rgba(28, 214, 133, 0.12), 0 0 0 14px rgba(28, 214, 133, 0.05); }
    60% { box-shadow: 0 0 0 10px rgba(28, 214, 133, 0.1), 0 0 0 20px rgba(28, 214, 133, 0.02); }
    100% { box-shadow: 0 0 0 7px rgba(28, 214, 133, 0.12), 0 0 0 14px rgba(28, 214, 133, 0.05); }
}

.now__idle {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.now__idle small {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.focus-board {
    display: grid;
    gap: 1.35rem;
    margin-top: 0.9rem;
}

.focus-now {
    display: grid;
    gap: 0.65rem;
    scroll-margin-block: 5rem;
}

.focus-now__heading,
.focus-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.focus-now__heading h2,
.focus-section__heading h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.focus-now__heading h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
}

.focus-now__heading h2 i,
.hero__state i {
    flex: none;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(28, 214, 133, 0.72);
}

.focus-now__heading time {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.focus-now__idle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(28, 214, 133, 0.3);
    border-radius: 16px;
    background: rgba(28, 214, 133, 0.035);
}

.focus-now__idleicon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--primary);
    font-weight: 750;
}

.focus-now__idle > span:last-child {
    display: grid;
    gap: 0.12rem;
}

.focus-now__idle b {
    font-size: 0.92rem;
}

.focus-now__idle small {
    color: var(--text-muted);
}

.hero,
.hero__card {
    position: relative;
}

/* The active mission is the only glowing surface: everything below is deliberately quieter. */
.hero__card {
    overflow: hidden;
    padding: 1rem 1rem 1rem 1.2rem;
    border: 1px solid rgba(28, 214, 133, 0.28);
    border-radius: 18px;
    background:
        radial-gradient(30rem 12rem at 30% 0%, rgba(28, 214, 133, 0.1), transparent 70%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    box-shadow: 0 18px 42px -24px rgba(28, 214, 133, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero__card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: linear-gradient(180deg, #61ee9e, var(--primary));
    box-shadow: 0 0 16px rgba(28, 214, 133, 0.7);
}

.hero__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hero__state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.hero__machine {
    display: block;
    margin-top: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.055em;
    color: var(--text-secondary);
}

.hero__headline {
    margin: 0.35rem 0 0;
    font-size: clamp(1.18rem, 5vw, 1.45rem);
    font-weight: 750;
    line-height: 1.18;
    letter-spacing: -0.018em;
    overflow-wrap: anywhere;
}

.hero__op {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.hero__avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.1);
    border: 1px solid rgba(28, 214, 133, 0.26);
    color: var(--primary);
}

.hero__opname {
    display: grid;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero__opname small {
    font-size: 0.67rem;
    font-weight: 400;
    color: var(--text-muted);
}

.hero__rail {
    margin-top: 0.95rem;
    padding: 0.9rem 0.1rem 0.8rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* A paused job keeps the hero's place but loses the glow: amber, not mint, until it resumes.
   The turnline restyles the since-line later in the file, so the paused rule names it too. */
.hero--paused .hero__state,
.hero--paused .hero__since,
.turnline .hero--paused .hero__since {
    color: var(--warning);
}

.hero--paused .hero__state i {
    background: var(--warning);
    box-shadow: none;
    animation: none;
}

.hero--paused .hero__card::before {
    background: linear-gradient(180deg, #f0c987, var(--warning));
    box-shadow: 0 0 16px rgba(229, 179, 100, 0.5);
}

.hero__since {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--primary);
}

.hero__open {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
    min-height: 3.25rem;
    padding: 0 1rem;
    border-radius: 13px;
    background: linear-gradient(165deg, #63e491, var(--primary) 52%, var(--primary-dark));
    color: #05130c;
    font-size: 0.96rem;
    font-weight: 780;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 28px -12px rgba(28, 214, 133, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.1s ease;
}

.hero__open:active {
    transform: scale(0.985);
}

.focus-section {
    display: grid;
    gap: 0.65rem;
}

.focus-section__heading h2 {
    color: #77c4ff;
}

.focus-section__heading > span,
.focus-section__heading button {
    flex: none;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: #8accff;
    font-size: 0.74rem;
    line-height: 2.25rem;
}

.focus-section__heading button {
    min-height: 2.75rem;
    line-height: normal;
}

.queue {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
    list-style: none;
    box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.85);
}

.queue__item + .queue__item {
    border-top: 1px solid var(--border);
}

.queue__link {
    display: grid;
    grid-template-columns: 0.24rem minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 7.15rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.queue__link:active {
    background: rgba(255, 255, 255, 0.035);
}

.queue__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

@media (hover: hover) {
    .queue__link:hover {
        background: rgba(255, 255, 255, 0.045);
    }
}

.queue__rail {
    background: var(--primary);
    box-shadow: 0 0 12px rgba(28, 214, 133, 0.28);
}

.queue__item--late .queue__rail,
.queue__item--high .queue__rail {
    background: #ff6262;
    box-shadow: 0 0 12px rgba(224, 81, 81, 0.34);
}

.queue__item--medium .queue__rail {
    background: var(--warning);
}

.queue__item--pending .queue__rail {
    background: var(--st-pending);
}

.queue__item--closed .queue__rail {
    background: var(--st-closed);
    box-shadow: none;
}

.queue__body {
    display: grid;
    align-content: center;
    gap: 0.48rem;
    min-width: 0;
    padding: 0.85rem 0.7rem 0.85rem 0.9rem;
}

.queue__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.queue__machine {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.queue__kind {
    flex: none;
    color: var(--text-muted);
}

.queue__meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.045em;
    color: var(--text-muted);
}

.queue__technical {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.72;
}

.queue__headline {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.96rem;
    font-weight: 620;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.queue__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.queue__when {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.queue__state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue__state-dot {
    flex: none;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
}

.queue__item--late .queue__state,
.queue__item--late .queue__when {
    color: #ff7777;
}

.queue__item--open .queue__state,
.queue__item--open .queue__when {
    color: var(--primary);
}

.queue__item--closed {
    opacity: 0.72;
}

.queue__chevron {
    align-self: center;
    margin-right: 0.8rem;
    color: var(--text-muted);
}

.queue-note {
    margin: 0;
    padding: 0.1rem 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.focus-section--rollup {
    gap: 0.5rem;
}

.board-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 3.5rem;
    border: 1px solid rgba(28, 214, 133, 0.62);
    border-radius: 14px;
    background: rgba(28, 214, 133, 0.025);
    color: var(--primary);
    font-size: 0.96rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: background 0.15s ease, transform 0.1s ease;
}

.board-new span {
    display: grid;
    place-items: center;
}

.board-new:active {
    transform: scale(0.99);
    background: rgba(28, 214, 133, 0.08);
}

.focus-rollup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
}

.focus-rollup > span {
    display: grid;
    gap: 0.08rem;
}

.focus-rollup b {
    font-size: 0.82rem;
    font-weight: 650;
}

.focus-rollup small {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.focus-rollup svg {
    flex: none;
    color: var(--primary);
    transition: transform 0.2s ease;
}

@media (max-width: 23rem) {
    .shift__overview {
        grid-template-columns: 1fr;
    }

    .shift__stats {
        border-top: 1px solid var(--border);
        padding-top: 0.65rem;
    }

    .shift__stat {
        flex: 1;
        padding-left: 0;
    }

    .shift__stat + .shift__stat {
        padding-left: 0.75rem;
    }

    .queue__foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .queue__state {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Floating "back to now" chip, shown only when the now block has scrolled away. */
.tonow {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid rgba(28, 214, 133, 0.4);
    /* Fallback first: engines without color-mix (iOS ≤ 16.1) get --bg-0 at the same weight. */
    background: rgba(12, 16, 20, 0.82);
    background: color-mix(in srgb, var(--bg-0) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tonow__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 1.6s infinite;
}

/* ---------------------------------------------------------------- detail: the worksite */

.detail {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
    padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* Room for the floating dock: its glass panel must never cover the last row. */
.detail--working {
    padding-bottom: calc(7.6rem + var(--safe-bottom));
}

.job {
    position: relative;
    padding: 1.25rem 4.4rem 1.05rem 0;
}

.job__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.job__machine {
    margin: 0.4rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.job__headline {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.job__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.job__opchip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.7rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}

/* The status lamp keeps the header's right edge, like the machine's own panel light. */
.job__lamp {
    position: absolute;
    right: 0;
    top: 1.6rem;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    width: 4rem;
    text-align: center;
}

.job__lamp i {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--text-muted);
}

.job__lamp span {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.job__lamp--live i {
    background: var(--primary);
    box-shadow: 0 0 12px rgba(28, 214, 133, 0.7);
    animation: pulse 1.8s infinite;
}

.job__lamp--live span { color: var(--primary); }

.job__lamp--ready i {
    background: var(--st-closed);
}

.stack {
    display: grid;
    gap: 0.85rem;
}

/* Priority reads as urgency, so it borrows the platform's own colour coding. */
.badge--alta   { background: rgba(224, 81, 81, 0.16);  color: var(--danger);  border-color: rgba(224, 81, 81, 0.34); }
.badge--media  { background: rgba(91, 174, 255, 0.14); color: #9fd7ff;        border-color: rgba(91, 174, 255, 0.3); }
.badge--bassa  { background: rgba(28, 214, 133, 0.14); color: var(--primary); border-color: rgba(28, 214, 133, 0.3); }

/* The assistant, one tap from anywhere in the detail. Azure, not mint: it answers,
   it does not act - the same blue the UI already speaks for informational accents. */
.topbar__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 174, 255, 0.34);
    background: rgba(91, 174, 255, 0.13);
    color: #9fd7ff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.topbar__tool:focus-visible {
    outline-color: rgba(91, 174, 255, 0.55);
}

/* The elapsed-time face: the one instrument of a job in progress. */
.tempo {
    padding: 0.95rem 1rem 0.75rem;
    border: 1px solid rgba(28, 214, 133, 0.25);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.tempo__summary {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    min-height: 4.25rem;
}

/* The stopwatch's own button. Pause is a plain rounded square in the face's mint; once paused
   it turns amber and shows play, and the whole face follows: the clock stands still in amber. */
.tempo__toggle {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.15rem;
    width: 3.5rem;
    min-height: 3.5rem;
    padding: 0.3rem 0;
    border: 1px solid rgba(28, 214, 133, 0.35);
    border-radius: 14px;
    background: rgba(28, 214, 133, 0.08);
    color: var(--primary);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tempo__toggle small {
    font-size: 0.6rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tempo__toggle:disabled {
    opacity: 0.45;
}

.tempo__toggle.is-paused {
    border-color: rgba(229, 179, 100, 0.45);
    background: rgba(229, 179, 100, 0.12);
    color: var(--warning);
}

.tempo.is-paused {
    border-color: rgba(229, 179, 100, 0.35);
}

.tempo.is-paused .tempo__icon {
    border-color: rgba(229, 179, 100, 0.2);
    background: rgba(229, 179, 100, 0.1);
    color: var(--warning);
    box-shadow: 0 0 1.5rem rgba(229, 179, 100, 0.12);
}

.tempo.is-paused .tempo__label,
.tempo.is-paused .tempo__clock {
    color: var(--warning);
}

/* The chapter the work is in, right under the clock: number in ink, name in prose. */
.tempo__phase {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.tempo__phase b {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Phase row: the current chapter on the left, the button for the next one on the right. */
.tempo__phaserow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
}

.tempo__phaserow .tempo__phase {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.tempo__phase--none {
    color: var(--text-muted);
}

.tempo__phasebtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0 0.9rem 0 0.7rem;
    border: 1px solid rgba(28, 214, 133, 0.42);
    border-radius: 999px;
    background: rgba(28, 214, 133, 0.1);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.tempo__phasebtn:disabled {
    opacity: 0.45;
}

/* The phases so far, one line each: number in a mint disc, name, span and length. */
.phases {
    display: grid;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.phases__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.phases__n {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.phases__copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.phases__copy b {
    font-size: 0.85rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.phases__copy small {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.phases__item.is-running {
    border-color: rgba(28, 214, 133, 0.35);
    background: rgba(28, 214, 133, 0.07);
}

.phases__item.is-running .phases__n {
    background: rgba(28, 214, 133, 0.16);
    color: var(--primary);
}

.phases__item.is-running .phases__copy small {
    color: var(--primary);
}

.tempo.is-paused .tempo__phasebtn {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
}

.tempo__note {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
}

@media (max-width: 22.5rem) {
    .tempo__summary {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
    }

    .tempo__toggle {
        width: 3rem;
        min-height: 3rem;
    }
}

.tempo__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(28, 214, 133, 0.12);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--primary);
    box-shadow: 0 0 1.5rem rgba(28, 214, 133, 0.14);
}

.tempo__copy {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.tempo__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.tempo__clock {
    display: block;
    min-width: 0;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-primary);
}

.tempo__clock b {
    font-weight: 600;
    color: inherit;
}

.tempo__clock.is-over {
    color: var(--warning);
}

.tempo .rail {
    position: relative;
    grid-template-columns: 20% 60% 20%;
    margin-top: 0.55rem;
}

.tempo .rail::before,
.tempo .rail::after {
    content: "";
    position: absolute;
    top: 0.62rem;
    left: 10%;
    height: 1.5px;
}

.tempo .rail::before {
    right: 10%;
    background: var(--border);
}

.tempo .rail::after {
    right: 50%;
    background: var(--primary);
}

.tempo .rail__stop:not(:first-child)::after {
    display: none;
}

.tempo .rail__label {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.tempo .rail__time {
    white-space: nowrap;
}

@media (max-width: 22.5rem) {
    .tempo {
        padding: 0.85rem 0.75rem 1rem;
    }

    .tempo__summary {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 0.65rem;
    }

    .tempo__icon {
        width: 3rem;
        height: 3rem;
    }

    .tempo__icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .tempo .rail__label {
        font-size: 0.62rem;
    }

    .tempo .rail__time {
        font-size: 0.67rem;
    }
}

/* Tips: the assistant's azure, one row under the problem it will be asked about. */
.tips {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(91, 174, 255, 0.28);
    border-radius: 16px;
    background: rgba(91, 174, 255, 0.07);
    color: inherit;
    text-decoration: none;
}

.tips:active {
    background: rgba(91, 174, 255, 0.14);
}

.tips__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(91, 174, 255, 0.14);
    color: #9fd7ff;
}

.tips__body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.tips__body b {
    font-size: 0.92rem;
    font-weight: 700;
    color: #9fd7ff;
}

.tips__body span {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.tips .row__chevron {
    color: #9fd7ff;
}

/* The one big action of the moment: start, or plan. Same lit mint as the fab. */
.big-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.4rem;
    border-radius: 14px;
    background: linear-gradient(165deg, #3aeda4, var(--primary) 48%, var(--primary-dark));
    color: #05130c;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    box-shadow:
        0 14px 30px -10px rgba(28, 214, 133, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.1s ease;
}

.big-cta:active {
    transform: scale(0.98);
}

.big-cta--quiet {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

/* Row cards: one line of truth each, and a chevron that promises the rest. */
.row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.row:active {
    border-color: rgba(28, 214, 133, 0.32);
}

.row--problem,
.row--problem:active {
    border-color: var(--border);
}

.row--problem:focus-visible {
    outline-color: var(--border-strong);
}

.row__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
}

.row__icon--warn {
    background: rgba(229, 179, 100, 0.12);
    color: var(--warning);
}

.row__icon--mint {
    background: var(--accent-soft);
    color: var(--primary);
}

.row__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.row__label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.row__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.row__chevron {
    flex: none;
    color: var(--text-muted);
}

/* Documents are deliberately shown before the start action: the technician can read the
   instructions without downloading every attachment or leaving the installed PWA. */
.job-docs {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(91, 174, 255, 0.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(91, 174, 255, 0.1), transparent 46%),
        var(--surface);
}

/* The machine's own bookshelf reads mint - the brand hue - while the intervention's
   attachments keep their blue: two shelves, told apart at a glance. */
.job-docs--machine {
    border-color: rgba(28, 214, 133, 0.22);
    background:
        radial-gradient(circle at 100% 0, rgba(28, 214, 133, 0.09), transparent 46%),
        var(--surface);
}

.job-docs--machine .job-docs__count {
    border-color: rgba(28, 214, 133, 0.3);
    background: rgba(28, 214, 133, 0.1);
    color: var(--primary);
}

.job-docs--machine .job-doc__icon--pdf {
    border-color: rgba(28, 214, 133, 0.28);
    background: rgba(28, 214, 133, 0.09);
    color: var(--primary);
}

.job-docs__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.job-docs__heading > div {
    min-width: 0;
}

.job-docs__heading h2 {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    line-height: 1.25;
}

.job-docs__count {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(91, 174, 255, 0.28);
    border-radius: 999px;
    background: rgba(91, 174, 255, 0.1);
    color: #9fd7ff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.job-docs__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-docs__more {
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}

.job-docs__more summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
    border-radius: 999px;
    color: #9fd7ff;
    font-size: 0.76rem;
    font-weight: 700;
}

.job-docs__more summary::-webkit-details-marker {
    display: none;
}

.job-docs__more[open] summary {
    margin-bottom: 0.5rem;
}

.job-doc {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 13px;
    /* Fallback first: engines without color-mix (iOS ≤ 16.1) get --surface-2 pre-weighted. */
    background: rgba(255, 255, 255, 0.05);
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.job-doc:active {
    transform: scale(0.985);
    border-color: rgba(91, 174, 255, 0.36);
}

.job-doc__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
}

.job-doc__icon--pdf {
    background: rgba(224, 81, 81, 0.12);
    color: #ff7c7c;
}

.job-doc__icon--image {
    background: rgba(91, 174, 255, 0.12);
    color: #9fd7ff;
}

.job-doc__body {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.job-doc__body strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.job-doc__body small {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-muted);
}

.job-doc__open {
    color: var(--text-muted);
}

.job-docs__error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem;
    border-radius: 12px;
    background: rgba(224, 81, 81, 0.09);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.job-docs__error button {
    flex: none;
    min-height: 2.75rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(224, 81, 81, 0.32);
    border-radius: 999px;
    color: var(--danger);
}

/* Full-page viewer: one PDF page is rendered at a time, keeping memory bounded on iPhone and
   avoiding the browser-native thumbnail rail. */
.document-page {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* Title and actions share a row while the name has room; on a phone the buttons drop to a
   second line and the file name, the one thing that identifies the document, wraps instead
   of losing its end. */
.document-page__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.document-page__title {
    flex: 1 1 14rem;
    min-width: 0;
}

.document-page__title > span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fd7ff;
}

.document-page__title h1 {
    max-width: 100%;
    margin: 0.2rem 0 0;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.document-page__external {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
}

/* Immersive reading: no bar, no heading, the document alone from edge to edge, with one way out. */
.document-page--full {
    position: fixed;
    inset: 0;
    z-index: 55;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    background: var(--bg-0);
}

.document-page--full .document-page__heading {
    display: none;
}

.document-page--full .document-page__canvas {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.document-page__exit {
    position: absolute;
    top: calc(0.6rem + var(--safe-top));
    right: calc(0.6rem + var(--safe-right));
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(5, 8, 11, 0.72);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.document-page__fullscreen[aria-pressed="true"] {
    border-color: rgba(28, 214, 133, 0.45);
    color: var(--primary);
}

.document-page__canvas {
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #f4f5f7;
    /* Light surface in a dark document: without this iOS paints a light overlay
       scrollbar that vanishes on the near-white page. */
    color-scheme: light;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.document-page__canvas--image {
    overflow: auto;
    display: grid;
    place-items: center;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.document-page__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pdf-page-viewer {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    color: var(--text-primary);
    background: #dfe4e8;
    /* Light surface in a dark document: keep iOS overlay scrollbars visible. */
    color-scheme: light;
}

.pdf-page-viewer__stage {
    position: relative;
    min-height: 0;
    overflow: auto;
    display: grid;
    place-items: start;
    padding: 1rem;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.pdf-page-viewer__surface {
    --scale-factor: 1;
    --user-unit: 1;
    --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
    position: relative;
    isolation: isolate;
    flex: none;
    margin-inline: auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0.8rem 2.4rem rgba(12, 16, 20, 0.24);
    overflow: hidden;
}

.pdf-page-viewer__page {
    display: block;
    max-width: none;
    background: #fff;
}

/* PDF.js text-layer rules, scoped to the single-page viewer. PDF.js is Apache-2.0. */
.pdf-page-viewer__text-layer {
    --min-font-size: 1;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: clip;
    color-scheme: only light;
    text-align: initial;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    transform-origin: 0 0;
    caret-color: CanvasText;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
}

.pdf-page-viewer__text-layer :is(span, br) {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
    -webkit-user-select: text;
    user-select: text;
}

.pdf-page-viewer__text-layer > :not(.markedContent),
.pdf-page-viewer__text-layer .markedContent span:not(.markedContent) {
    --font-height: 0;
    --scale-x: 1;
    --rotate: 0deg;
    z-index: 1;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.pdf-page-viewer__text-layer .markedContent {
    display: contents;
}

.pdf-page-viewer__text-layer span[role="img"] {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.pdf-page-viewer__text-layer ::selection {
    color: transparent;
    background: rgba(31, 111, 235, 0.28);
}

.pdf-page-viewer__text-layer br::selection {
    background: transparent;
}

.pdf-page-viewer__text-layer .endOfContent {
    position: absolute;
    inset: 100% 0 0;
    z-index: 0;
    display: block;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.pdf-page-viewer__annotation-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.pdf-page-viewer__annotation-link {
    position: absolute;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: transparent;
    pointer-events: auto;
}

.pdf-page-viewer__annotation-link:focus-visible {
    outline: 2px solid #16a865;
    outline-offset: 1px;
    background: rgba(22, 168, 101, 0.12);
}

.pdf-page-viewer__message {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.5rem;
    color: #344351;
    text-align: center;
    background: rgba(244, 245, 247, 0.94);
}

.pdf-page-viewer__message--error strong {
    color: #18242e;
    font-size: 0.95rem;
}

.pdf-page-viewer__message--error span {
    max-width: 24rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.pdf-page-viewer__message button {
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: #14222d;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
}

.pdf-page-viewer__spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(20, 34, 45, 0.18);
    border-top-color: #16a865;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.pdf-page-viewer__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #111a22;
    box-shadow: 0 -0.6rem 1.6rem rgba(12, 16, 20, 0.16);
}

.pdf-page-viewer__controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pdf-page-viewer__button,
.pdf-page-viewer__fit {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-primary);
    font-weight: 700;
}

.pdf-page-viewer__button {
    font-size: 1.15rem;
}

.pdf-page-viewer__fit {
    padding: 0 0.8rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.pdf-page-viewer__button:disabled,
.pdf-page-viewer__fit:disabled {
    cursor: default;
    opacity: 0.32;
}

.pdf-page-viewer__counter,
.pdf-page-viewer__zoom {
    min-width: 3.8rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 27rem) {
    .pdf-page-viewer__toolbar {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pdf-page-viewer__controls--zoom {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------- the working dock */

.dock {
    position: fixed;
    left: max(1rem, var(--safe-left));
    right: max(1rem, var(--safe-right));
    bottom: max(0.7rem, var(--safe-bottom));
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: stretch;
    width: auto;
    max-width: 34rem;
    margin-inline: auto;
    padding: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 1.4rem;
    background: rgba(10, 16, 21, 0.9);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* The routed page measure is full-bleed; the dock is the deliberate exception and
   must keep its fixed safe-area insets instead of inheriting width: 100%. */
.shell > .dock.measure {
    width: auto;
}

.dock__tile {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    min-height: 4.2rem;
    padding: 0.65rem 0.45rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(28, 214, 133, 0.45);
    background: rgba(28, 214, 133, 0.06);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.16s ease, background 0.16s ease;
}

.dock__tile:active {
    transform: scale(0.96);
}

.dock__tile input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dock__tile:focus-visible,
.dock__tile:focus-within,
.dock__note-choice:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dock__tileicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    color: var(--primary);
}

.dock__icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    -webkit-mask: var(--dock-icon) center / contain no-repeat;
    mask: var(--dock-icon) center / contain no-repeat;
}

.dock__icon--camera { --dock-icon: url("../icons/camera.svg"); }
.dock__icon--plus { --dock-icon: url("../icons/plus.svg"); }
.dock__icon--chevron-up { --dock-icon: url("../icons/chevron-up.svg"); }
.dock__icon--letter-t { --dock-icon: url("../icons/letter-t.svg"); }
.dock__icon--microphone { --dock-icon: url("../icons/microphone.svg"); }
.dock__icon--stop { --dock-icon: url("../icons/player-stop.svg"); }
.dock__icon--clipboard-check { --dock-icon: url("../icons/clipboard-check.svg"); }

.dock__note-choice .dock__icon {
    width: 1.8rem;
    height: 1.8rem;
}

.dock__copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.dock__tile b,
.dock__note-choice b {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.15;
}

.dock__tile small,
.dock__note-choice small {
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--text-muted);
}

.dock__note-slot {
    position: relative;
    min-width: 0;
}

.dock__tile--note {
    height: 100%;
    border-color: rgba(91, 174, 255, 0.52);
    background: rgba(91, 174, 255, 0.09);
}

.dock__tile--note .dock__tileicon {
    color: var(--st-pending);
}

.dock__tile--recording {
    border-color: rgba(224, 81, 81, 0.58);
    background: rgba(224, 81, 81, 0.1);
}

.dock__tile--recording .dock__tileicon,
.dock__tile--recording .dock__timer {
    color: var(--danger);
}

.dock__tile--close {
    border-color: rgba(255, 93, 86, 0.58);
    background: rgba(224, 81, 81, 0.08);
}

.dock__tile--close .dock__tileicon {
    color: #ff5d56;
}

.dock__dismiss {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(2, 6, 9, 0.22);
}

.dock__note-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1.65rem);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: min(20.5rem, calc(100vw - 1.5rem));
    padding: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 1.35rem;
    background: rgba(13, 19, 24, 0.97);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: note-menu-in 0.16s ease-out;
}

.dock__note-menu::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.48rem;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    background: #0d1318;
    transform: translateX(-50%) rotate(45deg);
}

@keyframes note-menu-in {
    from { opacity: 0; transform: translateX(-50%) translateY(0.45rem) scale(0.98); }
    to { opacity: 1; transform: translateX(-50%); }
}

.dock__note-choice {
    display: flex;
    min-width: 0;
    min-height: 7rem;
    padding: 0.85rem 0.6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid;
    border-radius: 1rem;
    color: var(--text-primary);
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.16s ease;
}

.dock__note-choice:active {
    transform: scale(0.97);
}

.dock__note-choice--text {
    border-color: rgba(91, 174, 255, 0.48);
    background: rgba(91, 174, 255, 0.1);
}

.dock__note-choice--text .dock__note-choice-icon {
    color: var(--st-pending);
}

.dock__note-choice--voice {
    border-color: rgba(28, 214, 133, 0.46);
    background: rgba(28, 214, 133, 0.09);
}

.dock__note-choice--voice .dock__note-choice-icon {
    color: var(--primary);
}

.dock__note-choice-icon {
    display: grid;
    min-height: 2rem;
    place-items: center;
}

.dock__timer {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 26rem) {
    .dock {
        left: max(0.5rem, var(--safe-left));
        right: max(0.5rem, var(--safe-right));
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.625rem;
    }

    .dock__tile {
        flex-direction: column;
        gap: 0.25rem;
        min-height: 4.5rem;
        padding: 0.55rem 0.35rem;
        text-align: center;
    }

    .dock__copy {
        gap: 0.08rem;
        justify-items: center;
    }

    .dock__tile b {
        font-size: 0.78rem;
    }

    .dock__tile small {
        font-size: 0.6rem;
    }
}

@media (max-width: 22.5rem) {
    .dock {
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .dock__tile {
        min-height: 4.25rem;
        padding-inline: 0.2rem;
    }

    .dock__tile:not(.dock__tile--recording) .dock__copy small,
    .dock__tile--recording .dock__word {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .dock__note-menu {
        width: calc(100vw - 1rem);
        gap: 0.5rem;
        padding: 0.625rem;
    }

    .dock__note-choice {
        min-height: 6.5rem;
        padding-inline: 0.4rem;
    }
}

/* The third choice: a phase, drawn in the assistant-free mint of the job itself. */
.dock__note-choice--phase .dock__note-choice-icon {
    color: var(--primary);
}

/* Phase sheet: one tap per usual phase, or a typed name. */
.phase__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.2rem 0 0.9rem;
}

/* The small caption over a row of picks, in the same voice as a field label. */
.picks__label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.picks__label + .phase__picks {
    margin-top: 0.45rem;
}

.phase__pick {
    min-height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.phase__pick.is-active {
    border-color: rgba(28, 214, 133, 0.5);
    background: rgba(28, 214, 133, 0.12);
    color: var(--primary);
}

/* Photo intake: the preview sits above the note, a thumbnail never the full photo. */
.photo-intake__preview {
    position: relative;
    display: grid;
    place-items: center;
    height: 11rem;
    margin-bottom: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.photo-intake__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-intake__blank {
    color: var(--text-muted);
}

.photo-intake__more {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(5, 8, 11, 0.7);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---------------------------------------------------------------- progress rail */

.rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    margin: 0;
}

.rail__stop {
    position: relative;
    padding-top: 1.35rem;
    text-align: center;
}

.rail__stop::before {
    content: "";
    position: absolute;
    top: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    z-index: 1;
}

/* The connecting track is drawn by each stop except the first, so no extra elements are needed. */
.rail__stop:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0.62rem;
    right: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--border);
}

.rail__stop.is-done::before {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(28, 214, 133, 0.5);
}

.rail__stop.is-done:not(:first-child)::after {
    background: var(--primary);
}

.rail__stop.is-current:not(:first-child)::after {
    background: var(--primary);
}

.rail__stop.is-current::before {
    background: var(--primary);
    border-color: var(--primary);
    animation: pulse 1.6s infinite;
}

.rail__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rail__time {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.rail__stop.is-done .rail__time,
.rail__stop.is-current .rail__time {
    color: var(--text-primary);
}

.prose {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.prose--muted {
    color: var(--text-muted);
}

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
}

.facts__key {
    align-self: center;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.facts__value {
    margin: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- diary */

.diary {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem calc(6.5rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

.diary__head {
    padding: 1.15rem 0 0.5rem;
}

.diary__machine {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.diary__title {
    margin: 0.3rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.diary__counts {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.diary__filters {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0 1.1rem;
}

.diary__filters .chip {
    flex: 1;
}

.diary__list {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.diary__list::before {
    content: "";
    position: absolute;
    left: 2.9rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1.5px;
    background: var(--border);
}

.diary__day {
    padding-left: 3.7rem;
    margin-top: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    list-style: none;
}

.diary__entry {
    position: relative;
    padding-left: 3.7rem;
}

.diary__time {
    position: absolute;
    left: 0;
    top: 0.06rem;
    width: 2.45rem;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.diary__node {
    position: absolute;
    left: 2.7rem;
    top: 0.18rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bg-1);
    border: 1.5px solid var(--text-muted);
    z-index: 1;
}

/* A phase is a chapter mark: mint ink, so the eye finds the structure before the details. */
.diary__event--phase {
    color: var(--primary);
}

.diary__entry--phase .diary__node {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(28, 214, 133, 0.16);
}

.diary__entry--paused .diary__node,
.diary__entry--resumed .diary__node {
    background: var(--warning);
    border-color: var(--warning);
}

/* The technician's line under a photo. */
.diary__caption {
    max-width: 15rem;
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.diary__entry--opened .diary__node,
.diary__entry--closed .diary__node {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 6px rgba(28, 214, 133, 0.5);
}

.diary__entry--voice .diary__node {
    border-color: var(--info);
}

.diary__event {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
}

.diary__sub {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* A tappable thumbnail: the photo opens in the lightbox, not in a new browser tab. */
.diary__shot {
    position: relative;
    display: block;
    max-width: 15rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.diary__shot img {
    display: block;
    width: 100%;
    max-height: 10.5rem;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: border-color 0.15s ease;
}

.diary__shot:active img {
    border-color: rgba(28, 214, 133, 0.32);
}

.diary__shot:focus-visible img {
    border-color: var(--primary);
}

.diary__shot-zoom {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 11, 15, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------- photo lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    /* dvh, not svh: an overlay must cover the viewport exactly as it stands right now. */
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(7, 10, 14, 0.93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary);
}

.lightbox::backdrop {
    background: rgba(5, 8, 11, 0.5);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: calc(env(safe-area-inset-top) + 3.4rem) 0.75rem
        calc(env(safe-area-inset-bottom) + 3.9rem);
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] .lightbox__image {
        animation: lightbox-in 0.18s ease-out;
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}

.lightbox__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: calc(env(safe-area-inset-top) + 0.55rem) max(0.9rem, var(--safe-right)) 0.9rem
        max(0.9rem, var(--safe-left));
    background: linear-gradient(180deg, rgba(5, 8, 11, 0.72), transparent);
}

.lightbox__meta {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* What the model saw under a photo: quieter than the technician's caption, and labelled as such. */
.diary__description {
    max-width: 15rem;
    margin: 0.3rem 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.diary__description span {
    display: block;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lightbox__description {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.lightbox__caption {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.lightbox__meta b {
    font-weight: 600;
}

.lightbox__counter {
    color: var(--text-muted);
}

.lightbox__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(8, 11, 15, 0.55);
    color: var(--text-secondary);
    transform: translateY(-50%);
}

.lightbox__nav--prev {
    left: max(0.6rem, var(--safe-left));
}

.lightbox__nav--next {
    right: max(0.6rem, var(--safe-right));
}

@media (hover: hover) {
    .lightbox__close:hover,
    .lightbox__nav:hover {
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }
}

.lightbox__original {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 0.8rem);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(8, 11, 15, 0.55);
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.diary__voice {
    display: grid;
    gap: 0.45rem;
}

.diary__audio {
    width: 100%;
    max-width: 19rem;
    /* iOS's native audio chrome is ~44px tall: anything shorter clips it. */
    height: 2.75rem;
}

/* The words of a voice note, once the pipeline has written them down. */
.diary__transcript {
    margin: 0;
    max-width: 34rem;
    padding: 0.6rem 0.85rem;
    border-left: 2px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: var(--surface);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.diary__transcribing {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.diary__dots {
    display: inline-flex;
    gap: 0.22rem;
}

.diary__dots i {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing 1.2s ease-in-out infinite;
}

.diary__dots i:nth-child(2) { animation-delay: 0.15s; }
.diary__dots i:nth-child(3) { animation-delay: 0.3s; }

.diary__nospeech {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.diary__file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.diary__addbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.7rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.diary__add {
    position: relative;
    cursor: pointer;
}

.diary__add input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.diary__add:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.diary__addtimer {
    display: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.diary__add.is-rec {
    color: var(--danger);
    border-color: rgba(224, 81, 81, 0.5);
    animation: rec-pulse 1.6s ease-in-out infinite;
}

.diary__add.is-rec .diary__addtimer { display: inline; }
.diary__add.is-rec .diary__addword { display: none; }

@keyframes rec-pulse {
    50% { box-shadow: 0 0 0 8px rgba(224, 81, 81, 0.08); }
}

/* ---------------------------------------------------------------- forms */

.form {
    display: grid;
    gap: 0.9rem;
}

.fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fieldset legend {
    margin-bottom: 0.35rem;
}

.field {
    display: grid;
    gap: 0.35rem;
}

.field > label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    font: inherit;
    /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: rgba(28, 214, 133, 0.52);
    box-shadow: 0 0 0 3px rgba(28, 214, 133, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.field__hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* The assistant's draft speaks azure, same accent as everywhere it appears. */
.field__hint--assistant {
    color: #9fd7ff;
}

.field__composing {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #9fd7ff;
}

/* ------------------------------------------------- closing sheet: evidence row */

/* Three glass tiles under the notes: dictate into the field, add photos, attach files.
   Same tone as the head actions, so the mint "Chiudi intervento" keeps the stage. */
.closing-evidence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: -0.35rem;
}

.closing-evidence__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.6rem;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.closing-evidence__btn:active {
    background: rgba(255, 255, 255, 0.09);
}

.closing-evidence__btn:disabled,
.closing-evidence__btn.is-busy {
    opacity: 0.55;
    cursor: default;
}

/* The picker is the whole tile: the label is the target, the input stays invisible. */
.closing-evidence__btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.closing-evidence__btn.is-rec {
    border-color: rgba(224, 81, 81, 0.55);
    background: rgba(224, 81, 81, 0.14);
    color: #ff9d8f;
}

.closing-evidence__icon {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.closing-evidence__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.closing-evidence__rec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.closing-evidence__rec span:nth-child(3),
.closing-evidence__rec .composer__rec-dot + span + span {
    font-family: var(--font-mono);
}

/* What was added, as chips: a thumbnail per photo, the name per file, a cross to take it back. */
.closing-evidence__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
}

.closing-evidence__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 12rem;
}

.closing-evidence__photo {
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    object-fit: cover;
}

.closing-evidence__file {
    display: block;
    max-width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-1, rgba(255, 255, 255, 0.05));
    font-size: 0.78rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.closing-evidence__item.is-queued .closing-evidence__file,
.closing-evidence__item.is-queued .closing-evidence__photo {
    border-style: dashed;
}

.closing-evidence__item small {
    font-size: 0.66rem;
    color: var(--text-muted);
}

.closing-evidence__remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-0);
    color: var(--text-secondary);
    font-size: 0.65rem;
    line-height: 1;
}

@media (max-width: 22.5rem) {
    /* The narrowest phones keep the icons and lose the words; the labels stay for readers. */
    .closing-evidence__btn > span:not(.closing-evidence__icon) {
        display: none;
    }
}

.field__composing svg {
    flex: none;
}

.field__composing-dots {
    display: inline-flex;
    gap: 0.22rem;
}

.field__composing-dots span {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: currentColor;
    animation: typing 1.2s ease-in-out infinite;
}

.field__composing-dots span:nth-child(2) { animation-delay: 0.15s; }
.field__composing-dots span:nth-child(3) { animation-delay: 0.3s; }

.field textarea.is-composing {
    border-color: rgba(91, 174, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(91, 174, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

@media (prefers-reduced-motion: reduce) {
    .field__composing-dots span {
        animation: none;
        opacity: 0.7;
    }
}

/* Segmented control for the small closed sets: fewer taps than a dropdown. */
.segmented {
    display: flex;
    gap: 0.3rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.segmented button {
    flex: 1;
    min-height: 2.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
}

.segmented button.is-active {
    color: var(--primary);
    background: var(--accent-soft);
}

/* Six board projections do not belong in six unreadable slivers on a phone. */
.segmented--views {
    flex-wrap: wrap;
}

.segmented--views button {
    flex: 1 1 calc(33.333% - 0.3rem);
    min-width: 6rem;
}

/* Operator picker: one pill per person, wrapping as the roster grows. */
.segmented--wrap {
    flex-wrap: wrap;
}

.segmented--wrap button {
    flex: 0 1 auto;
    min-height: 2.4rem;
    padding-inline: 0.85rem;
}

/* A full-row switch keeps the state and its consequence legible on a phone. */
.filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-toggle__copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.filter-toggle__copy strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 650;
}

.filter-toggle__copy small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.filter-toggle__track {
    position: relative;
    flex: none;
    width: 2.55rem;
    height: 1.45rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-toggle__thumb {
    position: absolute;
    top: 0.14rem;
    left: 0.14rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.18s ease, background 0.15s ease;
}

.filter-toggle.is-active {
    border-color: rgba(28, 214, 133, 0.34);
    background: var(--accent-soft);
}

.filter-toggle.is-active .filter-toggle__track {
    border-color: rgba(28, 214, 133, 0.48);
    background: rgba(28, 214, 133, 0.22);
}

.filter-toggle.is-active .filter-toggle__thumb {
    transform: translateX(1.1rem);
    background: var(--primary);
}

.filter-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .filter-toggle:not(.is-active):hover {
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, 0.045);
    }
}

/* ---------------------------------------------------------------- action bar + sheet */

.actionbar {
    z-index: 30;
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    /* Stay above the on-screen keyboard while a form field has focus. */
    margin-bottom: var(--keyboard-inset, 0px);
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.actionbar--split {
    grid-template-columns: 1fr 1fr;
}

/* The bar spans the shell edge to edge, but its controls keep the same reachable cap
   as the anchored CTA (.ctadock .big-cta) instead of stretching into a runway. */
.actionbar > * {
    width: min(100%, 32rem);
    margin-inline: auto;
}

/* Forms and detail panes ride in on a sheet, so the page stays visible underneath. */
.sheetback {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(5, 8, 11, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

dialog.sheetback {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
}

dialog.sheetback:not([open]) {
    display: none;
}

dialog.sheetback::backdrop {
    background: transparent;
}

.sheet {
    width: 100%;
    max-width: 34rem;
    max-height: calc(88dvh - var(--keyboard-inset, 0px));
    overflow-y: auto;
    /* Overscrolling the sheet must not scroll the page behind the dialog. */
    overscroll-behavior: contain;
    /* Ride above the on-screen keyboard while a form field has focus. */
    margin-bottom: var(--keyboard-inset, 0px);
    padding: 0.6rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: sheet-up 0.25s ease;
}

@keyframes sheet-up {
    from { transform: translateY(2rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.sheet__handle {
    width: 2.4rem;
    height: 0.3rem;
    margin: 0.2rem auto 0.7rem;
    border-radius: 999px;
    background: var(--border-strong);
}

.sheet__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* The sentence under a sheet's title: plain flow text, never pre-wrapped like a note. */
.sheet__lead {
    margin: -0.2rem 0 1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.sheet__lead--ink {
    color: var(--text-primary);
}

.sheet__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.sheet__close {
    min-height: 2.75rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
}

.sheet__close--icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
}

/* A sheet that is really a screen: the closing form. Squared corners and the full height, with
   the heading pushed under the status bar and the actions above the home indicator, so the notes
   textarea keeps its room even with the keyboard up. */
.sheet--full {
    max-width: none;
    height: calc(100dvh - var(--keyboard-inset, 0px));
    max-height: none;
    margin-bottom: 0;
    padding-top: calc(0.75rem + var(--safe-top));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    border: 0;
    border-radius: 0;
    animation: sheet-up 0.22s ease;
}

.sheet--full .sheet__heading {
    margin-bottom: 1.1rem;
}

.sheet--full .sheet__title {
    font-size: 1.2rem;
}

.sheet--full .form textarea {
    min-height: 11rem;
}

/* Release acknowledgement lives outside #app so Blazor cannot remove it while booting. */
dialog.app-update-dialog {
    width: min(calc(100% - 2rem), 28rem);
    max-width: none;
    max-height: calc(100dvh - max(2rem, var(--safe-top)) - max(2rem, var(--safe-bottom)));
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(22, 31, 37, 0.99), rgba(9, 13, 17, 0.99));
    color: var(--text-primary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 34px rgba(28, 214, 133, 0.1);
}

dialog.app-update-dialog:not([open]) {
    display: none;
}

dialog.app-update-dialog::backdrop {
    background: rgba(3, 6, 9, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.app-update-dialog__surface {
    display: grid;
    justify-items: center;
    padding: 1rem 1.1rem 1.15rem;
    overflow-y: auto;
    text-align: center;
}

.app-update-dialog__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.75rem;
}

.app-update-dialog__eyebrow {
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.app-update-dialog__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(28, 214, 133, 0.34);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--primary);
    box-shadow: 0 0 24px rgba(28, 214, 133, 0.15);
}

.app-update-dialog h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.app-update-dialog p {
    max-width: 23rem;
    margin: 0.65rem 0 1.1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.app-update-dialog__continue {
    width: 100%;
    min-height: 3.25rem;
}

.sheet__block {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

/* A decision asked twice: the confirm banner and the button that seals it. */
.banner--confirm {
    border-color: rgba(229, 179, 100, 0.45);
    background: rgba(229, 179, 100, 0.1);
    color: var(--text-primary);
}

.glass-btn--confirm {
    border-color: rgba(229, 179, 100, 0.55);
    background: rgba(229, 179, 100, 0.16);
    color: var(--warning);
}

.sheet__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sheet__actions--single {
    grid-template-columns: 1fr;
}

/*
  Floating compose button: the one thing a technician starts from an empty board.
  The only solid mint object on screen, so it gets the full liquid-glass treatment.
*/
.fab {
    position: fixed;
    right: max(1rem, var(--safe-right));
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.7rem;
    padding: 0.26rem 1.15rem 0.26rem 0.35rem;
    border-radius: 999px;
    background: linear-gradient(165deg, #3aeda4, var(--primary) 48%, var(--primary-dark));
    color: #05130c;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow:
        0 16px 36px -10px rgba(28, 214, 133, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

/* The plus sits in its own darker well, like a lamp housing on an instrument panel. */
.fab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: rgba(5, 19, 12, 0.18);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.fab__icon svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .fab:hover {
        transform: translateY(-1px);
        box-shadow:
            0 20px 42px -10px rgba(28, 214, 133, 0.6),
            0 12px 32px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }

    .fab:hover .fab__icon svg {
        transform: rotate(90deg);
    }
}

.fab:active {
    transform: scale(0.95);
    box-shadow:
        0 8px 22px -8px rgba(28, 214, 133, 0.45),
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.fab:active .fab__icon svg {
    transform: rotate(90deg);
}

@media (min-width: 34rem) {
    .job-docs__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- assistant chat */

.chat {
    /* The attach menu's scrim covers the chat, and nothing else. */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--chat-text-size);
    line-height: var(--chat-line-height);
}

/* Every chat control follows the dashboard's typeface instead of the browser's form font. */
.chat :is(button, input, textarea, select) {
    font-family: var(--font-sans);
}

.chat__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 0.75rem;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

.chat__context {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 0 0.8rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
}


.chat__machine {
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.chat__jobtitle {
    font-size: var(--chat-text-size);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.chat__ground {
    font-size: var(--chat-meta-size);
    color: var(--text-muted);
}

.chat__hello {
    padding: 0.6rem 0;
}

/* Points at the composer's own icons, so the capabilities are learned before they are needed. */
.chat__hint {
    margin: 0.9rem 0 0;
    font-size: var(--chat-meta-size);
    line-height: var(--chat-line-height);
    color: var(--text-muted);
}

.chat__hint svg {
    vertical-align: -0.12em;
    color: var(--text-secondary);
}

.chat__suggestions {
    display: grid;
    gap: var(--chat-gap);
}

.chat__suggestion {
    text-align: left;
    padding: .375rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--chat-radius);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: .875rem;
    transition: border-color 0.15s ease, color 0.15s ease;
    min-height: var(--chat-control-size);
    font-weight: 500;
    line-height: 1.4;
}

.chat__suggestion:active {
    border-color: rgba(28, 214, 133, 0.4);
    color: var(--primary);
}

/* Docked above the composer for the whole conversation, not just the empty state: a swipeable
   row of chips, so the next question is one tap away even once the transcript has grown. */
.chat__suggestions--dock {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--chat-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.55rem 1rem;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
    border-top: 1px solid var(--border);
}

.chat__suggestions--dock::-webkit-scrollbar {
    display: none;
}

.chat__suggestions--dock .chat__suggestion {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: var(--chat-control-size);
    padding: .375rem .75rem;
    border-radius: 999px;
    font-size: .875rem;
}

.chat__suggestions--dock .chat__suggestion:disabled {
    opacity: 0.45;
}

.msg {
    max-width: 86%;
    margin: 0.4rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: var(--chat-radius);
    font-size: var(--chat-text-size);
    line-height: var(--chat-line-height);
}

.msg--user {
    margin-left: auto;
    background: var(--accent-soft);
    border: 1px solid rgba(28, 214, 133, 0.3);
    border-bottom-right-radius: 5px;
}

.msg--bot {
    margin-right: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

.msg__text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* An assistant reply rendered from light Markdown: tight paragraphs and lists that read well in a bubble. */
.msg__text--md { white-space: normal; }

/* Tones and chips the model may ask for - "[05]{.rosso}", "[Alta]{.chip .rosso}" - named after
   the palette, never a raw colour: its red is the red the board gives to late work. */
.md-tone { font-weight: 600; }
.md-tone--red { color: var(--chat-danger); }
.md-tone--amber { color: var(--warning); }
.md-tone--green { color: var(--primary); }
.md-tone--blue { color: var(--chat-info); }
.md-tone--grey { color: var(--text-muted); font-weight: 500; }

.md-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    margin: 0 0.1rem;
    padding: 0 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: var(--chat-meta-size);
    font-weight: 600;
    line-height: 1.2;
    vertical-align: 0.1em;
    white-space: nowrap;
}

.md-chip--red { border-color: rgba(224, 81, 81, 0.55); background: rgba(224, 81, 81, 0.14); color: var(--chat-danger); }
.md-chip--green { border-color: rgba(28, 214, 133, 0.5); background: rgba(28, 214, 133, 0.14); color: var(--primary); }
.md-chip--blue { border-color: rgba(91, 174, 255, 0.5); background: rgba(91, 174, 255, 0.12); color: var(--chat-info); }
.md-chip--grey { color: var(--text-secondary); }
.md-chip--amber {
    /* Fallback first: engines without color-mix keep the plain chip in the warning colour. */
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 55%, transparent);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.msg__text--md > :first-child { margin-top: 0; }
.msg__text--md > :last-child { margin-bottom: 0; }
.msg__text--md p { margin: 0 0 var(--chat-gap); }
.msg__text--md .md-h { margin: .75rem 0 var(--chat-gap); font-weight: 600; font-size: var(--chat-text-size); letter-spacing: normal; }
.msg__text--md ul, .msg__text--md ol { margin: 0 0 var(--chat-gap); padding-left: 1.25rem; }
.msg__text--md li { margin: 0.18rem 0; }
.msg__text--md li::marker { color: var(--text-muted); }
.msg__text--md strong { font-weight: 700; }
.msg__text--md code { padding: 0.05rem 0.32rem; border-radius: 0.35rem; background: rgba(255, 255, 255, 0.08); font-family: inherit; font-size: 0.86em; }
.msg__text--md pre { margin: 0.4rem 0 0.6rem; padding: 0.55rem 0.7rem; border-radius: var(--chat-radius); background: rgba(0, 0, 0, 0.28); overflow-x: auto; }
.msg__text--md pre code { padding: 0; background: none; font-family: var(--font-mono); font-size: 0.8em; white-space: pre; }
.msg__text--md a { color: var(--accent, #25df91); text-decoration: underline; text-underline-offset: 0.15em; }
/* A citation the answer wrote in prose, turned into a chip that opens the page or the job. */
.msg__text--md .md-cite {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    margin: 0 0.1rem;
    padding: 0.08rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 223, 145, 0.35);
    background: rgba(37, 223, 145, 0.1);
    color: var(--accent, #25df91);
    font-size: var(--chat-meta-size);
    text-decoration: none;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A citation chip is a button; its card is the sibling after it, laid out in the flow of the
   bubble: a tap opens it under the chip's line at the bubble's width, so nothing hangs off the
   edge of a phone, and the next tap - or Escape, or a tap anywhere else in the chat - closes
   it. Hover opens it only where hovering exists: a touch screen keeps :hover on the last tap.
   The chip keeps its clip, so a long file name ends in an ellipsis instead of spilling. */
.msg__text--md .md-cite--doc { cursor: pointer; font-family: inherit; line-height: inherit; }
.msg__text--md .md-cite-wrap { display: inline; }
.msg__text--md .md-cite__preview {
    display: none;
    margin: 0.35rem 0 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--chat-radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--bg-1, #131a1f);
    color: var(--text, #edf2f1);
    font-size: var(--chat-meta-size);
    line-height: var(--chat-line-height);
    white-space: normal;
    text-align: left;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.msg__text--md .md-cite-wrap.is-open .md-cite__preview { display: block; }
@media (hover: hover) {
    .msg__text--md .md-cite-wrap:hover .md-cite__preview { display: block; }
}
/* Inside the card: the passage, then the link that opens the page or the file. */
.msg__text--md .md-cite__excerpt { display: block; }
.msg__text--md .md-cite__open { display: inline-block; font-weight: 650; }
.msg__text--md .md-cite__excerpt + .md-cite__open { margin-top: 0.45rem; }
/* The provenance under a line: its own small line, so the answer reads first. */
.msg__text--md .md-source { display: block; margin-top: 0.25rem; font-size: var(--chat-meta-size); line-height: 1.4; color: var(--text-muted); }
.msg__text--md li .md-source { margin-top: 0.1rem; }
/* A table earns its own scroller: at 375 px a four-column comparison either scrolls or turns
   into unreadable slivers, and stretching it to 100% is what made the columns collapse. */
.msg__text--md .md-table {
    margin: 0.4rem 0 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.msg__text--md table {
    /* max-content, not auto: auto still fits the scroller, which is what squeezed five columns
       into 266 px and broke every header across three lines. Sized to its content, the table
       overflows and the wrapper scrolls - min-width keeps a narrow one filling the bubble. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--chat-text-size);
}
.msg__text--md th,
.msg__text--md td {
    padding: .375rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    vertical-align: top;
    /* A floor so a short column cannot collapse to one character per line, and a ceiling so one
       long sentence wraps instead of dragging the table off into the distance. */
    min-width: 4.5rem;
    max-width: 16rem;
    white-space: normal;
}

/* Long headers wrap by words; units sit below the label instead of widening every column. */
.msg__text--md th {
    white-space: normal;
}
.md-table__heading {
    display: inline-block;
    max-width: 14ch;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.md-table__unit {
    display: block;
    margin-top: .15rem;
    font-size: var(--chat-meta-size);
    font-weight: 400;
}

/* Digits line up down a column: a table of torques or hours is read by comparing them. */
.msg__text--md td {
    font-variant-numeric: tabular-nums;
}
.msg__text--md th { font-weight: 600; color: var(--text-secondary); }

/* Timestamp under a human-to-human line: the control-room chat needs "when", the assistant doesn't. */
.msg__meta {
    display: block;
    margin-top: 0.28rem;
    font-size: var(--chat-meta-size);
    color: var(--text-muted);
    text-align: right;
}

/* The operator's own lines end with a bin next to the time; the control room's never do. */
.msg__meta--own {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* Delivery ticks after the time: muted until the desk has read up to that line. */
.msg__ticks {
    display: inline-grid;
    place-items: center;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.msg__ticks.is-read {
    color: var(--primary);
}

.msg__delete {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    /* A glove-sized target that does not fatten the bubble. */
    margin: -0.45rem -0.55rem -0.45rem 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.15s ease, background 0.15s ease;
}

.msg__delete:active {
    color: #ff9d8f;
    background: rgba(224, 81, 81, 0.14);
}

.msg__delete:disabled {
    opacity: 0.4;
}

/* One more tap, asked inside the bubble: nothing leaves the thread by a brush of a knuckle. */
.msg__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.msg__confirm > span {
    flex: 1 1 100%;
    text-align: right;
}

.msg__confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.1rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 600;
}

.msg__confirm-btn--danger {
    border-color: rgba(224, 81, 81, 0.55);
    background: rgba(224, 81, 81, 0.14);
    color: #ff9d8f;
}

@media (hover: hover) {
    .msg__delete:hover {
        color: #ff9d8f;
        background: rgba(224, 81, 81, 0.1);
    }
}

/* The flag that pins a chat line to one maintenance; tapping it opens that job. */
.msg__subject {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin-bottom: 0.3rem;
    padding: 0.16rem 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(242, 197, 107, 0.32);
    border-radius: 999px;
    background: rgba(242, 197, 107, 0.1);
    color: #f2d79f;
    font-size: 0.66rem;
    font-weight: 650;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg__subject svg {
    flex: none;
}

/* The composer's subject strip: what the next message will be about, one tap to drop it. */
.composer__subject {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(242, 197, 107, 0.28);
    border-radius: 10px;
    background: rgba(242, 197, 107, 0.08);
    color: #f2d79f;
    font-size: 0.72rem;
}

.composer__subject span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer__subject svg {
    flex: none;
}

.composer__subject-clear {
    flex: none;
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    color: var(--text-secondary);
    text-decoration: none;
}

.msg__image {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: zoom-in;
}

.msg__image:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.msg__img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 14rem;
    /* Reserve the box before the photo decodes, so the auto-scroll to the newest
       message is not thrown off by late layout shifts. */
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 0.4rem;
}

.msg__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.msg__audio {
    display: block;
    width: min(100%, 18rem);
    min-height: 2.75rem;
    margin-bottom: 0.35rem;
}

.msg__gallery--multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.msg__gallery--multi .msg__img {
    width: 100%;
    height: 7rem;
    margin-bottom: 0;
    object-fit: cover;
}

.composer {
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.55rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom));
    padding-left: max(0.8rem, var(--safe-left));
    padding-right: max(0.8rem, var(--safe-right));
    /* Stay above the on-screen keyboard while typing a question. */
    margin-bottom: var(--keyboard-inset, 0px);
    /* Bar and attach menu ride above the scrim. */
    position: relative;
    z-index: 2;
}

.composer__bar {
    display: flex;
    /* The buttons follow the last line of a field that has grown. */
    align-items: flex-end;
    gap: var(--chat-gap);
}

.composer__icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chat-touch-size);
    height: var(--chat-touch-size);
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.composer__icon input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.composer__icon:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.composer__icon.is-rec {
    color: var(--danger);
    border-color: rgba(224, 81, 81, 0.5);
    background: rgba(224, 81, 81, 0.14);
    animation: rec-pulse 1.6s ease-in-out infinite;
}

.composer__icon:has(input:disabled),
.composer__icon:disabled {
    cursor: default;
    opacity: 0.42;
}

/* Native input state folds the icons immediately, including iOS composition before Blazor's
   next render. Stable flex wrappers keep the same file inputs mounted in both layouts. */
.composer__attach,
.composer__tools {
    display: flex;
    flex: none;
    gap: var(--chat-gap);
}

.composer__plus,
.composer__tool-label {
    display: none;
}

.composer__attach {
    position: relative;
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__plus {
    display: flex;
}

.composer__plus svg {
    transition: transform 0.15s ease;
}

.composer__attach.is-open .composer__plus svg {
    transform: rotate(45deg);
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__tools {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 0;
    z-index: 1;
    display: none;
    min-width: 11.5rem;
    padding: 0.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    /* An opaque ground: the menu floats over the transcript. */
    background: var(--bg-1);
    background-image: var(--card);
    box-shadow: var(--elev-2);
    transform-origin: bottom left;
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach.is-open .composer__tools {
    display: grid;
    animation: composer-menu-pop 0.15s ease;
}

@keyframes composer-menu-pop {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__tools .composer__icon {
    width: auto;
    height: auto;
    min-height: 2.75rem;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0 1rem 0 0.7rem;
    border: 0;
    border-radius: 0.7rem;
    background: none;
    color: var(--text-primary);
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__tools .composer__icon:active {
    background: rgba(255, 255, 255, 0.06);
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__tools .composer__icon svg {
    color: var(--text-secondary);
}

.composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach .composer__tool-label {
    display: inline;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

.composer__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The field grows with the draft - one line to eight, then it scrolls. The placeholder
   never participates in sizing: a narrow phone must keep an empty composer on one line. */
.composer__field {
    flex: 1;
    display: grid;
    min-width: 0;
}

.composer__field::after {
    content: attr(data-value) " ";
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.composer__field::after,
.composer__input {
    grid-area: 1 / 1;
    box-sizing: border-box;
    min-height: var(--chat-touch-size);
    max-height: 12.4rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid transparent;
    font: inherit;
    /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: var(--chat-text-size);
    line-height: var(--chat-line-height);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.composer__input {
    width: 100%;
    min-width: 0;
    border-color: var(--border);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    resize: none;
    overflow-y: auto;
    outline: none;
    transition: border-color 0.15s ease;
}

.composer__input:placeholder-shown {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Telegram's corner arrows: from three lines or so the draft can open as a full-height editor,
   the conversation stepping aside until the text is sent or the arrows are tapped again. */
.composer__field {
    position: relative;
}

.composer__field.has-expand::after,
.composer__field.has-expand .composer__input {
    padding-right: 2.7rem;
}

.composer__expand {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-secondary);
}

.composer__expand:active {
    color: var(--text-primary);
}

.chat--composing .chat__scroll,
.chat--composing .chat__suggestions--dock {
    display: none;
}

.chat--composing .composer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat--composing .composer__bar {
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

.chat--composing .composer__icon,
.chat--composing .composer__attach,
.chat--composing .composer__send {
    align-self: flex-end;
}

/* Full height: the mirror steps aside and the textarea fills the field, scrolling inside. */
.chat--composing .composer__field {
    display: block;
    min-height: 0;
}

.chat--composing .composer__field::after {
    display: none;
}

.chat--composing .composer__input {
    height: 100%;
    max-height: none;
}

.composer__input:focus {
    border-color: rgba(28, 214, 133, 0.5);
}

.composer__input::placeholder {
    color: var(--text-muted);
}

.composer__send {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chat-touch-size);
    height: var(--chat-touch-size);
    border-radius: 50%;
    background: var(--primary);
    color: #05130c;
    transition: opacity 0.15s ease, transform 0.08s ease;
}

.composer__send:active {
    transform: scale(0.94);
}

.composer__send:disabled {
    opacity: 0.35;
}

/* Stop takes the send button's seat while the model works: same size, same place, so the thumb
   already knows where it is - and red, because it interrupts rather than submits. */
.composer__send--stop {
    background: rgba(224, 81, 81, 0.18);
    border: 1px solid rgba(224, 81, 81, 0.5);
    color: #ff8a8a;
}

@media (prefers-reduced-motion: no-preference) {
    .composer__send--stop {
        animation: composer-stop-breathe 1.6s ease-in-out infinite;
    }

    @keyframes composer-stop-breathe {
        50% { border-color: rgba(224, 81, 81, 0.9); }
    }
}

.composer__previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.composer__preview {
    position: relative;
    display: inline-block;
}

.composer__preview img {
    display: block;
    width: 4.2rem;
    height: 4.2rem;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
}

/* A document waiting to go with the question: a chip with its name, the same ✕ as a photo. */
.composer__preview--doc { max-width: 12rem; }
.composer__doc {
    display: block;
    max-width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--bg-1, rgba(255, 255, 255, 0.05));
    font-size: 0.78rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Documents that travelled with a question, listed above its text. */
.msg__docs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; }
.msg__doc {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: 0.72rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.composer__remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bg-0);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: 0.65rem;
    line-height: 1;
}

.composer__voice-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.65rem;
    padding: 0.4rem 0.45rem 0.4rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.composer__voice-preview > span:first-child {
    color: var(--danger);
    font-size: 0.62rem;
}

.composer__voice-preview button {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-0);
    color: var(--text-secondary);
}

.composer__rec[hidden] {
    display: none;
}

.composer__rec {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: var(--danger);
}

.composer__rec-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--danger);
    animation: pulse 1.2s infinite;
}

/* ---------------------------------------------------------------- selected mock: turno timeline */

/*
  The selected 853×1844 reference is a 427×922 mobile canvas at 2×. These responsive
  measurements keep its rail at about x109 and its job copy at about x145 on that canvas,
  while still leaving enough copy width on a 320 px device.
*/
:root {
    --gutter: clamp(3.3rem, 14vw, 3.75rem);
    --rail-x: clamp(4.15rem, 20.8vw, 5.55rem);
    --card-x: clamp(5.85rem, 30vw, 7.95rem);
    --hero-x: clamp(5.35rem, 25.1vw, 6.7rem);
}

/* The one fixed bar of the app: it owns the top inset (status bar and Dynamic Island run
   over its glass) and carries brand, link LED and session - nothing else stays pinned. */
.topbar {
    /* Grid items default to min-width auto: without this the bar can grow past the shell
       and push its trailing controls off-screen instead of ellipsizing the operator name. */
    min-width: 0;
    min-height: calc(3.5rem + var(--safe-top));
    gap: 0.82rem;
    padding: calc(var(--safe-top) + 0.5rem) max(1.15rem, var(--safe-right)) 0.5rem max(1.15rem, var(--safe-left));
}

.topbar .brand-mark {
    width: 2.5rem;
    height: auto;
}

.topbar .brand-name {
    font-size: 1.05rem;
}

.board {
    /* Just enough tail to clear the floating fab: reserved void is wasted screen. */
    padding: 0.65rem 1.25rem calc(4.6rem + env(safe-area-inset-bottom));
    /* Landscape: keep the column clear of the notch rails. */
    padding-left: max(1.25rem, var(--safe-left));
    padding-right: max(1.25rem, var(--safe-right));
}

.shift {
    padding: 0.45rem 0 0.55rem;
}

.shift__titlerow {
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Five actions share the row on a phone: the title sizes to what is left, wraps at a space
   when large type needs it ("Il mio" / "turno") and only a lone long word still ellipsizes. */
.shift__titlerow h1 {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(1.35rem, 6vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: normal;
}

.shift__stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    min-width: 0;
}

.shift__stat {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 0.42rem;
    min-height: 1.75rem;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 400;
    white-space: nowrap;
}

.shift__stat + .shift__stat {
    border: 0;
}

.shift__stat--action {
    border-radius: 0.5rem;
    text-align: left;
}

.shift__stat--action:focus-visible {
    outline-offset: 0.2rem;
}

.shift__dot {
    flex: none;
    width: 0.58rem;
    height: 0.58rem;
}

.shift__date {
    gap: 0.5rem;
    margin-top: 0;
    color: var(--text-secondary);
}

.shift__date time {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnline {
    position: relative;
    margin-top: 0.55rem;
}

.turnline::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: var(--rail-x);
    top: 1.05rem;
    bottom: 1.72rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.38);
}

.timeline-edge {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: 2.75rem;
    place-items: center;
    padding-left: var(--card-x);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.06em;
    text-align: center;
}

.timeline-edge > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.timeline-edge--previous {
    margin-bottom: 0.2rem;
}

.timeline-edge--next {
    min-height: 4rem;
    padding-bottom: 0.8rem;
}

.timeline-edge__spinner {
    width: 0.72rem;
    height: 0.72rem;
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.queue-edge {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.06em;
    text-align: center;
}

.queue-edge > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.turnline__revealed {
    position: relative;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-strong);
}

.turnline__revealed h2 {
    margin: 0 0 0.45rem;
    padding-left: var(--card-x);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--danger);
}

.turnline__origin {
    position: relative;
    display: block;
    min-height: 5.2rem;
    margin-right: clamp(0.4rem, 3vw, 0.8rem);
    padding: 0.15rem 0 0.75rem var(--card-x);
    border-bottom: 1px solid var(--border-strong);
}

.turnline__origin-when {
    position: absolute;
    left: 0;
    top: 0.15rem;
    display: grid;
    width: var(--gutter);
    justify-items: end;
    gap: 0.2rem;
    /* The node sits just inside the gutter's right edge: the clock must stop short of it. */
    padding-right: 0.55rem;
    text-align: right;
}

.turnline__origin-when b {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.turnline__origin-when i {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.turnline__origin.is-late .turnline__origin-when b,
.turnline__origin.is-late .turnline__origin-when i,
.turnline__origin.is-late .turnline__origin-machine b {
    color: #ff6262;
}

.turnline__origin-node {
    position: absolute;
    z-index: 2;
    left: calc(var(--rail-x) - 0.86rem);
    top: 0.05rem;
    display: grid;
    place-items: center;
    width: 1.72rem;
    height: 1.72rem;
    border: 1.5px solid var(--st-pending);
    border-radius: 50%;
    background: rgba(91, 174, 255, 0.14);
    color: var(--st-pending);
    box-shadow: 0 0 0 0.25rem rgba(91, 174, 255, 0.06), 0 0 0.8rem rgba(91, 174, 255, 0.24);
}

.turnline__origin.is-late .turnline__origin-node {
    border-color: var(--danger);
    background: rgba(224, 81, 81, 0.16);
    color: #ff6262;
    box-shadow: 0 0 0 0.25rem rgba(224, 81, 81, 0.07), 0 0 0.8rem rgba(224, 81, 81, 0.32);
}

.turnline__origin-copy {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.turnline__origin-machine {
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.turnline__origin-machine b {
    font-weight: 500;
}

.turnline__origin-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.32;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.turnline .now {
    min-height: 15rem;
    margin: 0;
    padding: 0.82rem 0 1.15rem var(--hero-x);
}

.turnline .now__when {
    top: 1.72rem;
    width: var(--gutter);
    gap: 0.25rem;
}

.turnline .now__when i {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.turnline .now__when b {
    font-size: 1.55rem;
    font-weight: 600;
}

.turnline .now__node {
    left: calc(var(--rail-x) - 0.62rem);
    top: 7.05rem;
    width: 1.3rem;
    height: 1.3rem;
    box-shadow: 0 0 0 0.55rem rgba(28, 214, 133, 0.13), 0 0 0 1.05rem rgba(28, 214, 133, 0.05);
}

.turnline .now__node i {
    width: 0.62rem;
    height: 0.62rem;
}

.turnline .now--idle {
    min-height: 6.15rem;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.turnline .now--idle .now__when {
    top: 0.88rem;
}

.turnline .now--idle .now__node {
    top: 1.55rem;
}

.turnline .now--idle .now__idle {
    min-height: 4.7rem;
    margin-right: clamp(0.4rem, 3vw, 0.8rem);
    align-content: center;
    padding: 0.65rem 0.85rem;
    border-style: solid;
    background: rgba(255, 255, 255, 0.025);
}

.turnline .now--idle .now__idle b {
    color: var(--text-primary);
    font-size: 0.94rem;
}

.turnline .hero__card {
    overflow: visible;
    min-height: 13.35rem;
    margin-right: -1.25rem;
    padding: 0.75rem 1.3rem 0.65rem 1.48rem;
    border-radius: 0.75rem 0 0 0.75rem;
}

.turnline .hero__card::before {
    width: 0.22rem;
    border-radius: 0.75rem 0 0 0.75rem;
}

.turnline .hero__card::after {
    content: "";
    position: absolute;
    left: -0.58rem;
    top: calc(50% - 0.65rem);
    width: 0;
    height: 0;
    border-top: 0.65rem solid transparent;
    border-bottom: 0.65rem solid transparent;
    border-right: 0.65rem solid var(--primary);
    transform: rotate(180deg);
}

.turnline .hero__machine {
    margin-top: 0.3rem;
    font-size: 0.86rem;
    font-weight: 400;
}

.turnline .hero__headline {
    display: -webkit-box;
    margin-top: 0.35rem;
    overflow: hidden;
    font-size: clamp(1.24rem, 5.35vw, 1.48rem);
    font-weight: 700;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.turnline .hero__since {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    color: var(--primary);
}

.turnline .hero__op {
    margin-top: 0.5rem;
}

.turnline .hero__avatar {
    width: 2rem;
    height: 2rem;
}

.turnline .hero__opname {
    font-size: 0.98rem;
    font-weight: 500;
}

.turnline .hero__opname small {
    font-size: 0.78rem;
}

.turnline .hero__open {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3rem;
    margin-top: 0.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

.turnline__concurrent {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.55rem;
    margin: 0.6rem clamp(0.4rem, 3vw, 0.8rem) 1.45rem var(--hero-x);
}

.turnline__concurrent::before {
    content: "";
    position: absolute;
    top: 0.52rem;
    right: 100%;
    width: calc(var(--hero-x) - var(--rail-x));
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.turnline__concurrent-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.turnline__concurrent-title span {
    color: var(--text-muted);
    white-space: nowrap;
}

.turnline__concurrent-toggle {
    justify-self: end;
    min-height: 2.75rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
}

.turnline__concurrent-toggle:focus-visible {
    outline-offset: 0.15rem;
}

@media (hover: hover) {
    .turnline__concurrent-toggle:hover {
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
    }
}

.turnline__concurrent .queue--open {
    gap: 0.5rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.turnline__concurrent .queue--open .queue__item + .queue__item {
    border-top: 0;
}

.turnline__concurrent .queue--open .queue__link {
    grid-template-columns: 0.18rem minmax(0, 1fr) auto;
    min-height: 5.9rem;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.028);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.turnline__concurrent .queue--open .queue__rail {
    background: rgba(28, 214, 133, 0.72);
    box-shadow: none;
}

.turnline__concurrent .queue--open .queue__body {
    gap: 0.2rem;
    padding: 0.45rem 0.58rem 0.45rem 0.72rem;
}

.turnline__concurrent .queue--open .queue__kind {
    color: var(--text-secondary);
}

.turnline__concurrent .queue--open .queue__headline {
    font-size: 0.9rem;
    line-height: 1.28;
}

.turnline__concurrent .queue--open .queue__foot {
    font-size: 0.67rem;
}

.turnline__concurrent .queue--open .queue__chevron {
    margin-right: 0.58rem;
}

.turnline__previous,
.turnline__upcoming {
    position: relative;
    padding-top: 0;
}

/* ---------------------------------------------------------------- section markers on the rail

   "Precedenti" and "Programmate" are breaks in the timeline, so they are drawn as breaks: a
   dashed lead-in fading in across the clock column, an unfilled ring threaded on the rail, and
   a pill that names the section. The rail itself takes the section's colour through the ring,
   so the line announces the break and the pill only labels it.

   This replaces the absolute overlay the heading used to be - a zero-height label parked at
   left: 0 inside the gutter, with the list pulled up under it. A pill cannot live in that slot,
   so the marker rejoins the flow; it costs roughly 2.7rem of scroll per section, which is the
   price of the whole idea and is paid on purpose.

   The dash is the rail, interrupted: the same 2px thickness, the same hue as the filament it
   runs into, and strokes longer than their gaps so it reads as a broken line rather than a
   dotted one. Every measure is in rem, so html.text-lg scales the marker with the board. */

.turnline .flow__section--mark {
    /* Ring outer diameter. Larger than a row node (0.94rem) and a late node (1.08rem), smaller
       than the origin node (1.72rem): the ladder of rail furniture keeps its order. */
    --mark-ring: 1.22rem;

    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    /* Ring plus its halo, so two markers can never crowd whatever lands between them. */
    min-height: 1.66rem;
    margin: 1.15rem 0 0.4rem;
    /* Rail events hang on --hero-x, the column the ADESSO block already starts in: this is a
       mark on the timeline, not a job row. max() keeps the pill clear of the ring at any width. */
    padding: 0 clamp(0.4rem, 3vw, 0.8rem) 0
        max(calc(var(--rail-x) + 1px + var(--mark-ring) / 2 + 0.44rem), var(--hero-x));
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.turnline .flow__section--mark.flow__section--next {
    color: var(--st-pending);
    --mark-edge: rgba(91, 174, 255, 0.42);
    --mark-halo: rgba(91, 174, 255, 0.16);
    --mark-wire: rgba(91, 174, 255, 0.85);
    --mark-dash: rgba(91, 174, 255, 0.38);
}

/* The past wears the grey its own closed nodes already wear, lifted for text: the raw token
   reads 5.3:1 on this ground against the blue's 8.2:1, and a section that is merely dimmer than
   its neighbour looks disabled rather than different. Lifted, the two match at about 8.5:1 and
   separate by hue alone. */
.turnline .flow__section--mark.flow__section--past {
    color: #a8adb6;
    --mark-edge: rgba(127, 135, 148, 0.45);
    --mark-halo: rgba(127, 135, 148, 0.12);
    --mark-wire: rgba(127, 135, 148, 0.8);
    --mark-dash: rgba(127, 135, 148, 0.4);
}

/* The lead-in, drawn as a repeating gradient rather than a dashed border: a border cannot fade,
   and its dash rhythm is left to the browser. Masked so it emerges from nothing at the left
   edge instead of butting against it - the same fade the rail already uses at top and bottom. */
.turnline .flow__section--mark::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--rail-x) - var(--mark-ring) / 2 - 0.2rem);
    height: 2px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
        90deg,
        var(--mark-dash) 0 0.42rem,
        transparent 0.42rem 0.68rem);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%);
    mask-image: linear-gradient(90deg, transparent, #000 48%);
}

/* The filament: the rail carries the section's colour through the ring and fades back to
   neutral above and below. Behind everything else in the marker's own stacking context, and
   above the rail because the marker sits at z-index 2. */
.turnline .flow__section--mark::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: var(--rail-x);
    width: 2px;
    height: 4.4rem;
    transform: translateY(-50%);
    background: linear-gradient(
        180deg,
        transparent,
        var(--mark-wire) 32%,
        var(--mark-wire) 68%,
        transparent);
}

.turnline .flow__section-knot {
    position: absolute;
    z-index: 1;
    top: 50%;
    /* The rail is 2px wide starting at --rail-x, so its optical centre is --rail-x + 1px. */
    left: calc(var(--rail-x) + 1px);
    width: var(--mark-ring);
    height: var(--mark-ring);
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--mark-edge);
    border-radius: 50%;
    /* Opaque fill and a dark halo: the line runs behind the ring instead of touching it. */
    background: var(--bg-0);
    box-shadow: 0 0 0 0.22rem var(--bg-0), 0 0 0.9rem var(--mark-halo);
}

/* Near-black fill with the hue confined to the hairline and the ink. A priority badge is a
   tinted lozenge, so keeping this one dark is what stops it reading as one - together with the
   mono uppercase, which no badge uses. */
.turnline .flow__section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.44rem 0.78rem 0.44rem 0.6rem;
    border: 1px solid var(--mark-edge);
    border-radius: 999px;
    background: rgba(12, 16, 20, 0.86);
    box-shadow: 0 0 1.4rem var(--mark-halo);
    color: inherit;
    font-weight: 600;
}

.turnline .flow__section-chip svg {
    flex: none;
}

.turnline .flow__section-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnline .flow__list {
    gap: 0;
    margin: 0;
}

.turnline .flow__item {
    min-height: 7.25rem;
    margin-right: clamp(0.4rem, 3vw, 0.8rem);
    padding-left: var(--card-x);
}

.turnline .flow__when {
    top: 2.15rem;
    width: var(--gutter);
    gap: 0.25rem;
}

.turnline .flow__when b {
    font-size: 1.08rem;
    font-weight: 600;
}

.turnline .flow__when i {
    font-size: 0.61rem;
    letter-spacing: 0.12em;
}

.turnline .flow__node {
    left: calc(var(--rail-x) - 0.46rem);
    top: 0.89rem;
    width: 0.94rem;
    height: 0.94rem;
    border: 0.2rem solid rgba(12, 16, 20, 0.72);
    background: var(--st-pending);
    box-shadow: 0 0 0 0.16rem rgba(91, 174, 255, 0.25), 0 0 0.7rem rgba(91, 174, 255, 0.28);
}

.turnline .flow__item--late .flow__node {
    left: calc(var(--rail-x) - 0.52rem);
    top: 1.18rem;
    width: 1.08rem;
    height: 1.08rem;
    border: 1.5px solid var(--danger);
    background: rgba(224, 81, 81, 0.16);
    color: #ff6262;
    box-shadow: 0 0 0 0.2rem rgba(224, 81, 81, 0.08), 0 0 0.75rem rgba(224, 81, 81, 0.34);
}

.turnline .flow__item--closed .flow__node {
    background: var(--st-closed);
    box-shadow: 0 0 0 0.16rem rgba(127, 135, 148, 0.2);
}

.turnline .flow__card {
    min-height: 7.25rem;
    padding: 0.8rem 0 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.turnline .flow__machine {
    overflow: hidden;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnline .flow__headline {
    margin-top: 0.48rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.turnline .flow__tags {
    gap: 0.72rem;
    margin-top: 0.62rem;
}

.turnline .flow__op {
    min-width: 0;
    font-size: 0.84rem;
}

.turnline-extra {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.board > .turnline + .turnline-extra {
    margin-top: 2.5rem;
}

.fab {
    right: max(1rem, var(--safe-right));
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
    gap: 0.42rem;
    min-height: 2.7rem;
    padding: 0.28rem 1rem 0.28rem 0.7rem;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.fab__icon {
    width: 1.65rem;
    height: 1.65rem;
    background: none;
    box-shadow: none;
}

.tonow {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
}

@media (max-width: 22.5rem) {
    .board {
        padding-inline: 1rem;
    }

    .shift__stats {
        flex-wrap: wrap;
        gap: 0.72rem;
    }

    .shift__stat {
        gap: 0.38rem;
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .turnline .hero__card {
        margin-right: -1rem;
        padding-inline: 1.15rem;
    }

    .turnline .hero__headline {
        font-size: 1.15rem;
    }

    .turnline .flow__op {
        font-size: 0.74rem;
    }
}

#blazor-error-ui .dismiss {
    top: 0.3rem;
    right: 0.3rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
}

/* ---------------------------------------------------------------- access */

.auth-loading {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.8rem;
    background: var(--bg-0);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.auth-loading__mark {
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--border-strong);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.auth-loading--offline {
    max-width: 100%;
    padding: calc(var(--safe-top) + 1.5rem) max(1.5rem, var(--safe-right))
        calc(var(--safe-bottom) + 1.5rem) max(1.5rem, var(--safe-left));
    text-align: center;
}

.auth-loading--offline strong {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
}

.auth-loading__detail {
    max-width: 20rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}

.auth-loading__retry {
    min-width: 8.5rem;
    min-height: 2.75rem;
    margin-top: 0.35rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    font: 700 0.75rem/1 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}

.auth-loading__retry:disabled {
    opacity: 0.55;
}

.pin-login {
    position: fixed;
    inset: 0;
    z-index: 10;
    grid-row: 1 / -1;
    display: grid;
    /* One definite row: the panel's max-height resolves against it, so a panel taller than
       the viewport (large type under Safari's toolbars) scrolls instead of being clipped. */
    grid-template-rows: 100%;
    place-items: center;
    width: 100%;
    /* position:fixed resolves 100% against the ICB — the full viewport, floating
       Safari toolbar included, so no dead band below the panel. */
    height: 100%;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    padding: calc(var(--safe-top) + 0.75rem) 1rem max(0.75rem, var(--safe-bottom));
    isolation: isolate;
}

.pin-login::before,
.pin-login::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.pin-login::before {
    top: -10rem;
    right: -8rem;
    width: 24rem;
    height: 24rem;
    background: radial-gradient(circle, rgba(28, 214, 133, 0.15), transparent 68%);
}

.pin-login::after {
    bottom: -12rem;
    left: -10rem;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(91, 174, 255, 0.08), transparent 68%);
}

.pin-login__panel {
    position: relative;
    width: min(100%, 23.5rem);
    max-height: 100%;
    padding: clamp(1rem, 2.4dvh, 1.65rem);
    overflow: hidden auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border-strong);
    border-radius: 1.65rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(12, 16, 20, 0.74);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.pin-login__panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--primary) 24%, var(--primary) 76%, transparent);
    box-shadow: 0 0 1.2rem rgba(28, 214, 133, 0.48);
}

.pin-login__panel--operators {
    display: flex;
    flex-direction: column;
    width: min(100%, 26rem);
    height: min(100%, 43rem);
}

.pin-login__brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.pin-login__brand img {
    width: clamp(2.55rem, 6dvh, 3.25rem);
    height: auto;
}

.pin-login__brand > span {
    display: grid;
    line-height: 1.05;
}

.pin-login__brand strong {
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

.pin-login__intro {
    margin-top: clamp(0.8rem, 3.2dvh, 1.8rem);
}

.pin-login__signal {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.25rem;
    margin-bottom: clamp(0.45rem, 1.5dvh, 0.85rem);
}

.pin-login__signal i {
    display: block;
    width: 0.32rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0.65rem rgba(28, 214, 133, 0.42);
}

.pin-login__signal i:nth-child(1) { height: 0.45rem; opacity: 0.45; }
.pin-login__signal i:nth-child(2) { height: 0.78rem; opacity: 0.68; }
.pin-login__signal i:nth-child(3) { height: 1.12rem; }
.pin-login__signal i:nth-child(4) { height: 0.7rem; opacity: 0.62; }

.pin-login__intro h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.85rem, 7vw, 2.45rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.pin-login__intro h1:focus {
    outline: none;
}

.pin-login__intro p {
    max-width: 19rem;
    margin: clamp(0.4rem, 1.3dvh, 0.75rem) 0 0;
    color: var(--text-secondary);
}

.pin-login__form {
    display: grid;
    gap: clamp(0.45rem, 1.2dvh, 0.75rem);
    margin-top: clamp(0.7rem, 2.4dvh, 1.4rem);
}

.pin-login__entry {
    width: min(100%, 14rem);
    margin-inline: auto;
}

.pin-login__entry-heading {
    margin-bottom: 0.4rem;
}

.pin-login__entry-heading label {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pin-login__input {
    width: 100%;
    min-height: clamp(2.9rem, 6.4dvh, 3.55rem);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 3.3dvh, 1.45rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.55em;
    text-align: center;
    caret-color: var(--primary);
    cursor: default;
    /* The field is type="text" driven by the keypad; this masks the digits without
       inviting iOS password AutoFill the way type="password" does. */
    -webkit-text-security: disc;
}

.pin-login__input:focus {
    border-color: rgba(28, 214, 133, 0.52);
    box-shadow: 0 0 0 3px rgba(28, 214, 133, 0.1), 0 0 1.2rem rgba(28, 214, 133, 0.08);
}

.pin-login__input[aria-invalid="true"] {
    border-color: rgba(224, 81, 81, 0.62);
}

.pin-login__feedback {
    min-height: 1.1rem;
    margin: 0.3rem 0 0;
    font-size: 0.73rem;
    color: var(--text-muted);
}

.pin-login__feedback.is-error {
    color: #ff9797;
}

.pin-login__keypad {
    --pin-key-size: clamp(2.8rem, 7.6dvh, 4rem);
    display: grid;
    grid-template-columns: repeat(3, var(--pin-key-size));
    justify-content: center;
    gap: clamp(0.38rem, 1.2dvh, 0.65rem) clamp(0.65rem, 3vw, 1rem);
    padding-top: 0.1rem;
}

.pin-login__key {
    display: grid;
    place-items: center;
    width: var(--pin-key-size);
    height: var(--pin-key-size);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0.45rem 1rem rgba(0, 0, 0, 0.16);
    font-family: var(--font-mono);
    font-size: clamp(1.15rem, 3.2dvh, 1.45rem);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    user-select: none;
    touch-action: manipulation;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease,
        box-shadow 0.12s ease, opacity 0.12s ease;
}

.pin-login__key:active:not(:disabled) {
    transform: scale(0.92);
    border-color: rgba(28, 214, 133, 0.5);
    background: rgba(28, 214, 133, 0.13);
    box-shadow: inset 0 0 1.1rem rgba(28, 214, 133, 0.11);
}

.pin-login__key--utility {
    color: var(--text-secondary);
}

.pin-login__key--enter {
    border-color: transparent;
    background: linear-gradient(135deg, #70e9a9, var(--primary));
    box-shadow: 0 0.6rem 1.5rem rgba(28, 214, 133, 0.23), inset 0 1px rgba(255, 255, 255, 0.35);
    color: #07120d;
}

.pin-login__key--enter:active:not(:disabled) {
    border-color: transparent;
    background: linear-gradient(135deg, #61dfa0, #17c679);
    box-shadow: 0 0.25rem 0.8rem rgba(28, 214, 133, 0.2);
}

.pin-login__key:disabled {
    cursor: default;
    opacity: 0.32;
}

.pin-login__spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(7, 18, 13, 0.28);
    border-top-color: #07120d;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (hover: hover) {
    .pin-login__key:hover:not(:disabled) {
        border-color: rgba(28, 214, 133, 0.38);
        background: rgba(28, 214, 133, 0.09);
    }

    .pin-login__key--enter:hover:not(:disabled) {
        border-color: transparent;
        background: linear-gradient(135deg, #80efb4, #25db8c);
    }
}

.pin-login__key:focus-visible {
    outline-offset: 3px;
}

.pin-login__privacy {
    margin: clamp(0.65rem, 1.8dvh, 1rem) 0 0;
    padding-top: clamp(0.55rem, 1.4dvh, 0.85rem);
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.operator-login {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin-top: clamp(0.75rem, 2.2dvh, 1.25rem);
}

.operator-login__form,
.operator-login__fieldset {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.operator-login__fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.operator-login__fieldset legend {
    margin-bottom: 0.55rem;
    padding: 0;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.operator-login__list {
    display: grid;
    flex: 1;
    gap: 0.5rem;
    min-height: 0;
    max-height: min(23rem, 43dvh);
    padding: 0.1rem 0.25rem 0.2rem 0.1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Slim scrollbar for mouse browsers only: on iOS `scrollbar-width` would replace the
   auto-hiding overlay scrollbar with a permanent one on this single list. */
@media (hover: hover) and (pointer: fine) {
    .operator-login__list {
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }
}

.operator-login__choice {
    position: relative;
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 1.65rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.operator-login__choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.operator-login__choice:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.operator-login__choice.is-selected {
    border-color: rgba(28, 214, 133, 0.5);
    background: linear-gradient(135deg, rgba(28, 214, 133, 0.14), rgba(28, 214, 133, 0.045));
    box-shadow: inset 0 0 1.2rem rgba(28, 214, 133, 0.055);
}

.operator-login__avatar {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(28, 214, 133, 0.28);
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.08);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.operator-login__identity {
    display: grid;
    min-width: 0;
}

.operator-login__identity strong {
    overflow: hidden;
    font-size: 0.93rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operator-login__identity small {
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.operator-login__check {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.015);
    transition: border-color 0.14s ease, background 0.14s ease;
}

.operator-login__check i {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0.55rem rgba(28, 214, 133, 0.45);
    transform: scale(0);
    transition: transform 0.14s ease;
}

.operator-login__choice.is-selected .operator-login__check {
    border-color: var(--primary);
    background: rgba(28, 214, 133, 0.1);
}

.operator-login__choice.is-selected .operator-login__check i {
    transform: scale(1);
}

.operator-login__confirm {
    position: relative;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: min(100%, 17.25rem);
    min-height: 3.15rem;
    margin-top: 0.85rem;
    padding: 0.7rem 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(112, 233, 169, 0.28);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 52%),
        linear-gradient(135deg, #70e9a9, var(--primary));
    box-shadow:
        0 0.7rem 1.7rem rgba(28, 214, 133, 0.2),
        inset 0 1px rgba(255, 255, 255, 0.36);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: #07120d;
    isolation: isolate;
    transition: transform 0.14s ease, border-color 0.14s ease,
        background 0.14s ease, box-shadow 0.14s ease;
}

.operator-login__confirm::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 42%);
    pointer-events: none;
}

.operator-login__confirm svg,
.operator-login__confirm .operator-login__spinner {
    flex: none;
}

.operator-login__confirm:disabled {
    border-color: rgba(28, 214, 133, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 55%),
        rgba(28, 214, 133, 0.1);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
    color: rgba(196, 237, 218, 0.72);
    cursor: default;
    opacity: 1;
}

.operator-login__confirm:disabled::before {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid rgba(112, 233, 169, 0.42);
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.12);
    box-shadow: 0 0 0.65rem rgba(28, 214, 133, 0.16);
}

.operator-login__confirm:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
    box-shadow:
        0 0.3rem 0.85rem rgba(28, 214, 133, 0.18),
        inset 0 1px rgba(255, 255, 255, 0.28);
}

.operator-login__back,
.operator-login__retry {
    align-self: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
    border: 0;
    color: var(--text-secondary);
}

.operator-login__back {
    margin-top: 0.25rem;
    font-size: 0.78rem;
}

.operator-login__retry {
    margin-top: 0.4rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
}

.operator-login__error {
    margin: 0.45rem 0 0;
    font-size: 0.72rem;
    color: #ff9797;
}

.operator-login__state {
    display: grid;
    flex: 1;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    min-height: 10rem;
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.operator-login__state strong {
    color: var(--text-primary);
}

.operator-login__state > span:last-of-type {
    max-width: 17rem;
    font-size: 0.78rem;
}

.operator-login__spinner {
    display: inline-block;
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(28, 214, 133, 0.24);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (hover: hover) {
    .operator-login__choice:hover {
        border-color: rgba(28, 214, 133, 0.35);
        background: rgba(28, 214, 133, 0.07);
    }

    .operator-login__confirm:hover:not(:disabled) {
        transform: translateY(-1px);
        border-color: rgba(145, 247, 192, 0.48);
        box-shadow:
            0 0.85rem 2rem rgba(28, 214, 133, 0.25),
            inset 0 1px rgba(255, 255, 255, 0.4);
    }

    .operator-login__back:hover,
    .operator-login__retry:hover {
        color: var(--text-primary);
    }
}

.topbar__session {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    /* The cluster compresses before anything can push the logout button off-screen. */
    min-width: 0;
}

.topbar__session .status,
.topbar__push,
.topbar__logout {
    flex: none;
}

.topbar__settings {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.topbar__settings.is-open,
.topbar__settings:active {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-primary);
}

@media (hover: hover) {
    .topbar__settings:hover {
        border-color: var(--border);
        background: var(--surface-2);
        color: var(--text-primary);
    }
}

.topbar__push-slash {
    stroke-width: 2.4;
}

/* The device sheet drops from the bar: one row per setting, more rows welcome. */
.topsheet-backdrop {
    position: fixed;
    z-index: 79;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(4, 8, 10, 0.45);
}

.topsheet {
    position: fixed;
    z-index: 80;
    top: calc(var(--safe-top) + 3.7rem);
    right: max(0.75rem, var(--safe-right));
    width: min(22.5rem, calc(100vw - 1.5rem));
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
    animation: topsheet-in 0.16s ease both;
}

@keyframes topsheet-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.topsheet__head {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 720;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.topsheet__list {
    padding: 0.4rem;
}

.topsheet__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
}

.topsheet__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.topsheet__icon.is-on {
    border-color: rgba(229, 179, 100, 0.3);
    background: rgba(229, 179, 100, 0.1);
    color: var(--warning);
}

.topsheet__icon.is-off {
    border-color: rgba(224, 81, 81, 0.35);
    background: rgba(224, 81, 81, 0.1);
    color: #ff9d8f;
}

.topsheet__copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.topsheet__copy b {
    font-size: 0.84rem;
    font-weight: 650;
}

.topsheet__copy span {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* Coordinates read as figures, not prose: mono and tabular so the digits sit still. */
.topsheet__copy .is-coords {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* The rule that sets the status row apart from the switches above it. */
.topsheet__divider {
    height: 1px;
    margin: 0.35rem 0.6rem;
    background: var(--border);
}

/* The manager's door to the control room: azure, like every informational surface. */
.topbar__admin {
    color: #9fd7ff;
    border-color: rgba(91, 174, 255, 0.35);
}

/* The sheet's foot: the release, small and mono, where a support call can read it out. */
.topsheet__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    padding: 0.55rem 1rem 0.7rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.66rem;
}

.topsheet__foot b {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}

.topsheet__foot small {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--warning);
}

/* The paused job's welcome: the pause icon in the face's amber, above the way back. */
.resume__face {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.2rem 0 0.8rem;
    border: 1px solid rgba(229, 179, 100, 0.35);
    border-radius: 50%;
    background: rgba(229, 179, 100, 0.12);
    color: var(--warning);
}

/* An action instead of a switch: the outbox row's "send now". */
.topsheet__action {
    flex: none;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(28, 214, 133, 0.4);
    border-radius: 999px;
    background: rgba(28, 214, 133, 0.1);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 650;
    white-space: nowrap;
}

.topsheet__action:disabled {
    opacity: 0.45;
}

/* The sheet's switch: a plain on/off, busy shows the spinner in its place. */
.tswitch {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.9rem;
    height: 1.65rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.16s ease, border-color 0.16s ease;
}

.tswitch__thumb {
    position: absolute;
    top: 50%;
    left: 0.22rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--text-secondary);
    transform: translateY(-50%);
    transition: transform 0.16s ease, background 0.16s ease;
}

.tswitch.is-active {
    border-color: rgba(28, 214, 133, 0.45);
    background: rgba(28, 214, 133, 0.25);
}

.tswitch.is-active .tswitch__thumb {
    background: var(--primary);
    transform: translate(1.25rem, -50%);
}

.tswitch:disabled {
    cursor: default;
    opacity: 0.7;
}

.topbar__operator {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    color: var(--text-secondary);
}

.topbar__operator-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(28, 214, 133, 0.28);
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.08);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.topbar__operator-name {
    min-width: 0;
    max-width: 8rem;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__logout {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.4rem -0.55rem -0.4rem 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-secondary);
}

.topbar__logout:focus-visible,
.topbar__logout:active {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-primary);
}

@media (hover: hover) {
    .topbar__logout:hover {
        border-color: var(--border);
        background: var(--surface-2);
        color: var(--text-primary);
    }
}

.topbar__logout:disabled {
    cursor: default;
    opacity: 0.45;
}

/* Below this width the avatar, status and logout alone fill the bar: the name would only
   survive as a one-letter ellipsis, so the initialed avatar carries the identity instead. */
@media (max-width: 27rem) {
    .topbar__operator-name {
        display: none;
    }
}

/* Around 361-376 px even the nameless bar runs out of air: breathe less, clip nothing. */
@media (max-width: 23.5rem) {
    .topbar {
        gap: 0.55rem;
        padding-inline: 0.9rem;
    }

    /* On the narrowest dashboard the mark is the brand; keeping the full wordmark here
       would force a 44 px session control off-screen. */
    .shell:has(.dashboard) .topbar .brand-text {
        display: none;
    }
}

@media (max-width: 22.5rem) {
    .topbar__session .status {
        font-size: 0;
    }

    .pin-login__panel {
        border-radius: 1.35rem;
    }
}

@media (max-height: 38rem) {
    .pin-login {
        padding-top: 0.4rem;
        padding-bottom: max(0.4rem, var(--safe-bottom));
    }

    .pin-login__panel {
        padding: 0.75rem 1rem;
    }

    .pin-login__brand {
        gap: 0.6rem;
    }

    .pin-login__brand img {
        width: 2.2rem;
    }

    .pin-login__brand strong {
        font-size: 0.95rem;
    }

    .pin-login__intro {
        margin-top: 0.55rem;
    }

    .pin-login__signal,
    .pin-login__intro p,
    .pin-login__privacy {
        display: none;
    }

    .pin-login__intro h1 {
        margin-top: 0.15rem;
        font-size: 1.55rem;
    }

    .pin-login__form {
        gap: 0.3rem;
        margin-top: 0.55rem;
    }

    .pin-login__entry-heading {
        margin-bottom: 0.2rem;
    }

    .pin-login__input {
        min-height: 2.65rem;
        font-size: 1.1rem;
    }

    .pin-login__feedback {
        min-height: 0.95rem;
        margin-top: 0.15rem;
        font-size: 0.66rem;
    }

    .pin-login__keypad {
        --pin-key-size: 2.8rem;
        gap: 0.32rem 0.8rem;
    }

    .operator-login {
        margin-top: 0.55rem;
    }

    .operator-login__list {
        max-height: none;
    }

    .operator-login__choice {
        min-height: 3.35rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .operator-login__avatar {
        width: 2.45rem;
        height: 2.45rem;
    }

    .operator-login__confirm {
        min-height: 3rem;
        margin-top: 0.5rem;
    }
}

@media (max-height: 28rem) {
    .pin-login__panel {
        width: min(100%, 20rem);
        padding: 0.5rem 0.75rem;
        border-radius: 1rem;
    }

    .pin-login__brand,
    .pin-login__intro,
    .pin-login__privacy {
        display: none;
    }

    .pin-login__form {
        gap: 0.2rem;
        margin-top: 0;
    }

    .pin-login__entry-heading {
        margin-bottom: 0.15rem;
    }

    .pin-login__entry-heading label {
        font-size: 0.58rem;
    }

    .pin-login__input {
        min-height: 2.4rem;
        font-size: 1rem;
    }

    .pin-login__feedback {
        min-height: 0.8rem;
        margin-top: 0.08rem;
        font-size: 0.58rem;
    }

    .pin-login__keypad {
        --pin-key-size: 2.75rem;
        gap: 0.22rem 0.65rem;
    }

    .pin-login__key {
        font-size: 1rem;
    }

    .pin-login__panel--operators .pin-login__intro {
        display: block;
        margin-top: 0;
    }

    .pin-login__panel--operators .pin-login__intro p,
    .pin-login__panel--operators .pin-login__signal,
    .pin-login__panel--operators .pin-login__intro > .eyebrow {
        display: none;
    }

    .operator-login__fieldset legend {
        margin-bottom: 0.3rem;
    }

    .operator-login__choice {
        grid-template-columns: 2.2rem minmax(0, 1fr) 1.4rem;
        min-height: 2.8rem;
        padding: 0.25rem 0.45rem;
    }

    .operator-login__avatar {
        width: 2.2rem;
        height: 2.2rem;
    }

    .operator-login__confirm {
        min-height: 2.75rem;
        margin-top: 0.35rem;
    }

    .operator-login__back {
        min-height: 2.1rem;
        margin-top: 0;
        padding-block: 0.2rem;
    }
}

@media (max-width: 13rem) and (max-height: 28rem) {
    .pin-login {
        padding-right: 0.35rem;
        padding-left: 0.35rem;
    }

    .pin-login__panel {
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }

    .pin-login__keypad {
        column-gap: 0.2rem;
    }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    .now__node,
    .tonow__dot,
    .job__lamp--live i,
    .tempo__clock b,
    .diary__dots i,
    .diary__add.is-rec,
    .composer__icon.is-rec,
    .composer__bar:has(.composer__input:not(:placeholder-shown)) .composer__attach.is-open .composer__tools,
    .composer__rec-dot,
    .rail__stop.is-current::before {
        animation: none;
    }

    .auth-loading__mark {
        animation: none;
    }

    .operator-login__spinner {
        animation: none;
    }

    .sheet {
        animation: none;
    }

    .fab,
    .fab__icon svg,
    .big-cta,
    .operator-login__confirm,
    .hero__open,
    .board-new,
    .focus-rollup svg {
        transition: none;
    }
}

/* ------------------------------------------------------- workcenter QR */

.dashboard {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Tools, title, vitals and date are the shift's instrument panel: they hold their row
   above the roster instead of scrolling away with it. */
.board__head {
    min-width: 0;
    padding: 0 1.25rem 0.2rem;
    padding-left: max(1.25rem, var(--safe-left));
    padding-right: max(1.25rem, var(--safe-right));
    border-bottom: 1px solid var(--border);
}

.dashboard > .board {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* The service-worker gateway is the one routed page without a top bar: it clears the
   status bar and the Dynamic Island on its own. */
.gateway {
    padding-top: calc(var(--safe-top) + 1.25rem);
}

/* The selected compact header keeps its two actions together without reducing their
   glove-friendly 44 px targets. */
.board-head-action {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-secondary);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.board-head-action svg {
    width: 1.1rem;
    height: 1.1rem;
}

.board-head-action--scanner {
    border-color: rgba(28, 214, 133, 0.38);
    background: rgba(28, 214, 133, 0.09);
    color: var(--primary);
}

.board-head-action--scanner:active,
.board-head-action--calendar.is-active,
.board-head-action--dashboard.is-active,
.board-head-action--filters.is-active {
    border-color: rgba(28, 214, 133, 0.58);
    background: rgba(28, 214, 133, 0.15);
    color: var(--primary);
}

.board-head-action--filters:active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

@media (hover: hover) {
    .board-head-action--scanner:hover,
    .board-head-action--calendar:hover,
    .board-head-action--dashboard:hover,
    .board-head-action--filters:hover {
        border-color: rgba(28, 214, 133, 0.48);
        background: rgba(28, 214, 133, 0.12);
        color: var(--primary);
    }
}

.board-head-action__active {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--bg-0);
    border-radius: 50%;
    background: var(--primary);
}

/* The manager chat lives in the top bar, amber on every screen: a person on the other end. */
/* A rounded square like the action tiles around it, sitting right after the assistant. */
.topbar__chat {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(242, 197, 107, 0.34);
    border-radius: 0.9rem;
    background: rgba(242, 197, 107, 0.09);
    color: #f2d79f;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.topbar__chat svg {
    width: 1.15rem;
    height: 1.15rem;
}

.topbar__chat:active {
    border-color: rgba(242, 197, 107, 0.58);
    background: rgba(242, 197, 107, 0.15);
    color: #f2d79f;
}

.topbar__chat:focus-visible {
    outline-color: rgba(242, 197, 107, 0.55);
}

@media (hover: hover) {
    .topbar__chat:hover {
        border-color: rgba(242, 197, 107, 0.48);
        background: rgba(242, 197, 107, 0.12);
        color: #f2d79f;
    }
}

.topbar__chat-count {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    display: grid;
    place-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.24rem;
    border: 2px solid var(--bg-0);
    border-radius: 999px;
    background: #f2c56b;
    color: #241a05;
    font-size: 0.6rem;
    font-weight: 750;
    line-height: 1;
}

.shift__actions {
    display: flex;
    align-items: center;
    flex: none;
    gap: 0.5rem;
}

.shift__summaryrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 1.75rem;
    margin-top: 0.25rem;
}

.shift__summaryrow .shift__date {
    overflow: hidden;
    margin-top: 0;
}

.shift__date svg {
    flex: none;
}

@media (max-width: 27.5rem) {
    .shift__summaryrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .shift__stats {
        justify-content: flex-start;
        gap: 0.85rem;
    }

    .shift__stat {
        gap: 0.36rem;
        font-size: 0.86rem;
    }
}

@media (max-width: 22.5rem) {
    .shift {
        padding: 0.35rem 0 0.45rem;
    }

    .shift__titlerow {
        gap: 0.6rem;
    }

    .shift__titlerow h1 {
        font-size: 1.55rem;
    }

    .shift__actions {
        gap: 0.4rem;
    }

    .shift__summaryrow .shift__stats {
        flex-wrap: nowrap;
        gap: 0.65rem;
        padding-top: 0;
        border-top: 0;
    }

    .shift__summaryrow .shift__stat,
    .shift__summaryrow .shift__stat + .shift__stat {
        flex: none;
        gap: 0.3rem;
        padding-left: 0;
        font-size: 0.78rem;
    }

    .shift__dot {
        width: 0.48rem;
        height: 0.48rem;
    }

    .shift__date {
        gap: 0.4rem;
    }

    .shift__date svg {
        width: 1rem;
        height: 1rem;
    }

    .shift__date time {
        font-size: 0.78rem;
    }
}

.shift__workcenter {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.45rem 0.45rem 0.45rem 0.6rem;
    border: 1px solid rgba(28, 214, 133, 0.28);
    border-radius: 999px;
    background: linear-gradient(100deg, rgba(28, 214, 133, 0.12), rgba(28, 214, 133, 0.035));
    color: var(--primary);
}

.shift__workcenter-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(28, 214, 133, 0.14);
}

.shift__workcenter > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.shift__workcenter small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.shift__workcenter strong {
    overflow: hidden;
    font-size: 0.83rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.shift__workcenter button,
.qrscan__torch {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
}

.shift__workcenter button:active,
.qrscan__torch:active {
    background: rgba(255, 255, 255, 0.09);
}

.qrscan-back {
    overscroll-behavior: none;
}

.qrscan-sheet {
    display: flex;
    flex-direction: column;
    max-height: min(92dvh, 47rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
}

.qrscan-sheet__heading {
    flex: none;
    margin-bottom: 0.75rem;
}

.qrscan-sheet__heading > div {
    min-width: 0;
}

.qrscan {
    display: grid;
    min-height: 0;
    gap: 0.75rem;
}

.qrscan__viewport {
    --scan-roi-width: 76%;
    --scan-roi-height: 62%;
    position: relative;
    min-height: 15rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 1.35rem;
    /* A faint engineering grid under the feed: the surface reads as an instrument even
       before the camera lights up, and as a dark bezel around it once it does. */
    background:
        radial-gradient(circle at 50% 40%, rgba(28, 214, 133, 0.12), transparent 48%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 1.5rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 1.5rem),
        #05080a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}

.qrscan__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #05080a;
}

.qrscan__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.qrscan__target {
    position: relative;
    width: 76%;
    height: 62%;
    /* Four white corner brackets, drawn as gradients so nothing but the corners is painted:
       the classic viewfinder, and white so it never reads as a green border over the feed.
       The shade around the box is the dimmed rest of the picture. */
    --bracket: 1.6rem;
    --stroke: 3px;
    border-radius: 1rem;
    background:
        linear-gradient(#fff, #fff) top left / var(--bracket) var(--stroke) no-repeat,
        linear-gradient(#fff, #fff) top left / var(--stroke) var(--bracket) no-repeat,
        linear-gradient(#fff, #fff) top right / var(--bracket) var(--stroke) no-repeat,
        linear-gradient(#fff, #fff) top right / var(--stroke) var(--bracket) no-repeat,
        linear-gradient(#fff, #fff) bottom left / var(--bracket) var(--stroke) no-repeat,
        linear-gradient(#fff, #fff) bottom left / var(--stroke) var(--bracket) no-repeat,
        linear-gradient(#fff, #fff) bottom right / var(--bracket) var(--stroke) no-repeat,
        linear-gradient(#fff, #fff) bottom right / var(--stroke) var(--bracket) no-repeat;
    box-shadow: 0 0 0 100vmax rgba(2, 5, 7, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The bracket corners follow the frame's rounding: masked, not clipped, so the shade stays. */
.qrscan__target::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 2.5rem rgba(28, 214, 133, 0.12);
    pointer-events: none;
}

.qrscan__target i {
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 0.8rem;
    left: 0.8rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--primary) 18%, #8df5c4 50%, var(--primary) 82%, transparent);
    box-shadow: 0 0 0.9rem rgba(28, 214, 133, 0.85), 0 0 2rem rgba(28, 214, 133, 0.35);
    animation: qrscan-line 2.2s ease-in-out infinite alternate;
}

@keyframes qrscan-line {
    from { top: 10%; }
    to { top: 90%; }
}

.qrscan__live {
    position: absolute;
    z-index: 2;
    top: 0.8rem;
    left: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(4, 8, 10, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qrscan__hint {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 0.85rem;
    left: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    text-align: center;
    text-shadow: 0 1px 8px #000;
}

.qrscan__state {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.5rem;
    background: rgba(5, 8, 11, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-primary);
    text-align: center;
}

/* The state's icon sits in its own bezel, like the stopwatch on the job page. */
.qrscan__state > svg {
    box-sizing: content-box;
    padding: 1rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(28, 214, 133, 0.22);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--primary);
    box-shadow: 0 0 1.6rem rgba(28, 214, 133, 0.16);
}

.qrscan__state strong {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.qrscan__state small {
    max-width: 18rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.qrscan__state button {
    min-height: 2.9rem;
    margin-top: 0.55rem;
    padding: 0 1.4rem;
    border: 1px solid rgba(28, 214, 133, 0.45);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(28, 214, 133, 0.22), rgba(28, 214, 133, 0.1));
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(28, 214, 133, 0.14);
}

.qrscan__spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Under the viewfinder: what the scan does, on its own quiet card, with the torch beside it. */
.qrscan__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
}

.qrscan__copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.qrscan__copy strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.qrscan__copy small {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.qrscan__torch.is-active {
    border-color: rgba(28, 214, 133, 0.4);
    background: var(--primary);
    color: var(--bg-0);
}

.qrscan__validation {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(224, 81, 81, 0.25);
    border-radius: 0.75rem;
    background: rgba(224, 81, 81, 0.08);
    color: #ff9696;
    font-size: 0.73rem;
    line-height: 1.4;
}

.qrscan__manual {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 3rem;
    margin-top: 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 650;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.qrscan__manual:active {
    border-color: rgba(28, 214, 133, 0.4);
    background: rgba(28, 214, 133, 0.08);
}

.qrscan__manual-entry {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.025);
}

.qrscan__manual-entry > label {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

.qrscan__manual-entry > p {
    margin: -0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
}

.qrscan__manual-entry > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.qrscan__manual-entry input {
    min-width: 0;
    min-height: 3rem;
    padding: 0 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.8rem;
    background: rgba(5, 8, 11, 0.58);
    color: var(--text-primary);
    /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
    font: 1rem var(--font-mono);
}

.qrscan__manual-entry button {
    min-height: 3rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--bg-0);
    font-weight: 750;
}

.qrscan__manual-entry button:disabled {
    opacity: 0.45;
}

.qrscan__manual-entry .qrscan__validation {
    margin-top: 0.1rem;
}

@media (max-height: 44rem) {
    .qrscan-sheet {
        max-height: 96dvh;
    }

    .qrscan__viewport {
        min-height: 12rem;
        max-height: 55dvh;
        aspect-ratio: 5 / 4;
    }
}

@media (max-width: 22.5rem) {
    .qrscan-sheet {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qrscan__target i,
    .qrscan__spinner {
        animation: none;
    }
}

/* ---------------------------------------------------------------- connectivity */

/*
  The link lamp no longer owns a strip of viewport: the screen belongs to the work.
  Its truth splits in two. A LED lives inside every top bar - server reachability is
  still one glance away, always. And the moment the link degrades, a floating banner
  slides under the bar with the words and the retry action; when all is well it simply
  is not there.
*/

/* The link LED, cascaded into every top bar: a panel light with its own bezel. */
/* Rendered only while the server is unreachable: red is an alarm, never a status. */
.netlamp {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(224, 81, 81, 0.5);
    border-radius: 50%;
    background: rgba(224, 81, 81, 0.12);
    color: #ff9d8f;
    animation: netline-pulse 1.6s ease-in-out infinite;
}

/* The banner floats over the content below the bar, so a flapping link never reflows
   the page. Its rail (.netzone) is always in the DOM - a persistent live region, so
   screen readers announce the words the moment they appear - and it never eats a tap:
   only the pill itself is interactive. */
.netzone {
    position: fixed;
    top: calc(var(--safe-top) + 3.85rem);
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.netbanner {
    pointer-events: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: min(100vw - 1.5rem, 30rem);
    min-height: 2.15rem;
    padding: 0.3rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: rgba(10, 14, 13, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.netbanner__dot {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 999px;
    flex: none;
}

.netbanner__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.netbanner__action {
    margin-left: 0.35rem;
    /* "Riprova" is the control that recovers from offline: keep it comfortably tappable. */
    min-height: 2rem;
    padding: 0.1rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.netbanner--warn { color: #f2c56b; border-color: rgba(242, 197, 107, 0.35); }
.netbanner--warn .netbanner__dot { background: #f2c56b; box-shadow: 0 0 6px rgba(242, 197, 107, 0.7); }

.netbanner--sync { color: rgba(126, 231, 179, 0.9); border-color: rgba(28, 214, 133, 0.3); }
.netbanner--sync .netbanner__dot {
    background: var(--primary);
    animation: netline-pulse 1.1s ease-in-out infinite;
}

.netbanner--down {
    color: #ff9d8f;
    background: rgba(46, 16, 12, 0.94);
    border-color: rgba(224, 81, 81, 0.4);
}
.netbanner--down .netbanner__dot {
    background: var(--danger);
    box-shadow: 0 0 7px rgba(224, 81, 81, 0.8);
    animation: netline-pulse 1.6s ease-in-out infinite;
}

/* While the banner is up, the board instrument panel steps out from under it: in the
   long-lived offline and stuck-queue states its actions must stay tappable at rest. */
.shell:has(.netbanner) .board__head {
    padding-top: 3.2rem;
}

/* Same clearance on the other screens: the banner floats at the same fixed spot,
   and offline is exactly when people read the detail, diary and chat headers. */
.shell:has(.netbanner) .detail,
.shell:has(.netbanner) .diary,
.shell:has(.netbanner) .chat__context,
.shell:has(.netbanner) .document-page {
    padding-top: 3.2rem;
}

@keyframes netline-pulse {
    50% { opacity: 0.35; }
}

/* Stale copy: the data on screen came from the local cache, not from the server. */
.banner--stale {
    background: rgba(91, 174, 255, 0.1);
    border-color: rgba(91, 174, 255, 0.3);
    color: #a8cdf3;
}

/* Evidence still waiting in the outbox, drawn inside the diary timeline. */
.diary__pending {
    display: grid;
    gap: 0.45rem;
    padding: 0.62rem 0.72rem;
    border: 1px dashed rgba(242, 197, 107, 0.42);
    border-radius: 0.75rem;
    background: rgba(242, 197, 107, 0.06);
}

.diary__pending-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: #f2c56b;
}

.diary__pending-head svg { flex: none; }

.diary__pending-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.diary__pending-note--error { color: #ff9d8f; }

.diary__pending img {
    max-width: 11rem;
    border-radius: 0.55rem;
    display: block;
}

.diary__pending-actions {
    display: flex;
    gap: 0.5rem;
}

.diary__pending-actions .glass-btn {
    /* "Riprova"/"Scarta" recover stuck evidence: keep them near the 44px tap floor. */
    min-height: 2.5rem;
    padding: 0.25rem 0.9rem;
    font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
    .netlamp,
    .topsheet,
    .netbanner--sync .netbanner__dot,
    .netbanner--down .netbanner__dot {
        animation: none;
    }

    .dock__note-menu {
        animation: none;
    }
}

/* ---------------------------------------------------------------- iphone proportions */

/* Set by js/device-profile.js from the measured screen class. rem-based sizes and
   spacing scale together; media-query breakpoints are immune (rem in a media query
   always reads the initial 16px), so no layout jumps between classes. */
html[data-iphone-size="se"],
html[data-iphone-size="mini"] {
    font-size: 15px;
}

html[data-iphone-size="max"] {
    font-size: 17px;
}

/* "Testo più grande" on those classes: the same 112.5%, spelled out because the class rules
   above share html.text-lg's specificity and, coming later, would otherwise win over it. */
html.text-lg[data-iphone-size="se"],
html.text-lg[data-iphone-size="mini"] {
    font-size: 16.875px;
}

html.text-lg[data-iphone-size="max"] {
    font-size: 19.125px;
}

/* In landscape the notch/island moves to the side: fixed bars pad for it. */
.diary__addbar {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* ---------------------------------------------------------------- device setup sheet */

.setup__rows {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.setup__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

/* The label between dot and state must shrink, not push the state off the sheet. */
.setup__row > span:not(.setup__dot) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.setup__row b { font-weight: 650; }

.setup__row em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.setup__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex: none;
}

.setup__dot--on { background: var(--primary); box-shadow: 0 0 6px rgba(28, 214, 133, 0.7); }
.setup__dot--ask { background: #f2c56b; box-shadow: 0 0 6px rgba(242, 197, 107, 0.55); }
.setup__dot--off { background: var(--danger); }

/* ------------------------------------------------------------- anchored primary action */

/* The state-changing button sits in a real bottom dock, like the controls shown once the job
   runs. The dock paints through the iPhone home-indicator area, while its button stays safe. */
.ctadock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.75rem max(1rem, var(--safe-right))
        max(0.85rem, var(--safe-bottom)) max(1rem, var(--safe-left));
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ctadock .big-cta {
    width: min(100%, 32rem);
    margin: 0;
}

.detail--cta {
    padding-bottom: calc(5.6rem + var(--safe-bottom));
}

/* ---------------------------------------------------------------- touch behaviour */

/* Suppress double-tap zoom on the controls a technician hammers in a hurry;
   scrolling and pinch on content are untouched. */
.chip,
.big-cta,
.row,
.dock__tile,
.dock__note-choice,
.glass-btn,
.sheet__close,
.fab,
.tonow {
    touch-action: manipulation;
}

/* ---------------------------------------------------------------- landscape phones */

/* iOS ignores the manifest's portrait lock: when the phone tips over, the tall dock
   and its sublabels would eat most of the 393pt of height. Slim them down. */
@media (orientation: landscape) and (max-height: 30rem) {
    .dock {
        left: max(0.5rem, var(--safe-left));
        right: max(0.5rem, var(--safe-right));
        bottom: max(0.35rem, var(--safe-bottom));
        gap: 0.55rem;
        padding: 0.45rem;
    }

    .dock__tile {
        min-height: 3.35rem;
        padding-block: 0.45rem;
    }

    /* Sublabels go; the recording timer inside the note tile must stay. */
    .dock__tile:not(.dock__tile--recording) small,
    .dock__tile--recording .dock__word {
        display: none;
    }

    .dock__note-menu {
        bottom: calc(100% + 1rem);
    }

    .detail--working {
        padding-bottom: calc(5.2rem + var(--safe-bottom));
    }

    /* The selected two-row header keeps its hierarchy in landscape while trimming
       the surrounding air. */
    .board__head {
        padding-bottom: 0.1rem;
    }

    .shift {
        display: block;
        padding: 0.15rem 0 0.5rem;
    }

    .shift__titlerow {
        min-width: 0;
    }

    .shift__summaryrow {
        gap: 0.6rem;
        margin-top: 0.15rem;
    }

    .shift__actions {
        gap: 0.35rem;
    }

    .shift__titlerow h1 {
        font-size: 1.3rem;
    }

    .shift__workcenter {
        width: 100%;
    }
}


/* ---------------------------------------------------------------- visual polish */
/* One layer over everything above: the same components, better lit. Depth comes from two
   elevation shadows and a card gradient, touch from a short press scale, keyboard from a
   single mint ring. Nothing here changes a layout; it changes how the layout feels. */

:root {
    --elev-1: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --elev-2: 0 22px 48px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028));
    --ring: 0 0 0 3px rgba(28, 214, 133, 0.35);
}

/* A breath of the brand hue behind every screen, top-left, where the eye starts. */
.shell {
    background:
        radial-gradient(70% 45% at 12% -8%, rgba(28, 214, 133, 0.09), transparent 60%),
        radial-gradient(60% 40% at 100% 100%, rgba(91, 174, 255, 0.05), transparent 60%);
}

/* The bar's lower edge as a fading hairline, not a hard rule across the screen. */
.topbar {
    border-bottom-color: transparent;
    background: rgba(8, 11, 15, 0.78);
}

.topbar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(28, 214, 133, 0.35), rgba(255, 255, 255, 0.12) 40%, transparent);
    pointer-events: none;
}

.topbar {
    position: relative;
}

/* Keyboard focus, one ring everywhere. */
.glass-btn:focus-visible,
.big-cta:focus-visible,
.row:focus-visible,
.chip:focus-visible,
.dock__tile:focus-visible,
.tempo__toggle:focus-visible,
.tempo__phasebtn:focus-visible,
.board-head-action:focus-visible,
.topbar__settings:focus-visible,
.topbar__tool:focus-visible,
.flow__card:focus-visible,
.hero__open:focus-visible,
.fab:focus-visible,
.diary__add:focus-visible,
.chat__suggestion:focus-visible,
.composer__send:focus-visible,
.phase__pick:focus-visible,
.tswitch:focus-visible,
.sheet__close:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Touch feedback: everything that can be pressed gives a little under the thumb. */
.glass-btn,
.big-cta,
.row,
.tips,
.dock__tile,
.dock__note-choice,
.tempo__toggle,
.board-head-action,
.flow__card,
.hero__open,
.diary__add,
.chat__suggestion,
.phase__pick,
.pin-login__key,
.job-docs__item,
.wc-docs__item {
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.glass-btn:active,
.big-cta:active,
.row:active,
.tips:active,
.dock__tile:active,
.dock__note-choice:active,
.tempo__toggle:active,
.tempo__phasebtn:active,
.board-head-action:active,
.flow__card:active,
.hero__open:active,
.diary__add:active,
.chat__suggestion:active,
.phase__pick:active {
    transform: scale(0.985);
}

/* Cards: a faint top light and a real shadow, so surfaces stack instead of floating flat. */
.row,
.tips,
.tempo,
.glass-card,
.wc-docs,
.job-docs,
.qrscan__footer,
.topsheet,
.sheet:not(.sheet--full) {
    background-image: var(--card);
    box-shadow: var(--elev-1);
}

.row {
    background-color: transparent;
}

.hero__card {
    box-shadow: var(--elev-2), 0 0 0 1px rgba(28, 214, 133, 0.12), 0 0 48px rgba(28, 214, 133, 0.12);
}

.dock,
.diary__addbar {
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.42);
}

.fab {
    box-shadow: 0 14px 34px rgba(28, 214, 133, 0.35), 0 2px 0 rgba(255, 255, 255, 0.18) inset;
}

.big-cta {
    box-shadow: 0 12px 30px rgba(28, 214, 133, 0.28), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* Section labels breathe a little more; headings sit tighter. */
.label,
.glass-card-header .label {
    letter-spacing: 0.12em;
}

.job__machine {
    letter-spacing: -0.025em;
    text-shadow: 0 2px 24px rgba(28, 214, 133, 0.12);
}

/* Notices (empty states, unavailable documents): a dashed, quiet card instead of bare text. */
.notice {
    margin: 0.5rem 0;
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}

.notice__title {
    color: var(--text-primary);
    letter-spacing: 0.08em;
}

.notice__text {
    color: var(--text-secondary);
}

/* The diary: nodes with a bezel, photos with depth, and a nudge card when the timeline holds
   nothing but the lifecycle yet. */
.diary__node {
    box-shadow: 0 0 0 0.22rem rgba(12, 16, 20, 1), 0 0 0 0.3rem rgba(255, 255, 255, 0.08);
}

.diary__shot img {
    box-shadow: var(--elev-1);
}

.diary__nudge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    margin: 0.4rem 0 0 3.6rem;
    padding: 0.85rem 0.95rem;
    border: 1px dashed rgba(28, 214, 133, 0.35);
    border-radius: 16px;
    background: rgba(28, 214, 133, 0.05);
}

.diary__nudge-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--primary);
}

.diary__nudge b {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
}

.diary__nudge small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Chat: the person's bubble in the brand gradient, the assistant's on glass, both with a lift. */
.msg--user {
    background: linear-gradient(160deg, rgba(28, 214, 133, 0.28), rgba(28, 214, 133, 0.12));
    border-color: rgba(28, 214, 133, 0.4);
    box-shadow: 0 8px 22px rgba(28, 214, 133, 0.14);
}

.msg--bot {
    background-image: var(--card);
    box-shadow: var(--elev-1);
}

.composer {
    background: rgba(8, 11, 15, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Login keys: a faint top light, like real keys. The enter key keeps its own green
   face: this rule shares its specificity and would otherwise paint over it. */
.pin-login__key:not(.pin-login__key--enter) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Skeletons: the page's own shapes, unlit, shimmering once a second until the data lands. */
.skeleton {
    display: grid;
    gap: 0.6rem;
    padding: 1.1rem 1rem;
}

.skeleton__bar,
.skeleton__pill,
.skeleton__card {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.11) 40%, rgba(255, 255, 255, 0.05) 80%);
    background-size: 240% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton__bar--xs { height: 0.6rem; }
.skeleton__bar--sm { height: 0.85rem; }
.skeleton__bar--md { height: 1rem; }
.skeleton__bar--lg { height: 1.5rem; }
.skeleton__bar--xl { height: 2.2rem; border-radius: 10px; }

.skeleton__pill {
    width: 5.5rem;
    height: 2.4rem;
    border-radius: 999px;
}

.skeleton__chips {
    display: flex;
    gap: 0.5rem;
    margin: 0.2rem 0 0.4rem;
}

.skeleton__card {
    height: 5.5rem;
    border-radius: 16px;
}

.skeleton__card--tall {
    height: 9rem;
}

.skeleton__hero {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.skeleton__row {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.skeleton__gutter {
    display: block;
    padding-top: 0.2rem;
}

.skeleton__body {
    display: grid;
    gap: 0.45rem;
}

@keyframes skeleton-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton__bar,
    .skeleton__pill,
    .skeleton__card {
        animation: none;
    }

    .glass-btn:active,
    .big-cta:active,
    .row:active,
    .tips:active,
    .dock__tile:active,
    .dock__note-choice:active,
    .tempo__toggle:active,
    .tempo__phasebtn:active,
    .board-head-action:active,
    .flow__card:active,
    .hero__open:active,
    .diary__add:active,
    .chat__suggestion:active,
    .phase__pick:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------- calendar lens */

.calendar {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.calendar__nav {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
}

.calendar__month {
    flex: 1 1 auto;
    min-height: 2.6rem;
    border: 0;
    background: none;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: capitalize;
}

.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.calendar__weekday {
    padding-bottom: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--text-muted);
}

.calendar__day {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.2rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.15rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card, var(--surface));
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.calendar__day.is-outside {
    opacity: 0.38;
}

.calendar__day.is-today .calendar__num {
    color: var(--primary);
    font-weight: 800;
}

.calendar__day.is-selected {
    border-color: rgba(28, 214, 133, 0.55);
    background: rgba(28, 214, 133, 0.1);
    box-shadow: 0 0 0 3px rgba(28, 214, 133, 0.12);
}

.calendar__num {
    font-size: 0.86rem;
    font-weight: 650;
}

.calendar__dots,
.calendar__legend {
    display: flex;
    gap: 0.22rem;
}

.calendar__dots i,
.calendar__legend i {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--text-muted);
}

.calendar__dots i.is-open,
.calendar__legend i.is-open {
    background: var(--primary);
}

.calendar__dots i.is-late,
.calendar__legend i.is-late {
    background: var(--danger);
}

.calendar__dots i.is-planned,
.calendar__legend i.is-planned {
    background: var(--st-pending);
}

.calendar__dots i.is-closed,
.calendar__legend i.is-closed {
    background: rgba(255, 255, 255, 0.32);
}

.calendar__count {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-muted);
}

.calendar__legend {
    gap: 0.9rem;
    flex-wrap: wrap;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.calendar__legend i {
    margin-right: 0.3rem;
    vertical-align: 0.05em;
}

.calendar__agenda {
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- desktop layout */

/* On a wide screen the phone column would float in a corner. Every scrolling surface keeps
   its own scrollbar and centres a reading column instead; bars, dock and sheets follow it. */
@media (min-width: 64rem) {
    :root {
        --desk-column: 58rem;
        --desk-gutter: max(1.5rem, calc((100% - var(--desk-column)) / 2));
    }

    .board,
    .detail,
    .diary,
    .form,
    .chat__scroll,
    .composer,
    .chat__suggestions--dock,
    .document-page,
    .actionbar {
        padding-left: var(--desk-gutter);
        padding-right: var(--desk-gutter);
    }

    .topbar {
        padding-left: var(--desk-gutter);
        padding-right: var(--desk-gutter);
    }

    .dock {
        max-width: 40rem;
        bottom: 1.25rem;
    }

    .fab {
        right: calc(var(--desk-gutter) + 0.25rem);
        bottom: 1.75rem;
    }

    .tonow {
        bottom: 1.75rem;
    }

    /* Sheets become centred modals: no thumb reaches the bottom edge of a monitor. */
    .sheetback {
        align-items: center;
        padding: 2rem 1rem;
    }

    .sheet {
        max-width: 36rem;
        max-height: min(88dvh, 52rem);
        margin-bottom: 0;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--border-strong);
        border-radius: 20px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    }

    .sheet--full {
        max-width: 44rem;
        max-height: min(92dvh, 60rem);
    }

    .sheet__handle {
        display: none;
    }

    .topsheet {
        max-width: 36rem;
        margin-inline: auto;
        border-radius: 0 0 20px 20px;
    }

    /* Room to breathe: two columns of documents, a taller calendar, wider chips. */
    .job-docs__list,
    .wc-docs__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .calendar__day {
        min-height: 4.6rem;
    }

    .calendar__num {
        font-size: 0.95rem;
    }

    .phase__picks,
    .chat__suggestions--dock {
        gap: 0.55rem;
    }

    .pin-login {
        max-width: 26rem;
        margin-inline: auto;
    }

    /* Hover exists here: cards and rows lift a little under the pointer. */
    .row:hover,
    .flow__card:hover,
    .hero__open:hover,
    .calendar__day:hover {
        border-color: var(--border-strong);
    }
}

/* ------------------------------------------------------- the assistant's corner */

/*
  The assistant answers from the corner opposite "Nuova": a rounded button in dark glass
  and the assistant's azure. Two mint objects would compete; one does not. Two classes on the
  selector: the shared design system also positions .fab, and it loads after this file.
*/
.fab.fab--assistant {
    right: auto;
    left: max(1rem, var(--safe-left));
    border-radius: 1.1rem;
    border: 1px solid rgba(91, 174, 255, 0.42);
    /* Fallback first: engines without color-mix (iOS <= 16.1) get --bg-0 at the same weight. */
    background: rgba(12, 16, 20, 0.82);
    background: color-mix(in srgb, var(--bg-0) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #9fd7ff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.fab--assistant .fab__icon {
    background: none;
    box-shadow: none;
}

/* The plus turns a quarter under the thumb; sparkles have no such trick to play. */
.fab--assistant:hover .fab__icon svg,
.fab--assistant:active .fab__icon svg {
    transform: none;
}

@media (hover: hover) {
    .fab--assistant:hover {
        border-color: rgba(91, 174, 255, 0.62);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    }
}

.fab--assistant:active {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.fab--assistant:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Two labelled pills do not fit a narrow phone: the assistant keeps the icon, and its
   name stays in the accessible label. The same guard at the large-text width (x1.2). */
@media (max-width: 23.5rem) {
    .fab--assistant {
        gap: 0;
        padding: 0.28rem;
    }

    .fab--assistant .fab__label {
        display: none;
    }
}

@media (max-width: 28.2rem) {
    html.text-lg .fab--assistant {
        gap: 0;
        padding: 0.28rem;
    }

    html.text-lg .fab--assistant .fab__label {
        display: none;
    }
}

@media (min-width: 64rem) {
    .fab.fab--assistant {
        right: auto;
        left: calc(var(--desk-gutter) + 0.25rem);
    }
}

/* Calendar widths: the segmented switch, the week's seven lists, the year's twelve cards. */
.calendar__scopes {
    margin-bottom: 0.1rem;
}

.calendar__week {
    display: grid;
    gap: 0.6rem;
}

.calendar__wday {
    padding: 0.5rem 0.65rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card, var(--surface));
}

.calendar__wday.is-today {
    border-color: rgba(28, 214, 133, 0.4);
}

.calendar__wdayhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
}

.calendar__wdayhead button {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    text-transform: capitalize;
}

.calendar__wdayhead button b {
    font-size: 1.05rem;
    color: var(--text-primary);
}

.calendar__wday.is-today .calendar__wdayhead button b {
    color: var(--primary);
}

.calendar__wdaycount {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.calendar__year {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.calendar__monthcard {
    display: grid;
    justify-items: start;
    gap: 0.3rem;
    min-height: 5rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card, var(--surface));
    color: var(--text-primary);
    text-align: left;
}

.calendar__monthcard b {
    font-size: 0.86rem;
    text-transform: capitalize;
}

.calendar__monthcard small {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.calendar__monthcard small.is-quiet {
    color: var(--text-muted);
}

.calendar__monthcard.is-today {
    border-color: rgba(28, 214, 133, 0.45);
    background: rgba(28, 214, 133, 0.08);
}

@media (min-width: 64rem) {
    .calendar__year {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The day's detail under a long press or a hovering mouse: a card floating over the grid. */
.calendar__grid {
    overflow: visible;
}

.calendar__day.is-peeking {
    z-index: 6;
    border-color: rgba(28, 214, 133, 0.55);
}

.calendar__peek {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 50%;
    z-index: 7;
    display: grid;
    gap: 0.3rem;
    width: 15rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg-1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-size: 0.74rem;
    line-height: 1.35;
    text-align: left;
    transform: translateX(-50%);
    pointer-events: none;
}

.calendar__day:nth-child(7n + 8) .calendar__peek,
.calendar__day:nth-child(7n + 9) .calendar__peek {
    left: 0;
    transform: none;
}

.calendar__day:nth-child(7n + 13) .calendar__peek,
.calendar__day:nth-child(7n + 14) .calendar__peek {
    left: auto;
    right: 0;
    transform: none;
}

.calendar__peek b {
    font-size: 0.74rem;
    text-transform: capitalize;
}

.calendar__peek small {
    color: var(--text-muted);
}

.calendar__peekrow {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.calendar__peekrow i {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--st-pending);
}

.calendar__peekrow i.is-open { background: var(--primary); }
.calendar__peekrow i.is-late { background: var(--danger); }
.calendar__peekrow i.is-closed { background: rgba(255, 255, 255, 0.32); }

.calendar__peekrow em {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-style: normal;
    color: var(--text-muted);
}

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

/* Long press must not select text or open the browser's own menu on the day. */
.calendar__day {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Top-bar icons are circles: never stretched by the bar, never squeezed by a long name. */
.topbar__settings,
.topbar__admin {
    flex: none;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
}

/* Five head icons on a phone, the 17 px Max class included: smaller squares, so the page
   title keeps its word. */
@media (max-width: 27.5rem) {
    .shift__actions {
        gap: 0.35rem;
    }

    .board-head-action {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.75rem;
    }

    .board-head-action svg {
        width: 1rem;
        height: 1rem;
    }
}

/* ---------------------------------------------------------------- notifications inbox */

/* The bell in the bar: a circle like the gear, a badge like the chat's. */
.topbar__bell {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.topbar__bell.has-unread {
    color: #f2d79f;
}

.topbar__bell:active {
    border-color: var(--border);
    background: var(--surface-2);
}

.topbar__bell-count {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    display: grid;
    place-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.24rem;
    border: 2px solid var(--bg-0);
    border-radius: 999px;
    background: #f2c56b;
    color: #241a05;
    font-size: 0.6rem;
    font-weight: 750;
    line-height: 1;
}

.inbox__list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inbox__card {
    display: block;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card, var(--surface));
    color: inherit;
    text-decoration: none;
}

a.inbox__card:active {
    border-color: var(--border-strong);
}

.inbox__item.is-new .inbox__card {
    border-color: rgba(242, 197, 107, 0.45);
    background: rgba(242, 197, 107, 0.06);
}

.inbox__item.is-opened .inbox__card {
    opacity: 0.75;
}

.inbox__body {
    display: grid;
    gap: 0.3rem;
}

.inbox__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.inbox__head b {
    font-size: 0.95rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.inbox__head small {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.inbox__text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.inbox__state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.inbox__item.is-new .inbox__state {
    color: #f2d79f;
}

.inbox__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #f2c56b;
}

.inbox__stale {
    margin: 0.9rem 0 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- in-app push toasts */

.toasts {
    position: fixed;
    top: calc(var(--safe-top) + 4.1rem);
    left: max(0.75rem, var(--safe-left));
    right: max(0.75rem, var(--safe-right));
    z-index: 70;
    display: grid;
    gap: 0.5rem;
    max-width: 30rem;
    margin-inline: auto;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.2rem 0.25rem 0.2rem 0;
    border: 1px solid rgba(242, 197, 107, 0.45);
    border-left: 4px solid #f2c56b;
    border-radius: 14px;
    background: rgba(12, 17, 22, 0.96);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    animation: toast-in 0.25s ease;
}

@keyframes toast-in {
    from { transform: translateY(-0.6rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.toast__body {
    flex: 1 1 auto;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.6rem 0.4rem 0.6rem 0.85rem;
    border: 0;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
}

.toast__body b {
    font-size: 0.88rem;
    font-weight: 700;
}

.toast__body span {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
    }
}

/* ---------------------------------------------------------------- manual pages in the chat */

.msg__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chat-gap);
    margin-top: var(--chat-gap);
}

.msg__source {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: var(--chat-control-size);
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    border: 1px solid rgba(91, 174, 255, 0.4);
    border-radius: 999px;
    background: rgba(91, 174, 255, 0.09);
    color: var(--chat-info);
    font-size: var(--chat-meta-size);
    text-align: left;
}

.msg__source b {
    max-width: 11rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 650;
}

.msg__source small {
    flex: none;
    color: var(--text-muted);
}

.msg__source.is-open {
    border-color: rgba(91, 174, 255, 0.7);
    background: rgba(91, 174, 255, 0.18);
}

/* Reply choices send the selected scope while keeping the composer's unfinished question. */
.msg__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chat-gap);
    margin-top: var(--chat-gap);
}

.msg__suggestion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--chat-control-size);
    max-width: 100%;
    padding: .375rem .75rem;
    border: 1px solid rgba(28, 214, 133, 0.35);
    border-radius: 999px;
    background: rgba(28, 214, 133, 0.08);
    color: var(--primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.msg__suggestion:hover:not(:disabled),
.msg__suggestion:active:not(:disabled) {
    border-color: var(--primary);
    background: rgba(28, 214, 133, 0.15);
}

.msg__suggestion:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.msg__suggestion:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Rich replies keep the same outer alignment as prose; tables scroll within the bubble. */
.msg--wide {
    max-width: 86%;
}

/* Interactive answers follow the same width limit as prose, including forms and choices.
   Actual tables retain their own horizontally scrollable layout. */
.msg--wide:has(> .assistant-widget):not(:has(> .view)) {
    width: fit-content;
    max-width: min(86%, calc(40rem + 1.7rem + 2px));
}

.msg--wide:has(> .assistant-widget .assistant-widget__form):not(:has(> .view)) {
    max-width: min(86%, calc(32rem + 1.7rem + 2px));
}

.msg--wide:has(> .assistant-widget .assistant-widget__choices):not(:has(> .view)) {
    max-width: min(86%, calc(28rem + 1.7rem + 2px));
}

.chat .msg--wide:has(> .assistant-widget):not(:has(> .view)) > .assistant-widget {
    max-width: 100%;
    margin-block: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.msg--wide:has(> .assistant-widget):not(:has(> .view)) > .assistant-widget:not(:first-child) {
    margin-top: var(--chat-gap);
}

.view {
    margin-top: var(--chat-gap);
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--chat-radius);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
    box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.85);
}

.view__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--chat-gap);
    padding: 0.55rem 0.8rem 0.45rem;
    border-bottom: 1px solid var(--border);
}

.view__title {
    min-width: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: var(--chat-text-size);
    letter-spacing: normal;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}

.view__count,
.view__pos {
    flex: none;
    font-family: inherit;
    font-size: var(--chat-meta-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

.view__pos {
    color: var(--text-secondary);
}

.view__summary {
    margin: 0;
    padding: 0.5rem 0.8rem 0;
    font-size: var(--chat-text-size);
    color: var(--text-secondary);
    line-height: var(--chat-line-height);
}

.view__rows {
    display: grid;
    transition: opacity 0.18s ease;
}

.view__table {
    min-width: 0;
    transition: opacity 0.18s ease;
}

/* The generated table uses the chat's Markdown table surface: it scrolls inside the widget,
   while the conversation and the pager stay fixed at the phone width. */
.view__table > .md-table {
    margin: 0;
}

.view.is-loading :is(.view__rows, .view__table) {
    opacity: 0.45;
}

.view__row {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

.view__row:last-child {
    border-bottom: 0;
}

.view__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}

.view__rowtitle {
    font-size: var(--chat-text-size);
    font-weight: 600;
    line-height: var(--chat-line-height);
    overflow-wrap: anywhere;
}

.view__subtitle {
    font-family: inherit;
    font-size: var(--chat-meta-size);
    letter-spacing: normal;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.view__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
    gap: var(--chat-gap);
    margin-top: 0.15rem;
}

.view__fact {
    min-width: 0;
    padding: 0.45rem 0.55rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--chat-radius);
    background: var(--surface);
}

.view__fact b {
    display: block;
    font-family: inherit;
    font-size: var(--chat-text-size);
    font-weight: 600;
    line-height: var(--chat-line-height);
    font-variant-numeric: tabular-nums;
}

.view__fact small {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--chat-meta-size);
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

.view__value--danger { color: var(--chat-danger); }
.view__value--success { color: var(--primary); }
.view__value--warning { color: var(--warning); }
.view__value--secondary { color: var(--text-secondary); }
.view__value--emphasis { font-weight: 700; }

.view__caption {
    font-family: inherit;
    font-size: var(--chat-meta-size);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.view__empty {
    margin: 0;
    padding: 0.9rem 0.8rem;
    font-size: var(--chat-text-size);
    text-align: center;
    color: var(--text-secondary);
}

/* The badge colours are the server's tokens: the same reds and blues the board speaks. */
.view__badge--danger    { background: rgba(224, 81, 81, 0.16);   color: var(--chat-danger);  border-color: rgba(224, 81, 81, 0.34); }
.view__badge--info      { background: rgba(91, 174, 255, 0.14);  color: var(--chat-info);        border-color: rgba(91, 174, 255, 0.3); }
.view__badge--success   { background: rgba(28, 214, 133, 0.14);  color: var(--primary); border-color: rgba(28, 214, 133, 0.3); }
.view__badge--warning   { background: rgba(229, 179, 100, 0.16); color: var(--warning); border-color: rgba(229, 179, 100, 0.34); }
.view__badge--discovery { background: rgba(127, 86, 217, 0.16);  color: #c4b0f5;        border-color: rgba(127, 86, 217, 0.34); }

.view__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .25rem 0 0;
    border-top: 1px solid var(--border);
}

/* Both result pagers keep a 44px target and the same quiet appearance. */
.view__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--chat-touch-size);
    height: var(--chat-touch-size);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
}

.view__nav:disabled {
    opacity: 0.32;
}

.view__pos { flex: 0 1 auto; min-width: 0; font-size: var(--chat-text-size); white-space: normal; text-align: center; }
.view__nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) {
    .view__nav:not(:disabled):hover { background: var(--surface-2); }
}

.view__nav:not(:disabled):active {
    border-color: rgba(28, 214, 133, 0.4);
    background: var(--accent-soft);
}

.view__error {
    margin: 0;
    padding: 0.4rem 0.8rem 0.6rem;
    font-size: var(--chat-meta-size);
    color: var(--chat-danger);
}

.msg__page {
    flex-basis: 100%;
    display: grid;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.msg__page .pdf-page-viewer {
    height: 22rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.msg__page .pdf-page-viewer__toolbar {
    gap: 0.3rem;
    padding: 0.2rem 0.35rem;
}

.msg__page .pdf-page-viewer__controls {
    gap: 0.2rem;
}

/* A wiki source opens as text, not as a page: the wiki lives behind the admin console and has
   no route the operator can follow, so the compiled page is shown where the PDF would be. */
/* A ```mermaid block: the source until the engine draws it, then the SVG. It scrolls inside its
   own box, because a wide diagram must never make the chat itself scroll sideways. */
pre.mermaid {
    margin: 0.6rem 0;
    padding: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--chat-radius);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--chat-meta-size);
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre;
}

/* A ```chart block shares the diagram frame. Until drawn it shows its JSON spec, small and
   honest; drawn, it holds a canvas at a fixed height, since Chart.js sizes to its box. */
pre.chart {
    margin: 0.6rem 0;
    padding: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--chat-radius);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--chat-meta-size);
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-wrap;
}

pre.chart[data-rendered="true"] {
    height: 15rem;
    padding: 0.6rem 0.5rem 0.4rem;
    overflow: hidden;
    cursor: zoom-in;
}

pre.chart[data-rendered="true"] canvas {
    display: block;
}

pre.chart[data-rendered="true"]:focus-visible {
    outline: 2px solid var(--st-pending);
    outline-offset: 2px;
}

pre.chart[data-rendered="failed"] {
    border-color: rgba(229, 179, 100, 0.34);
}

/* Drawn: the frame stays, the monospace source styling goes. */
pre.mermaid[data-rendered="true"] {
    padding: 0.9rem 0.75rem;
    text-align: center;
    white-space: normal;
}

pre.mermaid[data-rendered="true"] svg {
    max-width: 100%;
    height: auto;
}

/* Mermaid's SVG uses class names the design system already owns - .label, .node, .cluster - so
   the uppercase micro-label styling of quindi.css leaks into diagram text. Reset only the two
   properties mermaid never sets itself; its own <style> inside the SVG wins on all the rest. */
pre.mermaid svg,
pre.mermaid svg *,
.svgzoom svg,
.svgzoom svg * {
    text-transform: none;
    letter-spacing: normal;
}

/* Drawn diagrams open full screen: say so, and give the tap a target worth hitting. */
pre.mermaid[data-rendered="true"] {
    cursor: zoom-in;
}

pre.mermaid[data-rendered="true"]:focus-visible {
    outline: 2px solid var(--st-pending);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- the diagram zoom viewer */

.svgzoom {
    position: fixed;
    inset: 0;
    width: 100vw;
    /* dvh, like the photo lightbox: an overlay covers the viewport exactly as it stands. */
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(7, 10, 14, 0.96);
    color: var(--text-primary);
}

.svgzoom::backdrop {
    background: rgba(5, 8, 11, 0.6);
}

.svgzoom__stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    /* The gestures are ours: the browser must not steal them for scrolling or its own pinch. */
    touch-action: none;
    cursor: grab;
}

.svgzoom.is-zoomed .svgzoom__stage {
    cursor: grabbing;
}

.svgzoom__canvas {
    width: min(94vw, 1200px);
    height: min(74dvh, 900px);
    transform-origin: center center;
    will-change: transform;
}

.svgzoom__canvas svg,
.svgzoom__canvas canvas,
.svgzoom__canvas img {
    display: block;
    width: 100%;
    height: 100%;
}

.svgzoom__canvas img {
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.svgzoom__close {
    position: absolute;
    top: calc(var(--safe-top) + 0.75rem);
    right: calc(max(0.75rem, var(--safe-right)));
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: rgba(12, 16, 20, 0.8);
    color: var(--text-primary);
    cursor: pointer;
}

.svgzoom__hint {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 1rem);
    transform: translateX(-50%);
    margin: 0;
    padding: 0 1rem;
    max-width: 90vw;
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Once the reader is zoomed in they have worked out the gesture; the hint stops repeating it. */
.svgzoom.is-zoomed .svgzoom__hint {
    opacity: 0;
}

/* The engine could not load or the model wrote invalid syntax: the source is the fallback, and
   the warm border says so without an error banner shouting over the answer. */
pre.mermaid[data-rendered="failed"] {
    border-color: rgba(229, 179, 100, 0.34);
}
/* Deleting the conversation: present but quiet. It sits in the chat's own context block rather
   than the top bar, because it acts on what is below it, and it stays muted until touched -
   a destructive action should be findable, not tempting. */
/* The conversation's one action, on the bar so it is reachable from any depth of the chat.
   Quiet until touched: a destructive action should be findable, not tempting. */
.chat__wipe {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--chat-control-size);
    height: var(--chat-control-size);
    margin-left: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.chat__wipe:hover,
.chat__wipe:focus-visible {
    border-color: rgba(224, 81, 81, 0.42);
    background: rgba(224, 81, 81, 0.08);
    color: #f08a8a;
}

.chat__wipe:disabled {
    opacity: 0.35;
    cursor: default;
}

.msg__wiki {
    max-height: 22rem;
    padding: 0.85rem 0.95rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The photo the page was compiled from, above its text. Capped in height so a portrait shot
   cannot push the answer off screen, and it keeps the chat's own rounding. */
.msg__wiki-photo {
    display: block;
    width: 100%;
    max-height: 15rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    object-fit: contain;
    background: var(--bg-0);
}

.msg__wiki .msg__text {
    margin: 0;
    font-size: var(--chat-text-size);
}

.msg__page-open {
    justify-self: end;
    font-size: var(--chat-meta-size);
    font-weight: 600;
    color: var(--chat-info);
}

.msg__map {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: var(--chat-meta-size);
    font-weight: 600;
    color: var(--primary);
}

.composer__icon.is-busy {
    opacity: 0.7;
}

/* ---------------------------------------------------------------- dynamic dashboard widgets */

/* A separate lens, not a second dashboard pasted above the shift. The header explains the
   composition once; each widget below is an operational instrument with one clear job. */
.widget-dashboard {
    display: grid;
    gap: 1rem;
    padding: 0.2rem 0 1.4rem;
}

.widget-dashboard__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.2rem 0 0.9rem;
    border-bottom: 1px solid var(--border);
}

.widget-dashboard__title {
    min-width: 0;
}

.widget-dashboard__title h2 {
    margin: 0.16rem 0 0;
    font-size: 1.12rem;
    line-height: 1.2;
}

.widget-dashboard__title p {
    margin: 0.3rem 0 0;
    max-width: 38rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.widget-dashboard__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(28, 214, 133, 0.34);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.widget-dashboard__edit:disabled {
    opacity: 0.45;
}

.dashboard-widget-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.dashboard-widget-slot {
    grid-column: 1 / -1;
    min-width: 0;
    animation: dashboard-widget-in 0.22s ease both;
}

@keyframes dashboard-widget-in {
    from { opacity: 0; transform: translateY(0.45rem); }
    to { opacity: 1; transform: none; }
}

.dashboard-widget {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.8rem;
    height: 100%;
    min-height: 10.5rem;
    padding: 0.9rem 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 56%),
        var(--surface);
}

.dashboard-widget::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--primary);
    opacity: 0.7;
}

.dashboard-widget--attention::before {
    background: var(--danger);
}

.dashboard-widget--next::before {
    background: var(--st-pending);
}

.dashboard-widget--actions::before {
    background: var(--warning);
}

.dashboard-widget__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.1rem 0.65rem;
}

.dashboard-widget__eyebrow {
    grid-column: 1;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-widget__head h3 {
    grid-column: 1;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.2;
}

.dashboard-widget__value,
.dashboard-widget__lamp,
.dashboard-widget__headicon {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.dashboard-widget__value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.65rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dashboard-widget--attention .dashboard-widget__value {
    color: var(--danger);
}

.dashboard-widget__headicon {
    color: #9fd7ff;
}

.dashboard-widget__lamp {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(28, 214, 133, 0.55);
}

.dashboard-widget__lamp.is-paused {
    background: var(--warning);
    box-shadow: 0 0 10px rgba(229, 179, 100, 0.5);
}

.dashboard-widget__progress {
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.dashboard-widget__progress i {
    display: block;
    width: var(--widget-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    box-shadow: 0 0 12px rgba(28, 214, 133, 0.35);
    transition: width 0.28s ease;
}

.dashboard-widget__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.dashboard-widget__metrics > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0 0.65rem;
    border-left: 1px solid var(--border);
}

.dashboard-widget__metrics > span:first-child {
    padding-left: 0;
    border-left: 0;
}

.dashboard-widget__metrics b {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-widget__metrics small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget__metrics .is-alert b,
.dashboard-widget__metrics .is-alert small {
    color: #ff9d8f;
}

.dashboard-widget__foot,
.dashboard-widget__quiet p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.dashboard-widget__body,
.dashboard-widget__quiet {
    display: grid;
    align-content: center;
    gap: 0.22rem;
    min-width: 0;
}

.dashboard-widget__meta,
.dashboard-widget__detail {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-widget__headline {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-widget__time {
    color: #9fd7ff;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 650;
}

.dashboard-widget__quiet strong {
    font-size: 0.88rem;
}

.dashboard-widget__quiet--ok strong {
    color: var(--primary);
}

.dashboard-widget__open {
    align-self: end;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-widget--next .dashboard-widget__open {
    color: #9fd7ff;
}

.dashboard-widget--attention .dashboard-widget__open {
    color: #ff9d8f;
}

.dashboard-widget__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.dashboard-widget__actions > :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
}

.dashboard-widget__actions > .is-primary {
    border-color: rgba(28, 214, 133, 0.32);
    background: var(--accent-soft);
    color: var(--primary);
}

.dashboard-widget-empty {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 8rem;
    padding: 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 16px;
    color: var(--text-secondary);
}

.dashboard-widget-empty__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--primary);
    font-size: 1.35rem;
}

.dashboard-widget-empty strong {
    font-size: 0.9rem;
}

.dashboard-widget-empty p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.74rem;
}

/* The editor is a workbench. Chrome and dashed boundaries live here, never on the saved board. */
.widget-editor-sheet {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.widget-editor-sheet > .sheet__heading {
    padding-inline: 0.1rem;
}

.widget-editor {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0.1rem;
}

.widget-editor__preview {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px dashed rgba(28, 214, 133, 0.38);
    border-radius: 17px;
    background: rgba(28, 214, 133, 0.035);
}

.widget-editor__preview-head,
.widget-editor__section-head,
.widget-editor__item-head,
.widget-editor__item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.widget-editor__preview-head small {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.widget-editor__preview-surface {
    pointer-events: none;
    user-select: none;
}

.widget-editor__preview .dashboard-widget-grid {
    gap: 0.45rem;
}

.widget-editor__preview .dashboard-widget {
    min-height: 8.75rem;
}

.widget-editor__status {
    min-height: 2.1rem;
    padding: 0.5rem 0.1rem 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.widget-editor__section {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.widget-editor__section-head h3 {
    margin: 0.15rem 0 0;
    font-size: 0.96rem;
}

.widget-editor__reset,
.widget-editor__remove,
.widget-editor__move button,
.widget-editor__sizes button,
.widget-editor__available button {
    min-height: 2.75rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 650;
}

.widget-editor__reset,
.widget-editor__remove,
.widget-editor__available button {
    padding: 0 0.75rem;
    border-radius: 999px;
}

.widget-editor__list,
.widget-editor__available {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget-editor__item {
    display: grid;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    animation: dashboard-widget-in 0.18s ease both;
}

.widget-editor__index {
    flex: none;
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.widget-editor__copy {
    display: grid;
    flex: 1;
    gap: 0.12rem;
    min-width: 0;
}

.widget-editor__copy strong,
.widget-editor__available strong {
    font-size: 0.82rem;
}

.widget-editor__copy small,
.widget-editor__available small {
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.widget-editor__move,
.widget-editor__sizes {
    display: flex;
    gap: 0.35rem;
}

.widget-editor__move button {
    width: 2.75rem;
    padding: 0;
    border-radius: 10px;
    font-size: 0.9rem;
}

.widget-editor__move button:disabled {
    opacity: 0.28;
}

.widget-editor__sizes {
    flex: 1;
}

.widget-editor__sizes button {
    flex: 1;
    padding: 0 0.5rem;
    border-radius: 10px;
}

.widget-editor__sizes button.is-active {
    border-color: rgba(28, 214, 133, 0.42);
    background: var(--accent-soft);
    color: var(--primary);
}

.widget-editor__remove {
    color: #ff9d8f;
}

.widget-editor__empty {
    margin: 0;
    padding: 0.7rem 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.widget-editor__available li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.8rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}

.widget-editor__available li > span {
    display: grid;
    flex: 1;
    gap: 0.12rem;
    min-width: 0;
}

.widget-editor__available button {
    flex: none;
    border-color: rgba(28, 214, 133, 0.3);
    color: var(--primary);
}

.widget-editor__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 1rem -0.1rem 0;
    padding: 0.7rem 0 calc(0.7rem + var(--safe-bottom));
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.widget-editor__actions .glass-btn {
    min-height: 3rem;
}

@media (min-width: 42rem) {
    .dashboard-widget-slot--span-4 { grid-column: span 4; }
    .dashboard-widget-slot--span-6 { grid-column: span 6; }
    .dashboard-widget-slot--span-12 { grid-column: span 12; }
}

@media (max-width: 23rem) {
    .shift--dashboard .shift__titlerow {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .shift--dashboard .shift__titlerow h1,
    .shift--dashboard .shift__titlerow .shift__actions {
        width: 100%;
    }

    .shift--dashboard .shift__titlerow .shift__actions {
        justify-content: space-between;
    }

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

    .widget-dashboard__edit {
        width: 100%;
    }

    .dashboard-widget__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 0;
    }

    .dashboard-widget__metrics > span:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .widget-editor__item-head,
    .widget-editor__item-foot {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .widget-editor__copy {
        flex-basis: calc(100% - 7.2rem);
    }

    .widget-editor__sizes {
        flex-basis: 100%;
    }
}

@media (min-width: 64rem) {
    .widget-editor-sheet.sheet--full {
        width: min(94vw, 76rem);
        height: min(92dvh, 58rem);
        max-width: 76rem;
        padding-top: 1rem;
        border: 1px solid var(--border-strong);
        border-radius: 20px;
    }

    .widget-editor {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(21rem, 0.7fr);
        grid-auto-rows: min-content;
        gap: 0 1.2rem;
        padding-bottom: 0;
    }

    .widget-editor__preview {
        grid-column: 1;
        grid-row: 1 / span 5;
        position: sticky;
        top: 0;
    }

    .widget-editor__status,
    .widget-editor__section,
    .widget-editor__actions {
        grid-column: 2;
    }

    .widget-editor__actions {
        bottom: 0;
        margin: 1rem 0 0;
    }
}

@media (hover: hover) {
    .widget-dashboard__edit:hover,
    .dashboard-widget__actions > :is(a, button):hover,
    .widget-editor__available button:hover {
        border-color: rgba(28, 214, 133, 0.5);
        color: var(--primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-widget-slot,
    .widget-editor__item {
        animation: none;
    }

    .dashboard-widget__progress i {
        transition: none;
    }
}

/* ---------------------------------------------------------------- outbox detail sheet */

.topsheet__copy--link {
    display: grid;
    gap: 0.1rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.topsheet__more {
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--primary);
}

.outbox {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.outbox__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card, var(--surface));
}

.outbox__item.is-stuck {
    border-color: rgba(255, 93, 86, 0.45);
    background: rgba(224, 81, 81, 0.06);
}

.outbox__icon {
    font-size: 1.2rem;
    line-height: 1.6;
}

.outbox__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.outbox__body b {
    font-size: 0.9rem;
    font-weight: 650;
}

.outbox__body small {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.outbox__state {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.outbox__item.is-stuck .outbox__state {
    color: #ff9d8f;
}

.outbox__caption {
    font-style: italic;
}

.outbox__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.outbox__link,
.outbox__btn {
    min-height: 2.1rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.outbox__btn:disabled {
    opacity: 0.45;
}

.outbox__btn--danger {
    border-color: rgba(255, 93, 86, 0.4);
    color: #ff9d8f;
}

.outbox__storage {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.outbox__storage b {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- large text */
/* "Testo più grande" scales every rem, but a media query keeps reading the initial 16 px:
   on a 393 px phone the compact rules above never fire although the bar grew by an eighth
   and its trailing control slid off-screen. The same breakpoints, widened by the largest
   factor a phone reaches (the 17 px Max class becomes 19.125 px, x1.2): 27rem -> 32.4rem,
   27.5rem -> 33rem, 23.5rem -> 28.2rem, 22.5rem -> 27rem. */
@media (max-width: 32.4rem) {
    html.text-lg .topbar__operator-name {
        display: none;
    }
}

@media (max-width: 33rem) {
    html.text-lg .shift__actions {
        gap: 0.35rem;
    }

    html.text-lg .board-head-action {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.75rem;
    }

    html.text-lg .board-head-action svg {
        width: 1rem;
        height: 1rem;
    }

    /* Date and vital signs stack: side by side, the enlarged date loses its month. */
    html.text-lg .shift__summaryrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    html.text-lg .shift__stats {
        justify-content: flex-start;
        gap: 0.85rem;
    }

    html.text-lg .shift__stat {
        gap: 0.36rem;
        font-size: 0.86rem;
    }
}

@media (max-width: 28.2rem) {
    html.text-lg .topbar {
        gap: 0.55rem;
        padding-inline: 0.9rem;
    }

    html.text-lg .shell:has(.dashboard) .topbar .brand-text {
        display: none;
    }

    /* Inner screens: the assistant pill keeps its icon, so the page title keeps its word. */
    html.text-lg .topbar__tool {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    html.text-lg .topbar__tool > span {
        display: none;
    }
}

@media (max-width: 27rem) {
    html.text-lg .board {
        padding-inline: 1rem;
    }

    html.text-lg .shift__titlerow {
        gap: 0.6rem;
    }
}

/* Values decoded locally from attached photos. */
.image-codes { min-width: 0; max-width: 100%; margin-block: .6rem; font-size: .85rem; text-align: left; }
.image-codes__label { display: block; margin-bottom: .3rem; opacity: .7; font-size: .75rem; }
.image-codes__item { display: flex; flex-direction: column; gap: .15rem; margin-top: .35rem; }
.image-codes__item strong { font-size: .75rem; }
.image-codes__item code { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; font-family: monospace; }

.lightbox__meta { min-width: 0; flex-wrap: wrap; }
.lightbox__meta .image-codes { width: 100%; max-height: 25vh; overflow-y: auto; letter-spacing: normal; }

.inbox__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; padding:.5rem; }
.inbox__item { position:relative; }
.inbox__item > .inbox__actions {
    position:absolute;
    inset-inline-end:.55rem;
    bottom:.55rem;
    flex-wrap:nowrap;
    gap:.15rem;
    padding:0;
}
.inbox__item .inbox__state { min-height:2rem; padding-inline-end:4.5rem; }
.inbox__action {
    min-height:44px;
    padding:.4rem .85rem;
    border:1px solid var(--border-strong);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:var(--text-primary);
    font:inherit;
    font-size:.8rem;
    cursor:pointer;
}
.inbox__action[aria-pressed="true"] { border-color:var(--accent); }
.inbox__action:disabled { opacity:.5; cursor:default; }
.inbox__action--icon {
    display:grid;
    place-items:center;
    width:2rem;
    height:2rem;
    min-height:2rem;
    padding:0;
    border-color:transparent;
    border-radius:.5rem;
    background:transparent;
    color:var(--text-secondary);
}
.inbox__action--icon[aria-pressed="true"] { color:var(--primary); border-color:var(--primary); }
@media (hover:hover) {
    .inbox__action--icon:hover:not(:disabled) { background:rgba(255,255,255,.07); color:var(--text-primary); }
}
@media (pointer:coarse) {
    .inbox__action--icon { width:2.75rem; height:2.75rem; min-height:2.75rem; }
    .inbox__item .inbox__state { min-height:2.75rem; padding-inline-end:6rem; }
}

/* The manager chooses the conversation before composing; native select supports touch and keyboard. */
.chat__recipient {
    display: grid;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.75rem max(1rem, var(--safe-right)) 0.5rem max(1rem, var(--safe-left));
    border-bottom: 1px solid var(--border);
}
.chat__recipient label { font-size: 0.82rem; font-weight: 650; }
.chat__recipient select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-0);
    color: var(--text-primary);
    font: inherit;
}
.chat__recipient select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat__recipient > span { font-size: 0.73rem; color: var(--text-muted); }
/* Interactive chat surfaces keep the existing mint-on-graphite identity. */
.assistant-widget {
    min-width: 0;
    max-width: 100%;
    margin-block: .8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--chat-radius);
    background: rgba(255, 255, 255, .025);
    overflow-wrap: anywhere;
}
.assistant-widget__controls {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.assistant-widget__controls:disabled { opacity: .65; }
.assistant-widget__fallback { white-space: pre-wrap; margin: 0; }
.assistant-widget :is(.genui-input, .genui-select) { min-height: var(--chat-control-size); box-sizing: border-box; }
.assistant-widget .genui-button { min-height: var(--chat-control-size); white-space: normal; height: auto; }
.assistant-widget :is(.genui-input-wrapper, .genui-select-wrapper, .genui-button, .genui-col) { min-width: 0; max-width: 100%; }
.assistant-widget :is(input, select, button, summary):focus-visible {
    outline: 2px solid var(--accent, #1cd685);
    outline-offset: 3px;
}
.view > .assistant-widget { margin-block: .5rem 1rem; padding: .75rem; }