/* Yard Layout - mobile first, widening to a two column planner on larger screens. */

:root {
    --bg: #faf8f4;
    --surface: #ffffff;
    --ink: #22201c;
    --muted: #6f6a60;
    --line: #e3ded3;
    --accent: #2f6b33;
    --accent-soft: rgba(47, 107, 51, 0.12);
    --radius: 10px;
    --shadow: 0 1px 2px rgba(34, 32, 28, 0.06), 0 8px 24px rgba(34, 32, 28, 0.05);
}

* {
    box-sizing: border-box;
}

/* A class rule with display beats the hidden attribute, which left the wall menu
   and the corner buttons permanently on screen, swallowing clicks. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    letter-spacing: -0.02em;
}

a {
    color: var(--accent);
}

.wrap {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    z-index: 10;
    background: var(--surface);
    padding: 8px 12px;
    border-radius: var(--radius);
}

/* ---- chrome ---------------------------------------------------------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    font-size: 1.1rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand__mark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--accent), #7ba85f);
}

.site-nav {
    display: flex;
    gap: 4px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--muted);
    font-weight: 550;
}

.site-nav a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.site-footer {
    margin-top: 48px;
    padding: 24px 0 calc(40px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}

.site-footer p {
    margin: 0 0 4px;
}

/* ---- intro ----------------------------------------------------------- */

.intro {
    padding-top: 28px;
    padding-bottom: 8px;
    max-width: 720px;
    margin-inline: auto;
}

.intro-lede {
    max-width: 720px;
    margin-block: 0;
    margin-inline: auto;
    color: var(--muted);
}

/* ---- planner shell --------------------------------------------------- */

.planner {
    display: grid;
    gap: 16px;
    padding-top: 20px;
    grid-template-areas:
        "stage"
        "tools"
        "totals";
}

.planner__stage {
    grid-area: stage;
    min-width: 0;
}

.planner__tools {
    grid-area: tools;
}

.planner__totals {
    grid-area: totals;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.panel__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 12px;
}

.panel__hint {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---- action menu ------------------------------------------------------ */

/* A row of joined buttons reads as a mode switch -- Replace / Add layer sits right below
   it doing exactly that -- so three destructive actions in that shape looked like a
   choice of state rather than three things that happen the moment you touch them. One
   button opening a menu instead, where each item can say in a line what it takes away
   and what it leaves. */
.menu-anchor {
    position: relative;
    display: inline-flex;
}

.action-menu {
    position: fixed;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(34, 32, 28, 0.18);
}

.action-menu__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: none;
    border-radius: 7px;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.action-menu__item:hover {
    background: var(--accent-soft);
}

.action-menu__name {
    font-weight: 600;
    font-size: 0.92rem;
}

/* The part that answers "and what happens to the rest of my plan?" at the moment of
   the decision, rather than in a tooltip a phone never shows. */
.action-menu__note {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--muted);
}

/* The only one that also forgets the saved plan, so it is marked as the different kind
   of thing it is. */
.action-menu__item--danger {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 7px 7px;
    padding-top: 12px;
}

.action-menu__item--danger .action-menu__name {
    color: #a33a2a;
}

.action-menu__item--danger:hover {
    background: rgba(163, 58, 42, 0.08);
}

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

.stage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px 10px;
    min-height: 44px;
}

.field label {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 550;
}

.field__unit {
    font-size: 0.8rem;
    color: var(--muted);
}

/* 16px keeps iOS from zooming the page when an input takes focus. */
input[type="number"] {
    font: inherit;
    font-size: 16px;
    width: 4.5em;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 2px 0;
    min-width: 0;
}

input[type="number"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

.button--ghost {
    background: var(--surface);
    color: var(--muted);
    border-color: var(--line);
}


.button--ghost:hover {
    color: var(--ink);
    border-color: var(--muted);
}

/* The one control in the stage bar, so it carries real contrast rather than the muted
   ghost it used to share with a second button beside it. */
.button--outline {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--muted);
}

