/*
  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 {
    /* 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;
}

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

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

/* "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);
}

.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);
}

.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 {
    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;
    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);
}

.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);
    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%;
    max-width: min(100vw, 34rem);
    min-width: 0;
    padding: 0 1rem calc(2rem + env(safe-area-inset-bottom));
}

/* Room for the dock: photo, voice and close must never cover the last row. */
.detail--working {
    padding-bottom: calc(10.5rem + env(safe-area-inset-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. */
.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(28, 214, 133, 0.32);
    background: var(--accent-soft);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

/* 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: linear-gradient(175deg, rgba(28, 214, 133, 0.08), rgba(28, 214, 133, 0.02));
    box-shadow:
        0 0 1.75rem rgba(28, 214, 133, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

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

.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.01em;
    color: var(--primary);
}

.tempo__clock {
    display: block;
    min-width: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    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__details {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
}

.tempo__details:hover,
.tempo__details:focus-visible {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-primary);
}

.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) 2.75rem;
        gap: 0.65rem;
    }

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

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

    .tempo__details {
        width: 2.75rem;
        height: 2.75rem;
    }

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

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

/* 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__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);
}

.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;
    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));
}

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

.document-page__title {
    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;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
}

.document-page__canvas {
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #f4f5f7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.document-page__canvas--image {
    overflow: auto;
    display: grid;
    place-items: center;
    -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;
}

.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: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem;
    align-items: end;
    padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(8, 11, 15, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dock__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.65rem 0.4rem 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(28, 214, 133, 0.26);
    background: rgba(28, 214, 133, 0.07);
    color: inherit;
    cursor: pointer;
    transition: transform 0.1s 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-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dock__tileicon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.7rem;
    margin-bottom: 0.15rem;
    color: var(--primary);
}

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

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

/* Closing is the step that produces the report, so it wears the platform's blue, not an alarm red. */
.dock__tile--close {
    border-color: rgba(91, 174, 255, 0.3);
    background: rgba(91, 174, 255, 0.08);
}

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

/* The mic sits centre and raised, wrapped in a segmented ring that lights with the voice. */
.dock__mic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 6.6rem;
    margin-top: -1.4rem;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.dock__ring {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--level, 0) * 360deg), rgba(255, 255, 255, 0.12) 0);
    -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 75%);
    mask: radial-gradient(closest-side, transparent 74%, #000 75%);
}

/* Tick gaps painted over the ring turn the meter into segments, like a VU on a desk. */
.dock__ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(transparent 0 6deg, rgba(8, 11, 15, 0.95) 6deg 10deg);
}

.dock__micbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.15rem;
    height: 4.15rem;
    border-radius: 50%;
    background: var(--bg-1);
    border: 1px solid rgba(28, 214, 133, 0.5);
    color: var(--primary);
    box-shadow: 0 10px 26px -10px rgba(28, 214, 133, 0.45);
    transition: transform 0.1s ease, border-color 0.15s ease, color 0.15s ease;
}

.dock__mic:active .dock__micbtn {
    transform: scale(0.94);
}

.dock__mic b {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
}

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

.dock__mic.is-rec .dock__micbtn {
    border-color: rgba(224, 81, 81, 0.6);
    background: rgba(224, 81, 81, 0.1);
    color: var(--danger);
}

.dock__mic.is-rec .dock__ring {
    background: conic-gradient(var(--danger) calc(var(--level, 0) * 360deg), rgba(255, 255, 255, 0.12) 0);
}

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

.dock__mic.is-rec .dock__timer { display: inline; }
.dock__mic.is-rec .dock__word { display: none; }

/* ---------------------------------------------------------------- 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));
}

.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;
}

.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;
    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) 0.9rem 0.9rem;
    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);
}

.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: 0.6rem;
}

.lightbox__nav--next {
    right: 0.6rem;
}

@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;
    height: 2.4rem;
}

/* 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;
    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;
    font-size: 0.92rem;
    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);
}

/* 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);
}

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

.actionbar {
    z-index: 30;
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    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;
}

/* 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: 88dvh;
    overflow-y: auto;
    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;
}

.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__block {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
}

.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: 1rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3.4rem;
    padding: 0.35rem 1.3rem 0.35rem 0.4rem;
    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));
    }

    .fab {
        right: calc(50% - 17rem + 1rem);
    }
}

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

.chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.chat__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 0.75rem;
}

.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: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.chat__jobtitle {
    font-size: 0.95rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.chat__ground {
    font-size: 0.72rem;
    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: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

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

.chat__suggestions {
    display: grid;
    gap: 0.5rem;
}

.chat__suggestion {
    text-align: left;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 0.88rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

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

.msg {
    max-width: 86%;
    margin: 0.4rem 0;
    padding: 0.6rem 0.85rem;
    border-radius: 15px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.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;
}

.msg__img {
    display: block;
    max-width: 100%;
    max-height: 14rem;
    border-radius: 10px;
    margin-bottom: 0.4rem;
}

.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;
}

.msg--typing {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.85rem 0.95rem;
}

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

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

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: none; }
    30% { opacity: 1; transform: translateY(-3px); }
}

.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));
}

.composer__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.composer__icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    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__input {
    flex: 1;
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.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: 2.7rem;
    height: 2.7rem;
    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;
}

.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;
    height: 4.2rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
}

.composer__remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    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__rec {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    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 CMMS header is slightly taller than the shared default, as in the target board. */
.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: 3.95rem;
    gap: 0.82rem;
    padding: calc(env(safe-area-inset-top) + 0.8rem) 1.15rem 0.8rem;
}

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

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

.board {
    padding: 0 1.25rem calc(7.25rem + env(safe-area-inset-bottom));
}

.shift {
    padding: 1.42rem 0 0.8rem;
}

