/* labkit.css :: shared shell for the Virtual Laboratories (Labs/)
   Desktop: bench (canvas + control bar) on the left, a fixed-width panel on
   the right with the lab sheet, results and plot tabs. Below 900px the page
   stacks and scrolls. Palette values are the house "Honey & ink" tokens copied
   as literals, because labs import no site CSS. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── Base ────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #fffaea;
    color: #34302a;
    font-family: 'Source Sans 3', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

body { overflow: hidden; }
body.lk-modal-open { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

button, input, select { font-family: inherit; }

/* ── App grid ────────────────────────────────────────────────── */
#lab-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    height: 100vh;
    width: 100vw;
}

#lab-bench {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

#canvas-container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #ffffff;
    overflow: hidden;
}

#canvas-container canvas {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    touch-action: none;
}

/* ── Accessible controls under the canvas ────────────────────── */
/* The bench is operated on the canvas. This collapsible panel repeats every
   control as buttons and sliders for keyboard users, and is the main control
   surface on phones, where the canvas has no room for the loading console. */
.lk-controls-wrap {
    flex: 0 0 auto;
    background-color: #f8f5ec;
    border-top: 1px solid #ded5bf;
}

.lk-controls-wrap > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #5d5749;
    padding: 6px 12px;
}

#lab-controls {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.2fr 0.8fr;
    gap: 6px 10px;
    padding: 0 10px 8px;
    background-color: #f8f5ec;
    max-height: 40vh;
    overflow-y: auto;
}

.lk-group {
    border: 1px solid #ded5bf;
    border-radius: 4px;
    padding: 4px 8px 6px;
    margin: 0;
    min-width: 0;
    background: #fffdf6;
}

.lk-group > legend {
    font-size: 12px;
    font-weight: 700;
    color: #8c690d;
    padding: 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 3px 0;
}

.lk-row .lk-label {
    font-size: 12px;
    font-weight: 600;
    margin-right: 2px;
}

.control-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 2px 0;
}

.control-item label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.slider {
    width: 100%;
    min-width: 60px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e6dfd0;
    border-radius: 3px;
    outline: none;
    margin: 8px 0;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4f9143;
    border: 2px solid #3c6e26;
    border-radius: 50%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4f9143;
    border: 2px solid #3c6e26;
    border-radius: 50%;
    cursor: pointer;
}

.slider:focus-visible { outline: 3px solid #a87f10; outline-offset: 4px; }

.slider-value {
    font-family: monospace;
    font-size: 12px;
    color: #5d5749;
    min-width: 58px;
    text-align: right;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.lk-btn, .mode-btn {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #34302a;
    border: 2px solid #cfc5ab;
    border-radius: 4px;
    background-color: #f0ece1;
    padding: 5px 8px;
    min-height: 30px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.lk-btn:hover, .mode-btn:hover { background-color: #f7df8b; border-color: #f2c419; }
.mode-btn.active, .mode-btn[aria-pressed="true"], .lk-btn[aria-pressed="true"] {
    background-color: #f2c419;
    border-color: #a87f10;
}

.lk-btn.primary {
    background-color: #f2c419;
    border-color: #a87f10;
}

.lk-btn.primary:hover { background-color: #d9a414; }

.lk-btn:disabled, .mode-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lk-btn:focus-visible, .mode-btn:focus-visible, .lk-tab:focus-visible,
.lk-panel input:focus-visible, .lk-panel select:focus-visible {
    outline: 3px solid #a87f10;
    outline-offset: 2px;
}

.mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mode-row .mode-btn { flex: 1 1 auto; }

/* ── Right panel ─────────────────────────────────────────────── */
.lk-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid #ded5bf;
    background: #fffaea;
}

.lk-head {
    flex: 0 0 auto;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #ded5bf;
    background: #f8f5ec;
}

.lk-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #34302a;
    line-height: 1.2;
}

.lk-sub {
    font-size: 12px;
    color: #5d5749;
    margin: 2px 0 6px;
}

.lk-chip {
    display: inline-block;
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: #34302a;
    background: #faf0cd;
    border: 1px solid #ddba50;
    border-radius: 10px;
    padding: 0 8px;
}

.lk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lk-actions .lk-btn { flex: 1 1 auto; }

.lk-status {
    min-height: 16px;
    font-size: 12px;
    color: #4f9143;
    margin-top: 4px;
}

.lk-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 6px 10px 0;
    border-bottom: 1px solid #ded5bf;
    background: #fffaea;
}

.lk-tab {
    flex: 1 1 0;
    font-size: 13px;
    font-weight: 700;
    color: #5d5749;
    background: #f0ece1;
    border: 1px solid #ded5bf;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 6px 4px;
    cursor: pointer;
    min-height: 34px;
}

.lk-tab[aria-selected="true"] {
    background: #ffffff;
    color: #34302a;
    border-color: #a87f10;
    box-shadow: inset 0 3px 0 #f2c419;
}

.lk-tabpanel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 24px;
    background: #ffffff;
}

/* ── Results and specimen tables ─────────────────────────────── */
.lk-table-wrap {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid #ded5bf;
    border-radius: 4px;
}

.lk-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.lk-table th, .lk-table td {
    border-bottom: 1px solid #efe9da;
    padding: 3px 5px;
    text-align: left;
    white-space: nowrap;
}

.lk-table th {
    position: sticky;
    top: 0;
    background: #f8f5ec;
    font-weight: 700;
    z-index: 1;
}

.lk-table .lk-num { text-align: right; font-family: monospace; }

.lk-table input[type="text"] {
    width: 110px;
    font-size: 12px;
    border: 1px solid #ded5bf;
    border-radius: 3px;
    padding: 1px 4px;
}

.lk-table select { font-size: 12px; }

.lk-del {
    border: none;
    background: none;
    color: #cf4534;
    font-size: 16px;
    cursor: pointer;
    min-width: 28px;
    min-height: 26px;
}

.lk-empty {
    font-size: 13px;
    color: #5d5749;
    font-style: italic;
}

.lk-card {
    border: 1px solid #ded5bf;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0 0 12px;
    background: #fffdf6;
}

.lk-card h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #8c690d;
}

