/* Equipment Builder (web) - /equipmentbuilder
   Layout follows the add-in window: a viewer on the left, the stage's panel on the right. */

.eb-page {
    --eb-ink: var(--primary-color);
    --eb-muted: var(--hero-subtitle-color);
    --eb-border: #e5e7eb;
    --eb-line: #e1e1e1;
    --eb-card: #ffffff;
    --eb-panel: #f7f7f7;
    --eb-blue: var(--thermist-blue);
    --eb-blue-dark: var(--thermist-blue-dark);
    --eb-blue-soft: rgba(10, 135, 237, 0.10);
    --eb-radius: 12px;
    --eb-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    margin-top: var(--expanded-header-height);
    padding: 28px 24px 60px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    color: var(--eb-ink);
}

/* ----- hero ----- */

.eb-hero {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 22px;
}

.eb-hero h1 {
    font-size: 2.6rem;
    margin: 0.4rem 0 0.6rem;
    line-height: 1.1;
}

.eb-hero .eb-sub {
    font-size: 1.12rem;
    color: var(--eb-muted);
    line-height: 1.5;
    margin: 0;
}

/* ----- the tool ----- */

.eb-app {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--eb-card);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    box-shadow: var(--eb-shadow);
    overflow: hidden;
    min-height: 660px;
    position: relative;   /* anchors the units pill */
}

.eb-viewer {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.eb-surface {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #fbfbfb;
}

.eb-surface[hidden] { display: none; }

.eb-hintline {
    flex: none;
    height: 36px;                  /* same height as the units pill so the two sit on one line */
    line-height: 36px;
    padding: 0 12px 0 156px;       /* clears the units control on the left */
    font-size: 0.8rem;
    color: var(--eb-muted);
    border-top: 1px solid var(--eb-line);
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eb-panel {
    flex: none;
    width: 300px;
    border-left: 1px solid var(--eb-line);
    padding: 14px 16px 16px;
    overflow-y: auto;
    background: #fff;
}

.eb-app[data-stage="source"] .eb-panel { display: none; }
.eb-app[data-stage="preview"] .eb-panel { width: 360px; }

.eb-stagepanel[hidden] { display: none; }
.eb-app[data-source="pdf"] #eb-box-group { display: none; }

/* Preview: the tool keeps one height and the panel scrolls between its head and its Build
   footer, so Build never drops below the fold. */
.eb-app[data-stage="preview"] { height: clamp(660px, calc(100vh - 120px), 900px); }
.eb-app[data-stage="preview"] .eb-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#eb-previewpanel:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.eb-panelhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 4px; }
.eb-panelhead .eb-link, .eb-panelhead .eb-save { margin: 0; }
.eb-panelbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 16px 14px; }
.eb-panelfoot { flex: none; padding: 12px 16px; border-top: 1px solid var(--eb-line); background: #fff; }
.eb-panelfoot .eb-problem { margin: 0 0 8px; }
.eb-panelfoot .eb-actions { margin: 0; justify-content: flex-start; }
.eb-panelfoot .eb-actions .eb-btn { min-width: 0; }
.eb-panelfoot #fm-year { flex: none; width: auto; font-size: 0.85rem; padding: 6px 8px; }
.eb-panelfoot #eb-build { flex: 1 1 auto; }
.eb-panelfoot .eb-btn-quiet { border-color: transparent; color: var(--eb-muted); padding-left: 10px; padding-right: 10px; }
.eb-panelfoot .eb-btn-quiet:hover { background: var(--eb-panel); }
.eb-panelfoot .eb-status { margin-top: 10px; }

/* the preview panel's section labels: small capitals, quieter than the controls under them */
#eb-previewpanel h4.eb-h, .eb-partcap, #eb-standards > summary .eb-h {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-muted);
}
#eb-previewpanel h4.eb-h { margin: 16px 0 6px; }
#eb-type-parts[hidden] + h4.eb-h { margin-top: 4px; }
.eb-partcap { text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
#eb-standards { margin-top: 16px; }
.eb-app[data-source="boxes"] #eb-pdf-group { display: none; }

/* ----- source stage ----- */

.eb-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.eb-caption {
    font-size: 0.85rem;
    color: var(--eb-muted);
    margin: 4px 0 0;
}

/* One-line note above the source buttons: what is free, what needs a subscription. */
.eb-srcnote {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--eb-muted);
    text-align: center;
    max-width: 34rem;
    margin: 0 0 10px;
}

.eb-srcnote a {
    color: var(--eb-blue);
    text-decoration: underline;
}

.eb-srcnote a:hover {
    color: var(--eb-blue-dark);
}

/* Saved sketches under the source buttons (static/js/eb-sketches-list.js): the account's box
   sketches, rows from eb-families.css. Open puts one back on screen; Draw with Boxes starts blank. */
.eb-sketches {
    width: min(560px, 100%);
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--eb-border, #e5e7eb);
    text-align: left;
}

.eb-sketches[hidden] { display: none; }
.eb-sketches .ebf-title { font-size: 0.9rem; }
.eb-sketches .ebf-row { padding: 7px 0; }
.eb-sketches .ebf-row:first-child { border-top: none; }

button.ebs-name {
    font: inherit;
    font-weight: 500;
    font-size: 0.94rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--eb-blue);
    text-align: left;
    cursor: pointer;
}

