/* ===== Layered wood art generator (/tools/layers) =====
   On the site's own tokens (style.css :root); the wood colours are the ones the
   preview paints, so the legend and the pieces read as the same material. */

.lg {
    --lg-wood: #c8955c;
    --lg-glued: #f0c27a;
    --lg-gone: #e0242a;
    --lg-cut: #ff6b5e;
    --lg-score: #6ea8ff;
    --lg-radius: 16px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* style.css has no [hidden] rule, and the display values below would beat the
   browser's own: without this, hidden panels stay on screen. */
.lg [hidden] { display: none !important; }

.lg-hero { text-align: center; padding: 3.5rem 0 2.2rem; position: relative; }
.lg-hero::before {
    content: "";
    position: absolute;
    inset: -2rem 0 auto;
    height: 24rem;
    background: radial-gradient(ellipse at 50% 30%, rgba(200, 149, 92, 0.18) 0%, transparent 62%);
    pointer-events: none;
    z-index: -1;
}
.lg-eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.9rem; border-radius: 999px;
    border: 1px solid rgba(240, 168, 48, 0.28); background: rgba(232, 98, 26, 0.08);
    color: var(--accent-light); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
    margin-bottom: 1.2rem;
}
.lg-hero h1 {
    font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance;
    background: linear-gradient(135deg, var(--text) 10%, #e9c48f 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 0.9rem;
}
.lg-lead { max-width: 640px; margin: 0 auto; color: var(--text-secondary); font-size: 1.05rem; }

.lg-app { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }

.lg-panel { display: grid; gap: 1rem; }
.lg-step {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--lg-radius);
    padding: 1.1rem 1.2rem; display: grid; gap: 0.8rem;
}
.lg-step h2 { font-size: 1rem; text-align: left; margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.lg-n {
    width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center;
    background: rgba(200, 149, 92, 0.18); color: #e9c48f; font-size: 0.8rem; font-weight: 700;
}
.lg-hint { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; }
.lg-hint:empty { display: none; }

.lg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; background: var(--bg-dark); border-radius: 10px; border: 1px solid var(--border); }
.lg-seg button {
    font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    background: transparent; border: 0; border-radius: 7px; padding: 0.5rem 0.6rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.lg-seg button[aria-pressed="true"] { background: var(--bg-card-hover); color: var(--text); }
.lg-seg-sm { display: inline-grid; }
.lg-sheets button { display: grid; gap: 0.1rem; line-height: 1.2; }
.lg-sheets small { font-size: 0.72rem; color: var(--text-secondary); font-weight: 400; }
.lg-seg-sm button { font-size: 0.8rem; padding: 0.4rem 0.9rem; }

.lg-drop {
    display: grid; justify-items: center; gap: 0.25rem; text-align: center;
    padding: 1.1rem; border: 1.5px dashed rgba(255, 255, 255, 0.18); border-radius: 12px;
    color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; transition: border-color .15s, background .15s;
}
.lg-drop i { font-size: 1.4rem; color: #e9c48f; }
.lg-drop small { font-size: 0.72rem; opacity: 0.8; }
.lg-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lg-drop:hover, .lg-drop.is-over { border-color: #e9c48f; background: rgba(200, 149, 92, 0.06); }
.lg-drop:focus-within { outline: 2px solid var(--accent-light); outline-offset: 2px; }

.lg-samples { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--text-secondary); }
.lg-chip {
    font: inherit; font-size: 0.78rem; color: var(--text); background: var(--bg-dark);
    border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer;
}
.lg-chip:hover { border-color: #e9c48f; }
.lg-chip[aria-pressed="true"] { border-color: #e9c48f; color: #e9c48f; }

.lg-photo { display: grid; gap: 0.6rem; }
.lg-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lg-photo-pair figure { margin: 0; display: grid; gap: 0.25rem; }
.lg-photo-pair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--bg-dark); }
.lg-photo-pair img:not([src]) { visibility: hidden; }
.lg-photo-pair figcaption { font-size: 0.72rem; color: var(--text-secondary); }
.lg-wide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.lg-auth { display: grid; gap: 0.6rem; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; }
.lg-auth-lead { font-size: 0.84rem; }
.lg-auth-step { display: grid; gap: 0.45rem; }
.lg-auth label { font-size: 0.8rem; font-weight: 600; }
.lg-auth input[type=email], .lg-auth input[type=text] {
    font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; width: 100%;
}
.lg-auth input:focus { outline: none; border-color: #e9c48f; }
#lg-code { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; font-size: 1.2rem; text-align: center; }
.lg-check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400 !important; color: var(--text-secondary); cursor: pointer; }
.lg-check input { accent-color: #c8955c; margin-top: 0.2rem; flex: none; }
.lg-auth-links { font-size: 0.78rem; color: var(--text-secondary); text-align: center; }
.lg-auth-status:empty { display: none; }
.lg-field { display: grid; gap: 0.3rem; min-width: 0; }
.lg-field label { font-size: 0.82rem; font-weight: 600; display: flex; justify-content: space-between; }
.lg-field output { color: #e9c48f; font-variant-numeric: tabular-nums; }
.lg-field input[type=range] { width: 100%; accent-color: #c8955c; }
.lg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; }
.lg-unit { display: flex; align-items: center; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 0 0.6rem; }
.lg-unit input, .lg-unit output { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 0.9rem; padding: 0.45rem 0; font-variant-numeric: tabular-nums; }
.lg-unit input:focus { outline: none; }
.lg-unit:focus-within { border-color: #e9c48f; }
.lg-unit span { font-size: 0.78rem; color: var(--text-secondary); }
.lg-size { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.5rem; }
.lg-size-link { color: var(--text-secondary); font-size: 0.95rem; padding-bottom: 0.6rem; }
.lg-switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.lg-switch input { accent-color: #c8955c; width: 1rem; height: 1rem; }
.lg-adv summary { font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.lg-adv[open] summary { margin-bottom: 0.6rem; }
.lg-adv > div + div, .lg-adv > .lg-field { margin-top: 0.6rem; }

.lg-layers { list-style: none; display: grid; gap: 0.3rem; margin: 0; padding: 0; }
.lg-layer {
    display: grid; grid-template-columns: 0.9rem auto minmax(0, 1fr); gap: 0.55rem; align-items: center;
    padding: 0.35rem 0.55rem 0.35rem 0.3rem; border-radius: 9px; background: var(--bg-dark);
    border: 1px solid var(--border); font-size: 0.82rem; cursor: pointer; user-select: none;
}
.lg-layer:hover { border-color: rgba(255, 255, 255, 0.2); }
.lg-layer:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; }
.lg-layer.is-selected { border-color: #6ea8ff; background: rgba(110, 168, 255, 0.12); }
.lg-layer.holds-selection { box-shadow: inset 3px 0 0 #6ea8ff; }
.lg-layer.is-back { cursor: default; opacity: 0.85; }
.lg-layer.is-dragging { opacity: 0.4; }
.lg-layer.is-drop { border-color: #e9c48f; box-shadow: 0 -2px 0 #e9c48f; }
.lg-grip { color: var(--text-secondary); font-size: 0.85rem; cursor: grab; text-align: center; touch-action: none; padding: 0.4rem 0; }
.lg-layer.is-dragging { cursor: grabbing; }
.lg-thumb { width: 2.6rem; height: auto; border-radius: 4px; display: block; }
.lg-layer b { font-weight: 600; display: block; }
.lg-layer small { color: var(--text-secondary); font-size: 0.74rem; }
.lg-open { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; }
.lg-open img { border-radius: 5px; }
.lg-opened { font-size: 0.84rem; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; }
.lg-noapp { font-size: 0.82rem; color: #f0c27a; background: rgba(240, 168, 48, 0.08); border: 1px solid rgba(240, 168, 48, 0.2); border-radius: 10px; padding: 0.55rem 0.7rem; }
.lg-open-error { color: var(--lg-gone); }
.lg-dl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.lg-dl-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.lg-stage { position: sticky; top: 1rem; display: grid; gap: 0.9rem; min-width: 0; }
.lg-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lg-busy { font-size: 0.8rem; color: var(--text-secondary); }
.lg-canvas-wrap { background: #0d0f15; border: 1px solid var(--border); border-radius: var(--lg-radius); padding: 1.2rem; display: grid; place-items: center; }
.lg-canvas-box { position: relative; width: 100%; max-width: min(100%, 72vh); line-height: 0; }
#lg-stack { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.45); cursor: pointer; }
#lg-select { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 4px; }
.lg-canvas-hint { text-align: center; }
.lg-selbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
    background: var(--bg-dark); border: 1px solid var(--border); border-radius: 10px; padding: 0.45rem 0.55rem;
}
.lg-sel-what { font-size: 0.78rem; color: var(--text-secondary); flex: 1 1 10rem; min-width: 0; }
.lg-sel-actions { display: flex; gap: 0.35rem; }
.lg-act {
    font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--bg-dark);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.75rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.lg-act:hover:not([disabled]) { border-color: #6ea8ff; }
.lg-act[disabled] { opacity: 0.4; cursor: default; }
.lg-act-quiet { padding: 0.4rem 0.55rem; color: var(--text-secondary); }
.lg-edits { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; font-size: 0.8rem; color: var(--text-secondary); }
.lg-link { font: inherit; font-size: 0.8rem; color: var(--accent-light); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.lg-link:hover { color: var(--glow); }
.lg-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.lg-piece { margin: 0; display: grid; gap: 0.3rem; }
.lg-piece canvas { width: 100%; height: auto; background: #fff; border-radius: 6px; }
.lg-piece figcaption { font-size: 0.75rem; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 0.4rem; }
.lg-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.78rem; color: var(--text-secondary); }
.lg-sw { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -1px; }
.lg-sw-wood { background: var(--lg-wood); }
.lg-sw-glued { background: var(--lg-glued); }
.lg-sw-gone { background: var(--lg-gone); }
.lg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.lg-stats div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.8rem; }
.lg-stats dt { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.lg-stats dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-note { font-size: 0.82rem; color: #f0c27a; background: rgba(240, 168, 48, 0.08); border: 1px solid rgba(240, 168, 48, 0.2); border-radius: 10px; padding: 0.6rem 0.8rem; }

@media (max-width: 900px) {
    .lg { padding: 0 1rem 3rem; }
    .lg-hero h1 { font-size: 2.1rem; }
    .lg-app { grid-template-columns: minmax(0, 1fr); }
    .lg-stage { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .lg-drop { transition: none; } }