/* Vehicle page: archive → visible evidence → a saved next action. */
.machine-page { --machine-ink:#24372d; --machine-muted:#607068; --machine-line:#e2e9e4; --machine-green:#0e7a3b; --machine-amber:#945509; color:var(--machine-ink); min-width:0; }
.machine-page h1 { font-size:2.2rem; font-weight:690; letter-spacing:-.03em; line-height:1.16; }
.machine-page h2 { font-size:1.2rem; line-height:1.35; }
.machine-page h3 { font-size:1rem; }
.machine-page p { text-wrap:pretty; }
.machine-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.machine-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.machine-breadcrumb { color:var(--machine-muted); font-size:.8rem; margin-bottom:9px; }
.machine-archive { margin-top:10px; color:var(--machine-muted); font-size:.85rem; }
.machine-picker { min-width:205px; max-width:255px; width:100%; }
.machine-picker label { margin-bottom:6px; font-size:.75rem; }
.machine-picker select { background:#fff; }
.machine-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(245px,.65fr); gap:28px; align-items:center; margin-bottom:28px; }
.machine-identity { display:flex; align-items:center; gap:17px; }
.machine-identity > .machine-icon { color:#698172; width:46px; height:46px; stroke-width:1.2; }
.machine-identity p { font-size:.88rem; font-weight:550; }
.machine-identity small { display:block; font-size:.75rem; color:var(--machine-muted); max-width:51ch; margin-top:7px; line-height:1.55; }
.machine-status { display:flex; gap:14px; padding:18px 20px; border-radius:10px; min-width:0; }
.machine-status > .machine-icon { width:28px; height:28px; margin-top:1px; }
.machine-status strong { font-size:1.08rem; font-weight:650; }
.machine-status p { font-size:.8rem; margin-top:6px; line-height:1.55; }
.machine-status.is-attention { background:#fff4e5; color:#85500e; }
.machine-status.is-unknown { background:#edf2f0; color:#4e6257; }
.machine-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(275px,1fr); gap:26px; align-items:start; }
.machine-main,.machine-aside { min-width:0; }
.machine-plot-section,.machine-data,.machine-service,.machine-next,.machine-tasks { min-width:0; box-sizing:border-box; }
.machine-identity > div,.machine-status > div,.machine-chart-heading > div,.machine-explanation > div,.machine-section-title > div,.machine-data-row > div { min-width:0; overflow-wrap:anywhere; }
.machine-plot-section { background:#fff; padding:25px 25px 20px; border-radius:12px; border:1px solid var(--machine-line); }
.machine-chart-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.machine-chart-heading h2 { font-size:1.35rem; letter-spacing:-.02em; }
.machine-chart-heading p { font-size:.75rem; color:var(--machine-muted); margin-top:5px; }
.machine-range { text-align:right; flex-shrink:0; font-weight:650; font-size:.85rem; color:var(--machine-ink); }
.machine-range small { display:block; font-size:.65rem; font-weight:400; margin-top:4px; color:var(--machine-muted); }
.machine-range.is-attention { color:var(--machine-amber); }
.machine-chart-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:13px; margin-top:22px; }
.machine-chart-toggles { display:flex; flex-wrap:wrap; gap:3px; background:#f0f4f1; border-radius:7px; padding:3px; }
.machine-page .machine-toggle { border:0; border-radius:5px; background:transparent; padding:7px 9px; min-height:34px; font-size:.68rem; font-weight:550; color:#53655b; }
.machine-page .machine-toggle.is-selected { background:#fff; color:var(--machine-green); box-shadow:0 1px 3px #23352c12; }
.machine-page .machine-toggle:hover { color:var(--machine-green); background:#fff; }
.machine-chart-toolbar > select { width:auto; max-width:190px; min-height:36px; padding:7px 9px; font-size:.72rem; }
.machine-chart { min-width:0; margin-top:22px; }
.machine-chart .chart-title { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.machine-chart .chart-caption { font-size:.7rem; }
.machine-chart details { margin-top:12px; font-size:.75rem; }
.machine-chart summary { color:var(--machine-green); padding:4px 0; width:fit-content; }
.machine-window-note { font-size:.7rem; color:var(--machine-muted); margin-top:13px; }
.machine-explanation { display:flex; gap:11px; align-items:start; background:#edf6f0; padding:16px 17px; border-radius:8px; margin-top:20px; }
.machine-explanation .machine-icon { width:20px; height:20px; margin-top:1px; color:var(--machine-green); }
.machine-explanation strong { color:#195938; font-weight:650; font-size:.88rem; }
.machine-explanation p { font-size:.76rem; line-height:1.6; color:#4b6556; margin-top:5px; }
.machine-links { display:grid; grid-template-columns:1fr 1fr; margin:17px 0 30px; border-bottom:1px solid var(--machine-line); padding-bottom:17px; }
.machine-route { display:flex; align-items:center; gap:12px; color:var(--machine-green); text-decoration:none; padding:12px 5px; min-width:0; border-radius:5px; }
.machine-route:hover { background:#edf4ef; }
.machine-route > span { min-width:0; flex:1; }
.machine-route strong { display:block; font-size:.85rem; font-weight:600; }
.machine-route small { display:block; color:var(--machine-muted); font-size:.71rem; margin-top:4px; }
.machine-route > .machine-icon:last-child { width:17px; height:17px; margin-left:auto; }
.machine-links > .machine-route + .machine-route { border-left:1px solid var(--machine-line); padding-left:20px; margin-left:10px; border-radius:0; }
.machine-data { border:1px solid var(--machine-line); border-radius:10px; background:#fff; padding:8px 24px; }
.machine-data-row { display:flex; align-items:start; gap:12px; padding:16px 0; }
.machine-data-row + .machine-data-row { border-top:1px solid var(--machine-line); }
.machine-data-row .machine-icon { width:21px; height:21px; margin-top:1px; color:#436550; }
.machine-data-row strong { display:block; font-size:.85rem; font-weight:600; }
.machine-data-row span { display:block; font-size:.73rem; color:var(--machine-muted); line-height:1.55; margin-top:5px; }
.machine-next { margin-top:22px; padding:23px 0; border-top:1px solid var(--machine-line); border-bottom:1px solid var(--machine-line); }
.machine-section-title { display:flex; align-items:center; gap:12px; }
.machine-section-title h2 { font-size:1.1rem; }
.machine-section-title p { margin-top:3px; font-size:.74rem; color:var(--machine-muted); }
.machine-service-icon { object-fit:contain; flex-shrink:0; }
.machine-next-copy { font-size:.8rem; line-height:1.65; color:#526459; margin-top:15px; }
.machine-details { font-size:.77rem; margin-top:14px; }
.machine-details > summary { color:var(--machine-green); padding:6px 4px; border-radius:5px; list-style-position:inside; overflow-wrap:anywhere; }
.machine-details ol { margin:12px 0 0 18px; color:#526459; }
.machine-details li + li { margin-top:12px; }
.machine-task-form { margin-top:18px; }
.machine-task-form > summary { cursor:pointer; list-style:none; }
.machine-task-form > summary::-webkit-details-marker { display:none; }
.machine-task-form[open] > summary { background:#e6f1e9; color:#1a5c38; border-color:#bed9c7; }
.machine-task-form form { display:grid; gap:13px; padding-top:18px; }
.machine-tasks { padding-top:24px; }
.machine-count { background:#e6eee8; border-radius:4px; padding:2px 7px; font-size:.7rem; color:#3f5f4c; }
.machine-task-list { list-style:none; margin-top:8px; }
.machine-task-list li { padding:16px 0; border-bottom:1px solid var(--machine-line); }
.machine-task-list strong { display:block; font-size:.8rem; font-weight:550; line-height:1.55; margin-top:7px; }
.machine-task-list small { display:block; font-size:.69rem; color:var(--machine-muted); line-height:1.6; margin-top:6px; }
.machine-task-state { font-size:.67rem; color:#655f44; }
.machine-task-state.state-done { color:#0e6b35; }
.machine-task-state.state-in_progress { color:#236a8f; }
.machine-tasks > .machine-route { padding-top:16px; }
.machine-tasks > .machine-route > .machine-icon:first-child { display:none; }
.machine-empty { font-size:.8rem; line-height:1.6; color:var(--machine-muted); padding-top:16px; }
.machine-service { padding:24px; border:1px solid var(--machine-line); border-radius:12px; background:#fff; }
.machine-service > div,.machine-service-heading > div,.machine-service-details,.machine-service-form,.machine-form-grid,.machine-form-footer,.machine-task-form,.machine-task-form form { min-width:0; max-width:100%; }
.machine-service-heading > div,.machine-service-saved,.machine-task-list,.machine-next-copy { overflow-wrap:anywhere; }
.machine-service-heading { display:flex; gap:16px; align-items:center; }
.machine-service-heading p { font-size:.89rem; margin-top:5px; }
.machine-service-heading small { display:block; color:var(--machine-muted); font-size:.74rem; line-height:1.5; margin-top:4px; }
.machine-service-saved p { font-size:.8rem; line-height:1.6; margin-top:16px; color:#345842; }
.machine-service-details { margin-top:20px; }
.machine-service-details > summary { color:var(--machine-green); font-size:.8rem; font-weight:600; cursor:pointer; width:fit-content; max-width:100%; padding:6px 4px; border-radius:5px; list-style-position:inside; overflow-wrap:anywhere; }
.machine-service-form { margin-top:18px; display:grid; gap:17px; }
.machine-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px; }
.machine-form-grid > :last-child { grid-column:1/-1; }
.machine-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:.77rem; }
.machine-field > span { font-weight:550; overflow-wrap:anywhere; }
.machine-field small { font-size:.7rem; font-weight:400; color:var(--machine-muted); }
.machine-field input,.machine-field select,.machine-field textarea { box-sizing:border-box; width:100%; max-width:100%; min-width:0; font-size:.8rem; background:#fff; }
.machine-field textarea { min-height:78px; }
.machine-form-footer { display:flex; align-items:center; flex-wrap:wrap; gap:13px; }
.machine-form-footer > .btn,.machine-task-form > summary { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.machine-service :is(input,select,textarea,button,summary):focus-visible,.machine-task-form :is(input,select,textarea,button,summary):focus-visible,.machine-details > summary:focus-visible { outline:3px solid var(--machine-green); outline-offset:3px; }
.machine-form-message { color:#0e6b35; font-size:.75rem; line-height:1.6; overflow-wrap:anywhere; }
.machine-form-message:empty { display:none; }
.machine-form-message.is-error { color:#963d24; }
.machine-after { display:flex; align-items:center; gap:20px; justify-content:space-between; margin-top:25px; }
.machine-after h2 { font-size:1rem; }
.machine-after p { color:var(--machine-muted); font-size:.75rem; margin-top:6px; line-height:1.6; }
.machine-after .machine-route { flex-shrink:0; }
.machine-after .machine-route > .machine-icon:first-child { display:none; }
.machine-after .machine-route strong { font-size:.75rem; }
.machine-footnote { margin-top:36px; font-size:.69rem; color:var(--machine-muted); }
.machine-loading { padding:30px; background:white; border-radius:12px; }
.machine-loading p { color:var(--machine-muted); font-size:.8rem; margin-top:18px; }
.machine-error { padding:24px; background:#fff2e7; border-radius:10px; }
.machine-error p { margin:12px 0 18px; }
.machine-inline-error { font-size:.8rem; color:#8b4521; margin-top:15px; }
.machine-inline-error + button,.machine-inline-error button { margin-top:12px; }
.machine-page .btn { font-size:.78rem; }
@media (min-width:1450px) { .machine-layout { grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr); gap:32px; } .machine-plot-section { padding:28px; } }
@media (max-width:1150px) { .machine-layout { grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); gap:20px; } .machine-plot-section { padding:19px 17px; } .machine-chart-heading { flex-direction:column; } .machine-range { display:flex; align-items:center; gap:8px; } .machine-range small { margin:0; } .machine-overview { grid-template-columns:1fr 1fr; gap:20px; } .machine-status { padding:16px; } .machine-status strong { font-size:.95rem; } .machine-after { display:block; } .machine-after .machine-route { margin-top:10px; } .machine-identity > .machine-icon { display:none; } .machine-links { grid-template-columns:1fr; } .machine-links > .machine-route + .machine-route { border-left:0; padding-left:5px; margin-left:0; } }
@media (max-width:960px) { .machine-layout { grid-template-columns:1fr; } .machine-aside { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; } .machine-next { margin-top:0; padding:0; border:0; } .machine-tasks { grid-column:1/-1; padding-top:4px; } .machine-chart-heading { flex-direction:row; } .machine-range { display:block; } .machine-range small { margin-top:5px; } .machine-links { grid-template-columns:1fr 1fr; } .machine-links > .machine-route + .machine-route { border-left:1px solid var(--machine-line); padding-left:20px; margin-left:10px; } .machine-heading { align-items:start; } .machine-page h1 { font-size:1.8rem; } .machine-picker { max-width:220px; min-width:180px; } .machine-overview { grid-template-columns:1fr; gap:18px; } .machine-identity > .machine-icon { display:block; width:32px; height:32px; } }
@media (max-width:560px) { .machine-heading { flex-direction:column; gap:19px; margin-bottom:21px; } .machine-picker { max-width:none; } .machine-page h1 { font-size:1.85rem; } .machine-archive { font-size:.76rem; } .machine-breadcrumb { font-size:.72rem; } .machine-overview { gap:16px; margin-bottom:22px; } .machine-status { padding:16px; } .machine-status strong { font-size:1rem; } .machine-identity { gap:12px; } .machine-identity p { font-size:.8rem; } .machine-identity small { font-size:.71rem; } .machine-chart-heading { flex-direction:column; } .machine-chart-heading h2 { font-size:1.2rem; } .machine-range { display:flex; } .machine-range small { margin-top:0; } .machine-plot-section { padding:18px; } .machine-service { padding:18px; } .machine-data { padding:8px 18px; } .machine-chart-toolbar { gap:12px; margin-top:18px; } .machine-chart-toggles { width:100%; } .machine-page .machine-toggle { flex:1; padding-inline:6px; font-size:.65rem; } .machine-chart-toolbar > select { max-width:none; width:100%; } .machine-chart { margin-top:15px; } .machine-explanation { padding:14px 12px; gap:9px; } .machine-explanation strong { font-size:.82rem; } .machine-explanation p { font-size:.72rem; } .machine-links { grid-template-columns:1fr; margin-bottom:25px; } .machine-links > .machine-route + .machine-route { border-left:0; padding-left:5px; margin-left:0; } .machine-aside { grid-template-columns:1fr; gap:25px; } .machine-next { padding:0 0 24px; border-bottom:1px solid var(--machine-line); } .machine-service-heading { gap:12px; } .machine-service-heading > img { width:64px; height:64px; } .machine-form-grid { grid-template-columns:minmax(0,1fr); } .machine-form-grid > :last-child { grid-column:auto; } .machine-form-footer { align-items:start; flex-direction:column; } .machine-form-footer .btn { width:100%; } .machine-after { margin-bottom:6px; } .machine-footnote { margin-top:24px; } }
@media (prefers-reduced-motion:reduce) { .machine-page *, .machine-page *::before,.machine-page *::after { transition:none!important; scroll-behavior:auto!important; } }
@media print { .machine-picker,.machine-chart-toolbar,.machine-task-form,.machine-service-details,.machine-links,.machine-after { display:none; } .machine-layout { grid-template-columns:1fr; } .machine-aside { display:block; } .machine-plot-section,.machine-data { break-inside:avoid; } }