.lk-inline-confirm {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

/* ── Experiment tab: guided steps ────────────────────────────── */
.check-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.lk-guide-head select { font-size: 14px; max-width: 100%; min-height: 32px; }
.lk-guide-title { margin: 0; font-size: 15px; color: #34302a; flex: 1 1 200px; }
.lk-progress { margin-left: auto; font-size: 12px; font-weight: 400; color: #5d5749; }

/* Collapsible cards: steps, specimen measurements, analysis and report */
.lk-guide-steps > summary, .lk-collapse > summary, .lk-guide-after > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #8c690d;
    display: flex;
    align-items: baseline;
    gap: 8px;
    list-style-position: inside;
}

.lk-guide-steps > summary::before, .lk-collapse > summary::before { content: '▸'; }
.lk-guide-steps[open] > summary::before, .lk-collapse[open] > summary::before { content: '▾'; }
.lk-guide-steps > summary::-webkit-details-marker, .lk-collapse > summary::-webkit-details-marker { display: none; }
.lk-guide-steps > summary, .lk-collapse > summary { list-style: none; }
.lk-guide-steps[open] > summary, .lk-collapse[open] > summary { margin-bottom: 8px; }

.lk-phase-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5d5749;
    margin: 10px 0 4px;
    padding-left: 4px;
}

.lk-phase-head:first-child { margin-top: 0; }
.lk-aim { font-size: 13.5px; margin: 6px 0 0; }

.lk-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    counter-reset: none;
}

.lk-step {
    display: grid;
    grid-template-columns: 24px 22px 1fr;
    gap: 2px 6px;
    align-items: start;
    padding: 6px 8px;
    border: 1px solid #efe9da;
    border-left: 4px solid transparent;
    border-radius: 4px;
    margin-bottom: 4px;
    background: #ffffff;
    font-size: 13.5px;
}