.button--outline:hover,
.button--outline[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.shape-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.shape-bar__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-right: 2px;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
}

.chip:hover {
    border-color: var(--muted);
}

.chip.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.chip--ghost {
    color: var(--muted);
}

/* ---- map view ---------------------------------------------------------- */

.view-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.view-bar__find {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}

/* 16px for the same reason the number inputs carry it: anything smaller and iOS
   zooms the whole page when the box takes focus. */
.view-bar__find input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 16px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.view-bar__find input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.map-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.map-bar__credit {
    margin: 0;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.map-bar__place {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 550;
}

/* The Maps terms require the credit to stay visible, so it lives in the page rather
   than on the sketch, where the fade slider or a pan could carry it off. */
.map-bar__attribution {
    display: block;
}

.map-bar #map-remove {
    justify-self: end;
}

@media (max-width: 560px) {
    .map-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .map-bar #map-remove {
        justify-self: start;
    }

    /* Two chips and a search box will not share a row on a phone, and a wrapped row is
       another row of sketch below the fold. Give the box its own line deliberately. */
    .view-bar__find {
        flex-basis: 100%;
    }
}

.canvas-wrap {
    /* Matches the paper the canvas paints, so the sheet reads as one surface. */
    background: #f6f4f0;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--shadow);
    /* The canvas fills this box exactly; panning and zooming move the drawing
       inside it, so there is nothing to scroll and no edge to run into. */
    overflow: hidden;
    height: min(58vh, 460px);
    height: min(58dvh, 460px);
    overscroll-behavior: contain;
}

#plan-canvas {
    display: block;
    /* Essential: lets a finger drag paint instead of scrolling the page. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: crosshair;
}

#plan-canvas.is-tracing {
    cursor: cell;
}

.stage-note {
    margin: 8px 2px 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---- tools ----------------------------------------------------------- */

/* The material list is long, so it scrolls inside the panel rather than running
   on down the page and pushing the sketch out of view. */
.tool-scroll {
    max-height: 46vh;
    max-height: 46dvh;
    overflow-y: auto;
}

.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.tool {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.tool:hover {
    border-color: var(--muted);
}

.tool.is-selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);
}

.tool__swatch {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(34, 32, 28, 0.14);
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
}

.tool--point .tool__swatch {
    border-radius: 50%;
    background-color: #fff !important;
}

.tool__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tool__name {
    font-weight: 550;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* ---- totals ---------------------------------------------------------- */

.totals__empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.total-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.total-row__swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(34, 32, 28, 0.14);
    display: grid;
    place-items: center;
    font-size: 12px;
    margin-top: 2px;
}

.total-row__name {
    font-weight: 550;
    font-size: 0.92rem;
}

.total-row__qty {
    font-size: 0.8rem;
    color: var(--muted);
}

.total-row__cost {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 550;
    white-space: nowrap;
    text-align: right;
}

.depth-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px 8px;
    min-height: 36px;
}

.depth-field input {
    width: 3.6em;
}

.totals__grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
}

.totals__grand-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.totals__grand-value {
    font-size: 1.05rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.totals__disclaimer {
    margin: 6px 0 0;
    font-size: 0.74rem;
    color: var(--muted);
}

/* ---- reference & prose ----------------------------------------------- */

.notice {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.reference {
    margin-top: 40px;
}

.reference__note {
    color: var(--muted);
    font-size: 0.88rem;
    margin-top: 0;
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.reference__table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 0.88rem;
}

.reference__table th,
.reference__table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    white-space: nowrap;
}

.reference__table thead th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}

.reference__table tbody th {
    font-weight: 550;
}

.reference__table tbody tr:last-child th,
.reference__table tbody tr:last-child td {
    border-bottom: none;
}

.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(34, 32, 28, 0.14);
    vertical-align: -2px;
    margin-right: 6px;
}

.prose {
    padding-top: 28px;
    max-width: 720px;
}

.prose p {
    color: var(--muted);
}

.prose h2 {
    font-size: 1.15rem;
    margin-top: 30px;
}

