:root {
    --page-bg: #f4f4f2;
    --card-bg: #ffffff;
    --border: #e3e3de;
    --border-strong: #cfcfc8;
    --text-primary: #2c2c2a;
    --text-secondary: #6b6b66;
    --text-muted: #9a9a93;

    --width-bg: #e6f1fb;
    --width-fg: #0c447c;
    --width-accent: #185fa5;
    --height-bg: #fbeacd;
    --height-fg: #8a4f08;
    --height-accent: #e07b00;

    --radius: 8px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    background: var(--page-bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* ---- Header ---- */
#appHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Keep header content (esp. the right-aligned legend) clear of the notch /
       camera safe area in landscape. max() falls back to the design padding
       when the inset is 0, i.e. on devices without a cutout. */
    padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
    border-bottom: 0.5px solid var(--border);
    background: var(--card-bg);
}

.appTitle {
    font-size: 18px;
    font-weight: 500;
}

.legend {
    margin-left: auto;
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legendItem {
    display: flex;
    align-items: center;
    gap: 5px;
}

.swatch {
    display: inline-block;
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.swatch.width  { background: var(--width-accent); }
.swatch.height { background: var(--height-accent); }

/* ---- Main: desktop = mat on top, panels below ---- */
#appMain {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#graphicArea {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#rebarMatGraphic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#SVG {
    width: 100%;
    height: 100%;
}

#matToggle {
    display: none;
    position: absolute;
    top: 12px;
    right: max(12px, env(safe-area-inset-right));
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
}

/* ---- Panel area: parameters + cut sheet side by side ---- */
#panelArea {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    padding: 0 max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
}

#parameters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 10px;
    background: var(--card-bg);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
}

.axisHead {
    justify-self: center;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 14px;
    border-radius: 6px;
}

.axisHead.width  { background: var(--width-bg);  color: var(--width-fg); }
.axisHead.height { background: var(--height-bg); color: var(--height-fg); }

.rowLabel {
    justify-self: center;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
    padding: 0 4px;
}

.cell {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cell.right { justify-content: flex-end; }
.cell.left  { justify-content: flex-start; }

.unit {
    font-size: 11px;
    color: var(--text-muted);
}

.numberInput {
    width: 3.4em;
    height: 34px;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: 16px;
    text-align: right;
    padding: 0 6px;
    color: var(--text-primary);
}

#xLengthFeet, #yLengthFeet,
#xMaxPieceLength, #yMaxPieceLength { width: 4.4em; }
#xLengthInches, #yLengthInches { width: 3.6em; }

.numberInput:focus,
.barSelect:focus {
    outline: none;
    border-color: var(--width-accent);
    box-shadow: 0 0 0 2px var(--width-bg);
}

.barSelect {
    height: 34px;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-size: 15px;
    padding: 0 6px;
    color: var(--text-primary);
}

/* ---- Segmented bar-count control (styled radios) ---- */
.segmented {
    display: inline-flex;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.segmented legend {
    display: none;
}

.segmented label {
    display: inline-flex;
}

.segmented label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.segmented label span {
    padding: 6px 9px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    border-left: 0.5px solid var(--border);
}

.segmented label:first-of-type span {
    border-left: none;
}

.segmented label:has(input:checked) span {
    background: var(--width-bg);
    color: var(--width-fg);
}

/* ---- Cut sheet ---- */
#cutSheetCard {
    flex: 0 0 200px;
    background: var(--card-bg);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}

#cutSheetHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--border);
}

.cutSheetTitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

#cutSheetTotal {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.cutGroup {
    margin-bottom: 12px;
}

.cutGroup:last-child {
    margin-bottom: 0;
}

.cutGroupHeader {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.cutGroupCount {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

#cutSheet table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 14px;
}

#cutSheet td {
    padding: 3px 0;
}

#cutSheet .qty {
    color: var(--text-secondary);
}

#cutSheet .len {
    text-align: right;
}

.hidden {
    display: none;
}

/* ---- Mobile: mat shrinks, params + cut sheet dominate ----
   Triggered for narrow viewports (portrait phones) and also for short
   landscape ones. A landscape phone is wider than 768px, so without the
   second clause it would fall into the desktop layout, where the mat
   (flex: 1 1 auto; min-height: 0) collapses to zero height against the tall
   parameter panel and the clipped body hides the overflow. The max-height
   bound keeps tablets (taller in landscape) on the desktop layout. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) {
    body {
        overflow: auto;
    }

    #appMain {
        overflow: visible;
    }

    #graphicArea {
        flex: 0 0 150px;
        padding: 10px;
    }

    #matToggle {
        display: flex;
    }

    #panelArea {
        flex-direction: column;
        align-items: stretch;
        /* Clear the camera notch (left/right) and the home-indicator strip
           (bottom) so the cut sheet's lengths and counts aren't masked. */
        padding: 0 max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    #parameters {
        gap: 9px 4px;
        padding: 12px;
        grid-template-columns: minmax(0, 1fr) 4.4em minmax(0, 1fr);
    }

    #parameters .cell {
        gap: 3px;
    }

    /* Let the center labels wrap (e.g. "Stock length") so the fixed center
       column can't force the row past the viewport. */
    #parameters .rowLabel {
        white-space: normal;
    }

    /* Drop the number spinners on touch so the size row fits while still
       showing 3-digit feet and 2-digit inches. */
    #parameters input[type="number"] {
        -moz-appearance: textfield;
    }

    #parameters input[type="number"]::-webkit-outer-spin-button,
    #parameters input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #xLengthFeet, #yLengthFeet,
    #xMaxPieceLength, #yMaxPieceLength { width: 2.8em; }
    #xLengthInches, #yLengthInches { width: 2.2em; }

    #cutSheetCard {
        flex: 1 1 auto;
    }

    /* Tap-to-expand: mat fills the screen, panels hide */
    body.mat-expanded {
        overflow: hidden;
    }

    body.mat-expanded #graphicArea {
        position: fixed;
        inset: 0;
        z-index: 1000;
        flex: 1 1 auto;
        background: var(--page-bg);
        padding: 16px;
    }

    body.mat-expanded #panelArea,
    body.mat-expanded #appHeader {
        display: none;
    }
}