.shift__titlerow {
    align-items: flex-start;
    gap: 1rem;
}

.shift__titlecopy {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.shift__titlerow h1 {
    font-size: clamp(1.85rem, 7.6vw, 2.05rem);
    font-weight: 700;
    line-height: 1.05;
}

.chip--filters {
    flex: none;
    min-height: 3rem;
    margin-top: 0.1rem;
    padding-inline: 1rem;
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.9rem;
}

.shift__stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shift__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    margin: -0.4rem 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    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.68rem;
    height: 0.68rem;
}

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

.shift__date time {
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

.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;
    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.6rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.12em;
    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;
}

.turnline__previous > .flow__list,
.turnline__upcoming > .flow__list {
    margin-top: -0.18rem;
}

.turnline .flow__section {
    position: absolute;
    z-index: 2;
    top: -0.25rem;
    left: 0;
    min-height: 0;
    margin: 0;
    padding: 0 0 0 0.3rem;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.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: 1rem;
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
    gap: 0.42rem;
    min-height: 3.4rem;
    padding: 0.4rem 1.08rem 0.4rem 0.82rem;
    font-size: 0.98rem;
    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: normal;
    }

    .chip--filters {
        padding-inline: 0.78rem;
    }

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

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

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

@media (min-width: 34rem) {
    .fab {
        right: calc(50% - 17rem + 1rem);
    }
}

#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;
}

.pin-login {
    position: fixed;
    inset: 0;
    z-index: 10;
    grid-row: 1 / -1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: none;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem max(0.75rem, env(safe-area-inset-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;
    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);
    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;
}

.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;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    -webkit-overflow-scrolling: touch;
}

.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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.35rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #70e9a9, var(--primary));
    box-shadow: 0 0.65rem 1.6rem rgba(28, 214, 133, 0.2), inset 0 1px rgba(255, 255, 255, 0.35);
    font-weight: 750;
    color: #07120d;
}

.operator-login__confirm:disabled {
    box-shadow: none;
    cursor: default;
    opacity: 0.38;
}

.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__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__logout {
    flex: none;
}

.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:hover,
.topbar__logout:focus-visible {
    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;
    }
}

@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: max(0.4rem, env(safe-area-inset-top));
        padding-bottom: max(0.4rem, env(safe-area-inset-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.65rem;
        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__rec-dot,
    .msg--typing span,
    .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,
    .hero__open,
    .board-new,
    .focus-rollup svg {
        transition: none;
    }
}

/* ------------------------------------------------------- workcenter QR */

.dashboard {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-width: min(100vw, 34rem);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dashboard > .board {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.board-tools {
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.48rem 1.25rem 0.62rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(12, 16, 20, 0.9);
    box-shadow: 0 0.6rem 1rem rgba(5, 8, 11, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.chip--scanner {
    flex: none;
    min-height: 3rem;
    padding-inline: 1rem;
    border-color: rgba(28, 214, 133, 0.3);
    background: rgba(28, 214, 133, 0.09);
    color: var(--primary);
    font-size: 0.9rem;
}

.chip--scanner:hover,
.chip--scanner:focus-visible {
    border-color: rgba(28, 214, 133, 0.58);
    background: rgba(28, 214, 133, 0.15);
}

.board-tools .chip--filters {
    margin-top: 0;
}

.board-tools__active {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
}

.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;
    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;
    background:
        radial-gradient(circle at 50% 35%, rgba(28, 214, 133, 0.1), transparent 45%),
        #05080a;
    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%;
    border-radius: 1rem;
    box-shadow: 0 0 0 100vmax rgba(2, 5, 7, 0.48);
}

.qrscan__target::before,
.qrscan__target::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
}

.qrscan__target::before {
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.qrscan__target::after {
    background:
        linear-gradient(var(--primary), var(--primary)) left top / 1.7rem 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) left top / 2px 1.7rem no-repeat,
        linear-gradient(var(--primary), var(--primary)) right top / 1.7rem 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) right top / 2px 1.7rem no-repeat,
        linear-gradient(var(--primary), var(--primary)) left bottom / 1.7rem 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) left bottom / 2px 1.7rem no-repeat,
        linear-gradient(var(--primary), var(--primary)) right bottom / 1.7rem 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) right bottom / 2px 1.7rem no-repeat;
    filter: drop-shadow(0 0 0.35rem rgba(28, 214, 133, 0.65));
}

.qrscan__target i {
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 0.8rem;
    left: 0.8rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--primary) 80%, transparent);
    box-shadow: 0 0 0.75rem rgba(28, 214, 133, 0.9);
    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.5rem;
    padding: 1.5rem;
    background: rgba(5, 8, 11, 0.88);
    color: var(--text-primary);
    text-align: center;
}

.qrscan__state small {
    max-width: 18rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.qrscan__state button {
    min-height: 2.75rem;
    margin-top: 0.3rem;
    padding: 0 1rem;
    border: 1px solid rgba(28, 214, 133, 0.35);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--primary);
    font-weight: 700;
}

.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;
}

.qrscan__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.qrscan__copy {
    display: grid;
    min-width: 0;
    gap: 0.16rem;
}

.qrscan__copy strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.qrscan__copy small {
    font-size: 0.7rem;
    line-height: 1.4;
    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: 2.9rem;
    margin-top: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
}

.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);
    font: 0.88rem 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) {
    .board-tools {
        gap: 0.35rem;
    }

    .chip--scanner,
    .chip--filters {
        flex: 1 1 0;
        min-height: 2.75rem;
        margin-top: 0;
        padding-inline: 0.7rem;
        font-size: 0.78rem;
    }

    .qrscan-sheet {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qrscan__target i,
    .qrscan__spinner {
        animation: none;
    }
}