.guide-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    gap: 12px;
}

.guide-list li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}

.guide-list h2 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.guide-list p {
    margin: 0;
    font-size: 0.9rem;
}

.guide-list__status {
    margin-top: 8px !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

/* ---- wide screens ---------------------------------------------------- */

@media (min-width: 900px) {
    /* Far more room for the sketch once there is a second column. */
    .canvas-wrap {
        height: min(78vh, 880px);
        height: min(78dvh, 880px);
    }

    .planner {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto 1fr;
        align-items: start;
        grid-template-areas:
            "stage tools"
            "stage totals";
    }

    /* The two right-hand panels together match the sketch, and each scrolls inside
       itself, so the material list never pushes the sketch off the screen. */
    .planner__tools {
        display: flex;
        flex-direction: column;
        max-height: min(50vh, 560px);
        max-height: min(50dvh, 560px);
    }

    .tool-scroll {
        flex: 1;
        overscroll-behavior: contain;
        /* The column's own height decides this now, not the phone cap. */
        max-height: none;
        min-height: 0;
        /* Room for the scrollbar so the chips do not sit under it. */
        padding-right: 4px;
    }

    .planner__totals {
        display: flex;
        flex-direction: column;
        max-height: min(26vh, 300px);
        max-height: min(26dvh, 300px);
    }

    .planner__totals > div {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
    }

    .intro,
    .intro-lede {
        margin-inline: 0;
    }

    /* Moves the pair right as a group. On a phone the row wraps, and an auto
       margin there just strands them at opposite ends of their lines. */
    .stage-bar .menu-anchor {
        margin-left: auto;
    }
}

.mode-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.mode-bar .chip {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 38px;
}

.seg {
    display: inline-flex;
    gap: 0;
}

.seg .chip:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.seg .chip:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.chip:disabled {
    opacity: 0.4;
    cursor: default;
}

.shape-help {
    margin: 0 2px 10px;
    font-size: 0.78rem;
    color: var(--muted);
}

/* ---- on-canvas controls ---------------------------------------------- */

.canvas-wrap {
    position: relative;
}

.canvas-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    margin: 0;
    max-width: calc(100% - 76px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    font-size: 0.76rem;
    color: var(--muted);
    pointer-events: none;
}

.canvas-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}

.canvas-btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 550;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(34, 32, 28, 0.18);
}

.canvas-btn--quiet {
    background: var(--surface);
    border-color: var(--line);
    color: var(--muted);
}

/* Sits at the tapped wall, like the reference sketch's context menu. */
.wall-menu {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    min-width: 132px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(34, 32, 28, 0.18);
    transform: translate(-50%, -50%);
}

.wall-menu__item {
    appearance: none;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--ink);
    cursor: pointer;
    min-height: 40px;
}

.wall-menu__item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Something under the pointer can be dragged. */
#plan-canvas.is-grabbable {
    cursor: grab;
}

#plan-canvas.is-grabbable:active {
    cursor: grabbing;
}

.zoom-bar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

.zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(34, 32, 28, 0.14);
}

.zoom-btn--fit {
    font-size: 0.72rem;
}

.zoom-btn:hover {
    border-color: var(--muted);
}

#plan-canvas.is-panning {
    cursor: grabbing;
}

/* In shape-editing mode the sheet itself can be dragged around. */
#plan-canvas.is-editing {
    cursor: grab;
}

.wave-fields {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.wave-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--muted);
}

.wave-field > span:first-child {
    min-width: 3.6em;
}

.wave-field input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent);
}

.wave-field__value {
    min-width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 550;
}

/* ---- grouped material picker ------------------------------------------ */

.tool-group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.tool-group__head {
    border-radius: var(--radius);
}

.tool-group.holds-selection {
    border-color: var(--accent);
}

.tool-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: none;
    background: none;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.tool-group__head:hover {
    background: var(--accent-soft);
}

.tool-group__swatches {
    display: flex;
    flex: none;
}