.lk-step input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; }
.lk-step-num { font-weight: 700; color: #8c690d; text-align: right; }
.lk-step.lk-current { border-left-color: #f2c419; background: #fffbea; }
.lk-step.lk-done .lk-step-text { color: #7d766a; }
.lk-step.lk-done .lk-step-num { color: #4f9143; }
.lk-step textarea {
    width: 100%;
    margin-top: 4px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid #cfc5ab;
    border-radius: 4px;
    padding: 4px 6px;
    resize: vertical;
}

.lk-where {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #8c690d;
    background: none;
    border: 1px solid #ddba50;
    border-radius: 10px;
    padding: 1px 8px;
    cursor: pointer;
}

.lk-where:hover { background: #faf0cd; }
.lk-guide-after summary { cursor: pointer; font-weight: 700; color: #8c690d; }
.lk-guide-after ol, .lk-guide-after ul { padding-left: 20px; font-size: 13.5px; }

/* Hint highlight on controls, toggled by the guide */
.lk-hint-on {
    outline: 3px solid #f2c419 !important;
    outline-offset: 2px;
    animation: lk-pulse 1.2s ease-in-out infinite;
}

@keyframes lk-pulse {
    0%, 100% { outline-color: #f2c419; box-shadow: 0 0 0 0 rgba(242, 196, 25, 0.55); }
    50% { outline-color: #a87f10; box-shadow: 0 0 0 6px rgba(242, 196, 25, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lk-hint-on { animation: none; }
}

/* Specimen measurement card */
.lk-spec { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.lk-spec-figure svg { display: block; }
.lk-spec-last { font-family: monospace; font-size: 13px; min-height: 18px; margin: 6px 0 0; color: #34302a; }

/* Ruled lines under observation steps in the printed sheet */
.lk-obs-lines { height: 0; }

/* ── Plot tab ────────────────────────────────────────────────── */
.lk-plot-controls {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 8px;
}

.lk-plot-controls select { font-size: 12px; max-width: 100%; }

#plot-canvas {
    width: 100%;
    height: 300px;
    display: block;
    border: 1px solid #ded5bf;
    border-radius: 4px;
}

.lk-stats {
    font-family: monospace;
    font-size: 12px;
    color: #34302a;
    margin: 6px 0;
    min-height: 16px;
}

/* ── Welcome modal ───────────────────────────────────────────── */
.lk-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 48, 42, 0.55);
    padding: 16px;
}

.lk-modal[hidden] { display: none; }

.lk-modal-box {
    background: #fffaea;
    border: 1px solid #ded5bf;
    border-top: 5px solid #f2c419;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    width: min(980px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.lk-modal-head {
    padding: 12px 18px 6px;
    border-bottom: 1px solid #ded5bf;
}

.lk-modal-head h2 {
    margin: 0;
    font-size: 20px;
}

.lk-modal-body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
    padding: 12px 18px;
    overflow-y: auto;
    min-height: 0;
}

.lk-modal-intro {
    font-size: 14px;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 6px;
}

.lk-modal-intro h3 { font-size: 15px; margin: 10px 0 4px; color: #8c690d; }
.lk-modal-intro p, .lk-modal-intro li { margin: 4px 0; }

.lk-modal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 18px 14px;
    border-top: 1px solid #ded5bf;
}

.lk-msgs { flex: 1 1 260px; font-size: 13px; }
.lk-msgs .lk-err { color: #cf4534; margin: 2px 0; }
.lk-msgs .lk-warn { color: #8c690d; margin: 2px 0; }

/* Form built by LabKit.createForm */
.lk-form { display: flex; flex-direction: column; gap: 8px; }
.lk-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.lk-field input[type="text"], .lk-field input[type="number"], .lk-field select {
    width: 100%;
    font-size: 15px;
    padding: 5px 8px;
    border: 1px solid #cfc5ab;
    border-radius: 4px;
    background: #ffffff;
    min-height: 34px;
}
.lk-field-text { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: end; }
.lk-field-text label, .lk-field-text .lk-hint { grid-column: 1 / -1; }
.lk-field-text label { grid-row: 1; }
.lk-field-text input { grid-column: 1; }
.lk-field-text .lk-btn { grid-column: 2; grid-row: 2; }
.lk-hint { font-size: 12px; color: #5d5749; }
.lk-radio { border: none; padding: 0; margin: 0; }
.lk-radio legend { font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 2px; }
.lk-radio label { display: block; font-size: 14px; font-weight: 400; padding: 2px 0; cursor: pointer; }
.lk-radio input { margin-right: 4px; }

/* ── Print view (lab sheet saved as PDF from the browser) ────── */
#lk-print-stamp { display: none; }

@media print {
    @page { size: A4; margin: 16mm 14mm; }
    html, body { height: auto; overflow: visible; background: #ffffff; font-size: 11pt; }
    #lab-app { display: block; height: auto; width: auto; }
    #lab-bench, .lk-head, .lk-tabs, .lk-modal, #tab-exp, #tab-plot, .lk-noprint { display: none !important; }
    .lk-panel { border: none; display: block; }
    .lk-tabpanel { display: block !important; overflow: visible; padding: 0; }
    #tab-sheet[hidden] { display: block !important; }
    #lk-print-stamp {
        display: block;
        border: 1px solid #34302a;
        padding: 6px 10px;
        margin-bottom: 10px;
        font-size: 10pt;
    }
    #lk-print-stamp dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 10px; margin: 0; }
    #lk-print-stamp dt { font-weight: 700; }
    #lk-print-stamp dd { margin: 0; }
    .lk-sheet-exp { break-before: page; }
    .lk-obs-lines {
        height: 66px;
        background: repeating-linear-gradient(to bottom, transparent 0, transparent 21px, #9a927f 21px, #9a927f 22px);
        margin: 4px 0 8px;
    }
    .lk-sheet table { break-inside: avoid; }
    .lk-blank td { height: 19px; }
    a { color: #34302a; text-decoration: none; }
}

/* ── Narrow screens: stack and scroll ────────────────────────── */
@media (max-width: 1180px) {
    #lab-app { grid-template-columns: minmax(0, 1fr) 380px; }
    #lab-controls { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    body { overflow: auto; }
    #lab-app { display: block; height: auto; }
    #canvas-container { flex: none; }
    #lab-controls { grid-template-columns: 1fr; max-height: none; overflow: visible; }
    .lk-panel { border-left: none; border-top: 1px solid #ded5bf; }
    .lk-tabpanel { overflow: visible; }
    .lk-modal-body { grid-template-columns: 1fr; }
    .lk-modal-intro { max-height: none; }
    .lk-table-wrap { max-height: 60vh; }
    .lk-btn, .mode-btn { min-height: 40px; font-size: 13px; }
    .slider::-webkit-slider-thumb { width: 28px; height: 28px; }
    .slider::-moz-range-thumb { width: 28px; height: 28px; }
    .lk-sticky {
        position: sticky;
        bottom: 0;
        z-index: 5;
        display: flex;
        gap: 8px;
        padding: 6px 10px;
        background: #f8f5ec;
        border-top: 1px solid #ded5bf;
    }
    .lk-sticky .lk-btn { flex: 1 1 0; min-height: 44px; font-size: 15px; }
}

@media (min-width: 901px) {
    .lk-sticky { display: none; }
}