button.ebs-name:hover { text-decoration: underline; }

/* The save pill at the top of the stage panels: Saved / Saving… / Not saved · Retry / Sign in to save */
.eb-save {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 22px;
    margin: 0 0 8px;
    font-size: 0.8rem;
    color: var(--eb-muted);
}

.eb-save[hidden] { display: none; }

.eb-save[data-state="failed"],
.eb-save[data-state="hold"],
.eb-save[data-state="conflict"] { color: #b3261e; }

.eb-save-text::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    vertical-align: 1px;
}

.eb-save[data-state="saved"] .eb-save-text::before { background: #1f7a3d; opacity: 1; }

.eb-save-act {
    font: inherit;
    font-size: 0.78rem;
    line-height: 1;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--eb-blue);
    background: #fff;
    color: var(--eb-blue);
    cursor: pointer;
}

.eb-save-act:hover { background: var(--eb-blue-soft); }

/* ----- buttons and inputs ----- */

.eb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid var(--eb-blue);
    background: #fff;
    color: var(--eb-blue);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.eb-btn:hover { background: var(--eb-blue-soft); }
.eb-btn:disabled { opacity: 0.45; cursor: default; background: #fff; }
.eb-btn.primary { background: var(--eb-blue); color: #fff; }
.eb-btn.primary:hover:not(:disabled) { background: var(--eb-blue-dark); }
.eb-btn.eb-wide { width: 190px; padding: 9px 16px; font-size: 1rem; }

.eb-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.eb-actions .eb-btn { min-width: 100px; }

.eb-tool,
.eb-mini {
    font: inherit;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #cfd4da;
    background: #fff;
    color: var(--eb-ink);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}

.eb-tool:hover, .eb-mini:hover { background: var(--eb-panel); }
.eb-tool.on { border-color: var(--eb-blue); box-shadow: 0 0 0 2px var(--eb-blue-soft); color: var(--eb-blue-dark); }
.eb-mini { padding: 3px 8px; }
.eb-mini[hidden] { display: none; }

.eb-link {
    font: inherit;
    font-size: 0.85rem;
    color: var(--eb-blue);
    background: none;
    border: 1px solid transparent;
    padding: 2px 6px 2px 0;
    cursor: pointer;
    margin-bottom: 6px;
}

.eb-link:hover { text-decoration: underline; }

.eb-in {
    font: inherit;
    font-size: 0.88rem;
    padding: 4px 7px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background: #fff;
    color: var(--eb-ink);
    min-width: 0;
    box-sizing: border-box;
}

.eb-in:focus { outline: none; border-color: var(--eb-blue); box-shadow: 0 0 0 3px var(--eb-blue-soft); }
.eb-in.eb-invalid { border-color: #d9534f; }
.eb-in-sm { width: 62px; text-align: center; }
.eb-in[hidden] { display: none; }

.eb-toolrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    min-height: 26px;
}

.eb-statustext { font-size: 0.78rem; color: var(--eb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eb-sizerow, .eb-scalerow, .eb-maprow {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 6px;
    font-size: 0.82rem;
}

.eb-sizerow .eb-in-sm { width: 54px; }
.eb-scalerow .eb-or { margin: 0 4px; color: var(--eb-muted); }
.eb-maprow .eb-tool { min-width: 100px; }

.eb-sep { border: none; border-top: 1px solid var(--eb-line); margin: 10px 0; }

h4.eb-h {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.eb-readout { font-size: 0.8rem; color: var(--eb-muted); min-height: 18px; margin-top: 4px; }

.eb-problem { font-size: 0.82rem; color: #b22222; margin-top: 8px; min-height: 0; line-height: 1.35; }
.eb-problem:empty { display: none; }

.eb-formgrid {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 6px 8px;
    align-items: center;
    font-size: 0.85rem;
}

.eb-formgrid label { color: var(--eb-ink); }
.eb-formgrid .eb-in { width: 100%; }

.eb-checks { display: grid; gap: 5px; margin: 0 0 4px; }
.eb-check {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.3;
    cursor: pointer;
}
.eb-check input { margin: 0; width: 15px; height: 15px; justify-self: start; accent-color: var(--eb-blue); }

/* Plan: Clearance, Labels and Plan detail on one row */
.eb-plancks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.eb-plancks .eb-check { grid-template-columns: 15px auto; gap: 7px; }

/* the clearance per side, around the unit as it reads in plan (front at the bottom), inside
   the dashed zone the views draw */
.eb-clrbox { position: relative; display: grid; grid-template-columns: 64px minmax(40px, 1fr) 64px; grid-template-rows: auto 52px auto; gap: 6px; align-items: center; justify-items: center; max-width: 250px; margin: 10px 0 2px; padding: 4px; }
.eb-clrbox[hidden] { display: none; }
.eb-clr-zone { grid-area: 1 / 1 / 4 / 4; align-self: stretch; justify-self: stretch; border: 1.5px dashed #9aa4ae; border-radius: 4px; margin: -4px; }
.eb-clr-side { display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 1; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--eb-muted); }
.eb-clr-side .eb-in { width: 62px; text-align: center; font-size: 0.8rem; padding: 3px 4px; letter-spacing: normal; text-transform: none; }
.eb-clr-back { grid-area: 1 / 2; }
.eb-clr-left { grid-area: 2 / 1; }
.eb-clr-right { grid-area: 2 / 3; }
.eb-clr-front { grid-area: 3 / 2; }
.eb-clr-unit { grid-area: 2 / 2; width: 100%; height: 100%; border: 1.5px solid var(--eb-ink); border-radius: 2px; background: #f3f6f9; }

/* two-segment pill (scale mode, draw/drag, box shape) */
.eb-pill {
    display: inline-flex;
    border: 1px solid #cfd4da;
    border-radius: 14px;
    padding: 2px;
    background: #f7f7f7;
    margin: 0 0 8px;
    width: 100%;
    box-sizing: border-box;
}

.eb-pill button {
    flex: 1;
    font: inherit;
    font-size: 0.8rem;
    padding: 3px 8px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eb-pill button.on { background: var(--eb-blue); color: #fff; font-weight: 600; }
.eb-pill-sm { width: 122px; margin: 0; }
.eb-pill-shape { width: 78px; }
.eb-pill-shape.dim { opacity: 0.5; }
/* Full / Low detail: each option carries its estimated .rfa size */
.eb-detail-pill button { gap: 6px; }
.eb-detail-est { font-weight: 400; opacity: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eb-detail-est:empty { display: none; }

/* box list */
.eb-boxlist { max-height: 140px; overflow-y: auto; margin: 4px 0; }
.eb-boxrow {
    font-size: 0.8rem;
    padding: 3px 6px;
    border-left: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eb-boxrow:hover { background: var(--eb-panel); }
.eb-boxrow.sel { background: rgba(10, 135, 237, 0.12); border-left-color: var(--eb-blue); }

/* ----- pdf surfaces ----- */

.eb-pages { overflow-y: auto; padding: 14px; }
.eb-thumbs { display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.eb-thumb {
    width: 150px;
    border: 1px solid #d5d5d5;
    background: #fff;
    cursor: pointer;
    padding: 4px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--eb-muted);
    border-radius: 4px;
}
.eb-thumb:hover { border-color: var(--eb-blue); box-shadow: 0 0 0 2px var(--eb-blue-soft); }
.eb-thumb canvas { display: block; width: 100%; height: auto; background: #fff; min-height: 60px; }

.eb-pdf { background: #ececec; }
.eb-pdf canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
.eb-pdf.tool canvas { cursor: crosshair; }
.eb-pdf.pan canvas { cursor: grab; }

.eb-chips { position: absolute; inset: 0; pointer-events: none; }
.eb-chip {
    position: absolute;
    transform: translate(-100%, -100%);
    font: 600 9px Roboto, sans-serif;
    line-height: 15px;
    height: 15px;
    padding: 0 5px;
    border-radius: 3px;
    border: 1px solid var(--eb-blue);
    background: var(--eb-blue);
    color: #fff;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}
.eb-chip.tag { background: #fff; color: var(--eb-blue); cursor: default; }

.eb-pagebar { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.eb-pagebar .eb-mini { background: rgba(255, 255, 255, 0.92); }

.eb-busy {
    position: absolute;
    left: 10px;
    top: 8px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--eb-border);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--eb-blue-dark);
}
.eb-busy[hidden] { display: none; }

/* ----- box surfaces ----- */

.eb-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.eb-quad { position: relative; overflow: hidden; border-right: 1px solid var(--eb-line); border-bottom: 1px solid var(--eb-line); }
.eb-quad-plan { grid-column: 1 / span 2; border-right: none; }
.eb-quad-3d { border-right: none; border-bottom: none; }
.eb-quad-front { border-bottom: none; }
.eb-quad canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; background: #fbfbfb; }
.eb-quad-tag {
    position: absolute;
    left: 8px;
    top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9aa4ae;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}
/* the elevation's tag is a button: click to look from the next side round */
.eb-quad-tag-btn { pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; line-height: inherit; color: var(--eb-blue, #0a87ed); z-index: 2; }
.eb-quad-tag-btn:hover { text-decoration: underline; }

/* ----- 3D ----- */

/* preview stage: 3D on top (two thirds), the plan pane below (one third) */
.eb-preview { display: flex; flex-direction: column; }
.eb-3d-slot { flex: 2 1 0; position: relative; min-height: 0; }
.eb-3d-slot .eb-quad-tag, .eb-plan-slot .eb-quad-tag { z-index: 2; }
.eb-plan-slot { flex: 1 1 0; position: relative; min-height: 0; border-top: 1px solid var(--eb-line); background: #fff; }
.eb-plan-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.eb-3d { position: absolute; inset: 0; }
.eb-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; background: linear-gradient(#f4f8fc, #e9eef3); }
.eb-3d.placing canvas { cursor: crosshair; }
.eb-3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.eb-3d-label {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--eb-ink);
    color: var(--eb-ink);
    font: 700 10px Roboto, sans-serif;
    line-height: 16px;
    text-align: center;
}
.eb-3d-label.sel { background: var(--eb-blue); border-color: var(--eb-blue); color: #fff; }

/* ----- connector cards ----- */

.eb-card {
    border: 1px solid var(--eb-border);
    border-radius: 6px;
    padding: 5px 6px;
    margin-bottom: 4px;
    background: #fff;
}
.eb-card.sel { border-color: var(--eb-blue); box-shadow: 0 0 0 2px var(--eb-blue-soft); }
.eb-card-top { display: flex; align-items: center; gap: 4px; }
.eb-chev { font: inherit; font-size: 0.7rem; width: 14px; border: none; background: none; color: #666; cursor: pointer; padding: 0; text-align: center; }
.eb-badge {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--eb-ink);
    font: 700 10px Roboto, sans-serif;
    line-height: 16px;
    text-align: center;
    color: var(--eb-ink);
    margin-right: 2px;
}
.eb-card.sel .eb-badge { background: var(--eb-blue); border-color: var(--eb-blue); color: #fff; }
.eb-badge.unplaced { border-style: dashed; color: #999; }
.eb-card-top select { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; padding: 3px 4px; }
.eb-card-top .eb-mini { padding: 2px 7px; font-size: 0.78rem; }
.eb-card-top .eb-mini.on { border-color: var(--eb-blue); box-shadow: 0 0 0 2px var(--eb-blue-soft); color: var(--eb-blue-dark); }
.eb-rot { width: 22px; padding: 2px 0 !important; }
.eb-rot[hidden] { display: none; }
.eb-card-details {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 4px 6px;
    align-items: center;
    font-size: 0.8rem;
    margin: 6px 0 2px 20px;
}
.eb-card-details[hidden] { display: none; }
.eb-card-details select, .eb-card-details .eb-in { width: 100px; font-size: 0.8rem; padding: 3px 5px; }
.eb-card-details .eb-in-sm { width: 100px; text-align: center; }
.eb-card-details .eb-sizes { display: flex; align-items: center; gap: 4px; }
.eb-card-details .eb-sizes .eb-in { width: 44px; text-align: center; }
.eb-card-details .eb-sizes[hidden] { display: none; }

/* ----- types: tabs across the top of the preview views ----- */

.eb-typestrip { flex: none; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 10px 0 8px; border-bottom: 1px solid var(--eb-line); background: #fff; }
.eb-typeone { font-size: 0.82rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.eb-typeone[hidden] { display: none; }
.eb-typelist { display: flex; align-items: stretch; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.eb-typerow {
    position: relative;
    display: grid;
    grid-template-columns: auto 20px;
    align-content: center;
    column-gap: 2px;
    padding: 6px 4px 5px 10px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.eb-typerow:hover { background: var(--eb-panel); }
.eb-typerow.sel { border-bottom-color: var(--eb-blue); }
/* the name reads as the tab's label and is typed in place */
.eb-typerow .eb-typename { font-size: 0.86rem; font-weight: 500; padding: 1px 3px; margin-left: -4px; border-color: transparent; background: transparent; cursor: pointer; }
.eb-typerow .eb-typename:hover { border-color: var(--eb-border); }
.eb-typerow .eb-typename:focus { cursor: text; background: #fff; }
.eb-typerow.sel .eb-typename { color: var(--eb-blue); }
.eb-typerow .eb-typename.eb-invalid { border-color: #d9534f; }
.eb-typesize { grid-column: 1 / -1; font-size: 0.72rem; color: var(--eb-muted); font-variant-numeric: tabular-nums; }
/* the small x (a tab's, and the Standards files') */
.eb-typedel { width: 22px; padding: 2px 0 !important; }
.eb-typerow .eb-typedel { width: 20px; height: 20px; padding: 0 !important; border-color: transparent; background: transparent; color: var(--eb-muted); visibility: hidden; }
.eb-typerow:hover .eb-typedel, .eb-typerow.sel .eb-typedel { visibility: visible; }
.eb-typerow .eb-typedel:hover { color: #b3261e; }
.eb-typerow .eb-typedel.off { visibility: hidden; }
@media (hover: none) { .eb-typerow .eb-typedel { visibility: visible; } }
.eb-addtype { flex: none; border-style: dashed; color: var(--eb-muted); }
#eb-add-type:disabled { opacity: 0.45; cursor: default; }
.eb-typestrip .eb-detail { margin-left: auto; flex: none; }
.eb-typestrip .eb-detail[hidden] { display: none; }
.eb-typestrip .eb-detail-pill { margin: 0; width: auto; }
.eb-typestrip .eb-detail-pill button { padding: 4px 12px; }

/* the shown type's sizes (2+ types): a box sketch's parts (blank = follows the rules), a
   traced body's overall size */
.eb-typeparts { margin: 4px 0 2px; }
.eb-typeparts[hidden] { display: none; }
.eb-partcap { margin-bottom: 4px; }
.eb-partrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 2px 4px; margin-left: -4px; border-radius: 3px; cursor: pointer; }
.eb-partrow:hover { background: var(--eb-panel); }
.eb-partrow.lit { background: rgba(10, 135, 237, 0.12); box-shadow: inset 2px 0 0 var(--eb-blue); }
.eb-partrow.lit .eb-partname { color: var(--eb-blue); font-weight: 600; }
.eb-partname { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Standards: the firm's family template and shared parameters, folded under a chevron
   (the connector cards' ▸ / ▾); folded, the note says what is in use */
.eb-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; min-width: 0; }
.eb-fold > summary::-webkit-details-marker { display: none; }
.eb-fold > summary::before { content: '\25B8'; font-size: 0.72rem; color: var(--eb-muted); width: 10px; flex: none; }
.eb-fold[open] > summary::before { content: '\25BE'; }
.eb-fold > summary .eb-h { font-size: 0.9rem; font-weight: 600; flex: none; }
.eb-foldnote { font-size: 0.75rem; color: var(--eb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.eb-fold[open] .eb-foldnote { display: none; }
.eb-filerow { display: grid; grid-template-columns: 84px minmax(0, 1fr) 22px; gap: 6px; align-items: center; margin: 0 0 4px; }
.eb-filebtn { text-align: center; box-sizing: border-box; }   /* a label, unlike a button: the touch min-height must include the padding */
/* the name trims, the picked count after it never does (a phone runs out of room first) */
.eb-filename { display: flex; min-width: 0; font-size: 0.8rem; color: var(--eb-muted); white-space: nowrap; overflow: hidden; }
.eb-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eb-fcount { flex: none; white-space: pre; color: var(--eb-ink); }
.eb-pfilter { width: 100%; font-size: 0.8rem; padding: 3px 6px; margin: 2px 0 4px; }
/* scroll shadows: a soft edge wherever more rows are hidden (the white covers ride with the
   content and hide the shadow once that end is reached) */
.eb-params {
    max-height: 220px; overflow-y: auto;
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 24px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) bottom / 100% 9px no-repeat scroll;
    background-color: #fff;
}
.eb-params[hidden] { display: none; }
.eb-prow { display: grid; grid-template-columns: 16px minmax(0, 1fr) 96px 40px; gap: 6px; align-items: center; padding: 2px 0; font-size: 0.82rem; }
.eb-prow[hidden] { display: none; }
.eb-prow input[type="checkbox"] { margin: 0; width: 15px; height: 15px; accent-color: var(--eb-blue); }
.eb-pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.eb-prow .eb-in { width: 100%; font-size: 0.8rem; padding: 2px 5px; }
.eb-prow .eb-pkind { padding: 2px 0; font-size: 0.72rem; }
.eb-prow:not(.on) .eb-in, .eb-prow:not(.on) .eb-pkind { opacity: 0.45; }
.eb-notes { margin: 8px 0 0; padding-left: 18px; font-size: 0.8rem; color: #8a5a00; }
.eb-partdims { display: flex; align-items: center; gap: 3px; }
.eb-partaxis { font-size: 0.72rem; color: var(--eb-muted); margin-left: 3px; }
.eb-partdims .eb-in { width: 52px; text-align: center; font-size: 0.8rem; padding: 3px 4px; }
.eb-partdims .eb-in::placeholder { color: #7b8691; }
.eb-partgap { width: 65px; }
.eb-partdims .eb-in[readonly] { color: var(--eb-muted); background: var(--eb-panel); cursor: default; }

/* the selected type's connector size, always visible once there are 2+ types */
.eb-card-size {
    display: grid;
    grid-template-columns: 62px auto minmax(0, 1fr);
    gap: 4px 6px;
    align-items: center;
    font-size: 0.8rem;
    margin: 5px 0 1px 20px;
}
.eb-card-size .eb-in { font-size: 0.8rem; padding: 3px 5px; }
.eb-card-size .eb-in-sm { width: 100px; text-align: center; }
.eb-card-size .eb-sizes { display: flex; align-items: center; gap: 4px; }
.eb-card-size .eb-sizes .eb-in { width: 44px; text-align: center; }
.eb-card-size .eb-sizes[hidden] { display: none; }
.eb-card-size .eb-in::placeholder { color: #9aa4ae; }
.eb-sizetag { font-size: 0.75rem; color: var(--eb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- units (pinned to the bottom right of the tool) ----- */

.eb-units {
    /* sits inside the hint strip along the bottom of the viewer, on the left */
    position: absolute;
    left: 12px;
    bottom: 0;
    height: 36px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--eb-muted);
}
.eb-units .eb-in { width: auto; padding: 3px 6px; font-size: 0.82rem; }

/* ----- build status ----- */

.eb-status {
    margin-top: 12px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.86rem;
    line-height: 1.45;
    display: none;
}
.eb-status.show { display: block; }
.eb-status.working { background: var(--eb-blue-soft); color: var(--eb-blue-dark); }
.eb-status.done { background: #e8f6ec; color: #1d6b35; }
.eb-status.error { background: #fdecec; color: #a33a3a; }
.eb-status a.eb-btn { margin-top: 8px; text-decoration: none; }

.eb-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: eb-spin 0.8s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}

@keyframes eb-spin { to { transform: rotate(360deg); } }

/* ----- how it works ----- */

.eb-howto {
    margin-top: 40px;
    background: var(--eb-panel);
    border-radius: var(--eb-radius);
    padding: 36px 28px;
}

.eb-howto h2 {
    text-align: center;
    font-weight: 500;
    color: var(--eb-ink);
    margin: 0 0 24px;
    font-size: 1.6rem;
}

.eb-howto-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.eb-howto-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    padding: 14px 16px;
    font-size: 0.95rem;
}

.eb-howto-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--eb-blue);
    color: #fff;
    font-weight: 500;
}


.eb-note {
    text-align: center;
    color: var(--eb-muted);
    margin: 26px auto 0;
    max-width: 800px;
    line-height: 1.5;
}

.eb-note a { color: var(--eb-blue); }

/* ----- responsive ----- */

@media (max-width: 1100px) {
    .eb-howto-list { grid-template-columns: 1fr 1fr; }
}

/* Stacked (tablets and phones): the viewer on top at a height that leaves some page to
   scroll by, the units row under it, then the stage's panel. Every control grows to a finger
   sized target and every text box to 16px, which also keeps iOS from zooming on focus. */
@media (max-width: 900px) {
    .eb-app {
        flex-direction: column;
        min-height: 0;
    }
    .eb-filerow { grid-template-columns: 110px minmax(0, 1fr) 44px; }   /* the x is .eb-typedel, 44px wide here */
    .eb-prow { grid-template-columns: 22px minmax(0, 1fr) 110px 52px; min-height: 40px; }
    /* 4.5 rows of 44px: a row cut in half says the list scrolls (phone scrollbars hide) */
    .eb-params { max-height: 198px; }
    .eb-prow input[type="checkbox"] { width: 22px; height: 22px; }
    .eb-prow .eb-in { font-size: 16px; padding: 6px 8px; }
    .eb-viewer { order: 0; min-height: 0; }
    .eb-units { order: 1; }
    .eb-panel { order: 2; }

    .eb-app[data-stage="source"] .eb-source { padding: 44px 16px 40px; }
    .eb-app[data-stage="define"] .eb-viewer { height: 64vh; height: clamp(360px, 64svh, 640px); }
    .eb-app[data-stage="define"][data-source="boxes"] .eb-viewer { height: 74vh; height: clamp(440px, 74svh, 700px); }
    .eb-app[data-stage="preview"] { height: auto; }
    .eb-app[data-stage="preview"] .eb-viewer { height: 70vh; height: clamp(400px, 70svh, 680px); }
    .eb-app[data-stage="preview"] .eb-3d-slot { flex-basis: 0; flex-grow: 3; }
    .eb-app[data-stage="preview"] .eb-plan-slot { flex-grow: 2; }

    .eb-panel, .eb-app[data-stage="preview"] .eb-panel {
        width: auto;
        border-left: none;
        border-top: 1px solid var(--eb-line);
        padding: 14px 16px 20px;
        overflow: visible;
    }
    /* the preview panel runs down the page: no inner scroll, the footer follows the sections */
    .eb-app[data-stage="preview"] .eb-panel { padding: 0; display: block; }
    .eb-panelhead { padding: 10px 16px 0; }
    .eb-panelbody { overflow: visible; padding: 6px 16px 14px; }
    .eb-panelfoot { padding: 14px 16px 20px; }
    .eb-panelfoot .eb-actions { flex-wrap: wrap; }
    .eb-panelfoot #fm-year { flex: 1 1 100%; font-size: 16px; }
    .eb-panelfoot .eb-actions .eb-btn { flex: 1 1 0; }
    #eb-previewpanel h4.eb-h, #eb-standards > summary .eb-h { font-size: 0.8rem; }
    .eb-partcap { font-size: 0.88rem; }
    .eb-plancks { gap: 2px 20px; }
    .eb-plancks .eb-check { grid-template-columns: 24px auto; }
    .eb-clrbox { grid-template-columns: 84px minmax(40px, 1fr) 84px; grid-template-rows: auto 64px auto; max-width: 320px; }
    .eb-clr-side { font-size: 0.75rem; }
    .eb-clr-side .eb-in { width: 80px; font-size: 16px; padding: 7px 6px; }

    /* the hint is the instructions on a phone: let it wrap instead of cutting it off */
    .eb-hintline:empty { display: none; }
    .eb-hintline {
        height: auto;
        min-height: 36px;
        line-height: 1.4;
        padding: 8px 14px;
        white-space: normal;
        font-size: 0.85rem;
        box-sizing: border-box;
    }

    .eb-units {
        position: static;
        height: auto;
        padding: 8px 16px;
        border-top: 1px solid var(--eb-line);
        background: var(--eb-panel);
        font-size: 0.9rem;
    }
    .eb-units .eb-in { min-height: 40px; padding: 6px 10px; font-size: 16px; }

    .eb-btn { min-height: 44px; font-size: 1rem; padding: 9px 18px; }
    .eb-btn.eb-wide { width: min(260px, 100%); min-height: 48px; }
    .eb-actions { gap: 10px; margin-top: 16px; }
    .eb-actions .eb-btn { flex: 1 1 0; min-width: 0; }

    .eb-tool, .eb-mini { min-height: 40px; padding: 8px 14px; font-size: 0.92rem; border-radius: 8px; }
    .eb-link { min-height: 40px; font-size: 0.95rem; padding: 8px 10px 8px 0; margin-bottom: 4px; }
    .eb-in { min-height: 40px; font-size: 16px; padding: 7px 10px; border-radius: 8px; }
    .eb-in-sm { width: 76px; }

    h4.eb-h { font-size: 1rem; margin: 4px 0 8px; }
    .eb-sep { margin: 14px 0; }
    .eb-readout, .eb-statustext { font-size: 0.85rem; }
    .eb-toolrow { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 40px; }
    .eb-toolrow .eb-statustext { flex: 1 1 100%; white-space: normal; }
    .eb-toolrow .eb-tool { flex: 1 1 auto; }

    /* L / W / H boxes share one row under their caption */
    .eb-sizerow { flex-wrap: wrap; gap: 6px 8px; font-size: 0.95rem; }
    .eb-sizerow .eb-caption { flex: 1 1 100%; margin: 0; }
    .eb-sizerow .eb-in-sm { flex: 1 1 0; width: auto; min-width: 0; }
    .eb-scalerow, .eb-maprow { flex-wrap: wrap; gap: 8px; font-size: 0.95rem; }
    .eb-scalerow .eb-tool, .eb-maprow .eb-tool { flex: 1 1 auto; }
    .eb-maprow .eb-in-sm { flex: 1 1 0; width: auto; min-width: 70px; }

    .eb-pill { border-radius: 22px; padding: 3px; margin-bottom: 10px; }
    .eb-pill button { min-height: 40px; font-size: 0.92rem; border-radius: 19px; padding: 6px 10px; }
    .eb-pill-sm { flex: 1 1 auto; width: auto; margin: 0; }
    .eb-pill-shape { width: 128px; }

    .eb-boxlist { max-height: 220px; }
    .eb-boxrow { font-size: 0.92rem; padding: 11px 8px; }

    .eb-formgrid { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 10px; font-size: 0.95rem; }
    .eb-checks { gap: 2px; }
    .eb-check { grid-template-columns: 24px 1fr; min-height: 40px; font-size: 0.95rem; }
    .eb-check input { width: 22px; height: 22px; }

    .eb-thumbs { justify-content: center; }
    .eb-thumb { width: calc(50% - 6px); max-width: 180px; box-sizing: border-box; font-size: 0.85rem; }
    .eb-pagebar .eb-mini { min-height: 40px; }
    .eb-busy { font-size: 0.85rem; padding: 6px 12px; }
    .eb-quad-tag { font-size: 0.75rem; }

    /* connector cards */
    .eb-card { padding: 8px; margin-bottom: 8px; border-radius: 8px; }
    .eb-card-top { gap: 6px; flex-wrap: wrap; }
    .eb-chev { width: 32px; height: 40px; font-size: 0.85rem; }
    .eb-badge { width: 24px; height: 24px; line-height: 22px; font-size: 12px; }
    /* chevron, badge and service on the first line, the card's buttons share the second */
    .eb-card-top select { flex: 1 1 calc(100% - 80px); font-size: 16px; padding: 7px 8px; }
    .eb-card-top .eb-mini { flex: 1 1 0; padding: 8px 12px; font-size: 0.9rem; }
    .eb-card-top .eb-rot { flex: 0 0 48px; width: 48px; }
    .eb-card-details { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; font-size: 0.92rem; margin: 8px 0 4px; }
    .eb-card-details select, .eb-card-details .eb-in, .eb-card-details .eb-in-sm { width: 100%; font-size: 16px; padding: 7px 8px; }
    .eb-card-details .eb-sizes .eb-in { flex: 1 1 0; width: auto; min-width: 0; }
    #eb-add-conn { width: 100%; }

    /* types: the tab strip wraps the Detail pill under the tabs; the tabs scroll sideways */
    .eb-typestrip { flex-wrap: wrap; padding: 4px 8px; row-gap: 4px; }
    .eb-typestrip .eb-detail { margin-left: 0; flex: 1 1 100%; padding-bottom: 4px; }
    .eb-typestrip .eb-detail-pill { width: 100%; }
    .eb-typerow { grid-template-columns: auto 40px; padding: 6px 2px 6px 10px; }
    .eb-typerow .eb-typename { min-height: 36px; font-size: 16px; padding: 4px 4px; }
    .eb-typedel { width: 44px; min-height: 40px; }
    .eb-typerow .eb-typedel { width: 40px; height: 40px; min-height: 40px; visibility: visible; }
    .eb-typesize { font-size: 0.8rem; }
    .eb-partrow { grid-template-columns: minmax(0, 1fr); gap: 4px 8px; padding: 6px 6px 6px 8px; margin-left: 0; }
    .eb-partname { font-size: 0.95rem; }
    .eb-partdims { gap: 6px; }
    .eb-partaxis { font-size: 0.9rem; }
    .eb-partdims .eb-in { flex: 1 1 0; width: auto; min-width: 0; font-size: 16px; padding: 7px 8px; }
    .eb-partgap { display: none; }
    .eb-card-size { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; font-size: 0.92rem; margin: 8px 0 4px; }
    .eb-card-size .eb-sizetag { grid-column: 2; }
    .eb-card-size .eb-in, .eb-card-size .eb-in-sm { width: 100%; font-size: 16px; padding: 7px 8px; }
    .eb-card-size .eb-sizes .eb-in { flex: 1 1 0; width: auto; min-width: 0; }

    .eb-3d-label { width: 24px; height: 24px; line-height: 21px; font-size: 12px; }
    .eb-status { font-size: 0.92rem; }
    .eb-authnote { font-size: 0.88rem; }

    .eb-howto-list { grid-template-columns: 1fr; }
    .eb-hero h1 { font-size: 2.1rem; }
}

/* a finger needs the chips on the page (rotate, role) big enough to hit */
@media (hover: none) and (pointer: coarse) {
    .eb-chip { font-size: 11px; line-height: 28px; height: 30px; padding: 0 10px; border-radius: 5px; }
    button.eb-chip { min-width: 32px; }
}

@media (max-width: 600px) {
    .eb-page { padding: 12px 12px 40px; }
    .eb-hero { margin-bottom: 14px; }
    .eb-hero h1 { font-size: 1.75rem; margin: 0.2rem 0 0.35rem; }
    .eb-hero .eb-sub { font-size: 1rem; }
    .eb-srcnote { font-size: 0.95rem; }
    .eb-howto { margin-top: 28px; padding: 24px 14px; }
    .eb-howto h2 { font-size: 1.35rem; margin-bottom: 16px; }
    .eb-howto-list { gap: 10px; }
    .eb-howto-list li { padding: 12px 14px; }
}

/* Entitlement note under the Build button, and a download error line. */
.eb-authnote {
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #555555;
}

.eb-dlerror {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #a12622;
}