.tool-group__chip {
    width: 18px;
    height: 30px;
    border: 1px solid rgba(34, 32, 28, 0.14);
    margin-right: -6px;
    border-radius: 5px;
}

.tool-group__chip:first-child {
    border-radius: 7px 5px 5px 7px;
}

.tool-group__chip:last-child {
    margin-right: 0;
    border-radius: 5px 7px 7px 5px;
}

.tool-group__label {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.tool-group__name {
    font-weight: 550;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-group__pick {
    font-size: 0.72rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-group__count {
    flex: none;
    font-size: 0.72rem;
    color: var(--muted);
    background: var(--bg);
    border-radius: 999px;
    padding: 1px 7px;
}

.tool-group.is-open .tool-group__head,
.tool-group__head[aria-expanded="true"] {
    background: var(--accent-soft);
}

.tool-group__head[aria-expanded="true"] .tool-group__count {
    background: var(--accent-soft);
    color: var(--accent);
}

.tool-group__items {
    position: fixed;
    z-index: 40;
    display: grid;
    gap: 6px;
    padding: 8px;
    max-height: min(52vh, 420px);
    max-height: min(52dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(34, 32, 28, 0.18);
}

/* Inside a group the border would double up with the group's own. */
.tool-group__items .tool {
    border-color: transparent;
    background: var(--bg);
}

.tool-group__items .tool.is-selected {
    background: var(--surface);
}

.mode-bar__label {
    align-self: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-right: 2px;
}

/* ---- phones ----------------------------------------------------------- */

@media (max-width: 899px) {
    /* The sketch is what someone came for, so it goes directly under the shape
       buttons and the paragraph explaining them moves below it. */
    .planner__stage {
        display: flex;
        flex-direction: column;
    }

    .canvas-wrap {
        flex: none;
    }

    .shape-help {
        order: 1;
        margin: 10px 2px 0;
    }

    /* The photo's own controls follow the help text below the sketch, and for the same
       reason: 200px of sliders above it puts the sketch itself under the fold. */
    .map-bar {
        order: 1;
        margin: 10px 2px 0;
    }

    /* Every pixel above the sketch is a pixel of sketch below the fold. */
    .intro {
        padding-top: 20px;
    }

    /* The planner is what the page is for, so on a phone it comes before the
       paragraph describing it. The DOM order is unchanged. */
    main {
        display: flex;
        flex-direction: column;
    }

    .planner {
        order: 1;
        padding-top: 14px;
    }

    .ad-slot[data-ad-placement="planner-bottom"] {
        order: 2;
    }

    .intro-lede {
        order: 3;
        margin-top: 24px;
    }

    noscript,
    .reference {
        order: 4;
    }

    .ad-slot[data-ad-placement="content-bottom"] {
        order: 5;
    }

    /* Six chips that all grow land two per row. Letting them size to their text
       packs the run bar into two rows instead of three. */
    #line-mode-bar .chip {
        flex: 0 1 auto;
    }
}

/* A phone held sideways has very little height, and the sketch was getting the
   worst of it. */
@media (max-width: 899px) and (orientation: landscape) {
    .intro {
        padding-top: 14px;
    }

    .canvas-wrap {
        height: min(72vh, 420px);
        height: min(72dvh, 420px);
    }

    .tool-scroll {
        max-height: 62vh;
        max-height: 62dvh;
    }
}

/* ---- touch targets ---------------------------------------------------- */

/* A finger is about 44px wide. These controls were sized for a cursor. */
@media (pointer: coarse) {
    .chip,
    .mode-bar .chip,
    .canvas-btn,
    .wall-menu__item,
    .depth-field {
        min-height: 44px;
    }

    .zoom-btn {
        width: 44px;
        height: 44px;
    }

    .wave-field input[type="range"] {
        height: 44px;
    }

    .brand {
        min-height: 44px;
    }

    .site-footer a {
        display: inline-block;
        padding: 10px 0;
    }

    /* The box was 44px but the input inside it was 29px, so most of the
       control was not actually tappable. */
    .field {
        padding-block: 0;
        min-height: 46px;
    }

    .field input[type="number"] {
        align-self: stretch;
    }
}

/* The full wording ran the shape bar to three rows on a phone, pushing the
   sketch well below the fold. A shared "Redraw" label carries the verb there. */
.chip__short {
    display: none;
}

@media (max-width: 560px) {
    .chip__full {
        display: none;
    }

    .chip__short {
        display: inline;
    }

    /* Sharing a row with the chips, this label pushed them onto a fourth line.
       On its own line it costs 18px and saves about 90. */
    .shape-bar__label {
        flex-basis: 100%;
        margin-bottom: -2px;
    }
}

/* Ad units. Kept well away from the sketch and the tool panel: an ad next to a
   control someone is dragging is both an AdSense placement violation and a way
   to lose the click they meant to make. */
.ad-slot {
    display: block;
    max-width: 970px;
    margin: 32px auto 0;
    text-align: center;
}

.ad-slot__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Reserving the height stops a late-arriving ad from shoving the page down
   under someone's finger. */
.ad-slot .adsbygoogle {
    display: block;
    min-height: 100px;
}

/* Google reports an unsold unit by stamping the <ins>; collapse the label with
   it rather than leaving a labelled blank. */
.ad-slot:has(.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* ---- material strip (phones) ------------------------------------------ */

/* Empty and out of the way on a wide screen: the picker only moves in here when the
   layout goes single column. */
.material-bar {
    display: none;
}

@media (max-width: 899px) {
    /* Picker first, then how the armed material goes down: one cluster under the sketch
       instead of the paint modes sitting a paragraph of help further down the page. */
    .material-bar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        margin-top: 10px;
    }

    /* The column's gap spaces these; their own margin would double it. */
    .material-bar .mode-bar,
    .material-bar .wave-fields {
        margin-bottom: 0;
    }

    /* One row that scrolls sideways, sitting right under the sketch. Down the page in
       the tools panel it was a scroll away, and every pick meant scrolling back up to
       see what it did. */
    .material-bar .tool-grid {
        display: flex;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .material-bar .tool-group,
    .material-bar .tool {
        flex: 0 0 auto;
        max-width: 60vw;
    }

    .material-bar .tool-group__head,
    .material-bar .tool {
        min-height: 52px;
        white-space: nowrap;
    }

    /* Prices belong in the dropdown and the reference table, not in a row that has to
       stay narrow enough to fit several materials on screen at once. */
    .material-bar > .tool-grid > .tool .tool__meta {
        display: none;
    }

    /* The panel keeps the paint modes and the help text, but its heading would now sit
       above an empty space where the picker used to be. Moved off screen rather than
       removed, so the section still announces itself to a screen reader. */
    .planner__tools .panel__title {
        position: absolute;
        left: -9999px;
    }

    .tool-scroll {
        max-height: none;
        overflow-y: visible;
    }
}

/* ---- guide articles ---------------------------------------------------- */

.guide-crumb {
    margin: 0 0 6px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* The opening paragraph carries the whole promise of the page, so it reads a step up
   from the body without shouting. */
.guide-lede {
    font-size: 1.05rem;
    line-height: 1.6;
}

.prose ul,
.prose ol {
    color: var(--muted);
    padding-left: 20px;
    margin: 14px 0;
}

.prose li {
    margin-bottom: 8px;
}

.prose li strong,
.prose p strong {
    color: var(--ink);
}

.prose .table-scroll {
    margin: 18px 0;
}

/* The one line of arithmetic each guide is really about. */
.formula {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    line-height: 1.9;
}

.formula code {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
}

.guide-cta {
    margin: 26px 0 18px;
}

.guide-list h2 a {
    text-decoration: none;
}

.guide-list h2 a:hover {
    text-decoration: underline;
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq__list {
    margin: 0;
}

.faq__list dt {
    font-weight: 650;
    color: var(--ink);
    margin-top: 20px;
}

.faq__list dd {
    margin: 6px 0 0;
    color: var(--muted);
}