/* =============================================================
   two_way.css  —  Two-way Slab design module

   Grid + layout principles applied (Müller-Brockmann / Vignelli):
   1. Content determines the container — every element sized to data
   2. Hierarchy first — values dominate, labels and units recede
   3. Invisible structure — grid holds without calling attention
   4. Consistency and regularity — one spacing scale used throughout
   5. Cinematic flow — sections read top-to-bottom without friction
   6. Gutters as breathing room — whitespace is structural
   7. Typographic contrast — weight creates hierarchy, not decoration

   Shared tokens (--bg, --text, --muted, --card, --border,
   --accent, --accentLight, --danger) come from base.css.
   This file only defines what is specific to this page.
============================================================= */

/* =============================================================
   FONTS
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* =============================================================
   PAGE TOKENS
   One spatial scale: 4px base unit × multipliers.
   Everything — padding, gap, margin — is a multiple of 4.
   Vignelli: "the grid provides consistency to the layouts."
============================================================= */
:root {
    /* Spacing scale — 4px base */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;

    /* Engineering palette */
    --brand:          #2563eb;
    --brand-light:    #93c5fd;
    --brand-dim:      #dbeafe;
    --result-ok-bg:   #f0fdf4;
    --result-ok-text: #065f46;

    /* Typography scale — two weights only: 600 (label) and 700 (value) */
    --font-sans:  'DM Sans',  sans-serif;
    --font-mono:  'DM Mono', monospace;
    --font-label: 11px;
    --font-value: 15px;
    --font-unit:  11px;

    /* Shadows */
    --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-panel:  0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-raised: 0 6px 18px rgba(37, 99, 235, 0.10);

    /* Border radius — one value used everywhere for consistency */
    --radius-tile:   8px;
    --radius-card:   12px;
    --radius-panel:  10px;
    --radius-input:  8px;
    --radius-badge:  999px;
}

/* Dark mode token overrides */
body.dark {
    --brand:          #60a5fa;
    --brand-light:    #3b82f6;
    --brand-dim:      #1e3a5f;
    --result-ok-bg:   #052e16;
    --result-ok-text: #86efac;
}

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

/* =============================================================
   BASE
============================================================= */
body {
    font-family:     var(--font-sans);
    background:      var(--bg);
    color:           var(--text);
    margin:          0;
    line-height:     1.5;
    /* Principle: body text line-height 1.5 — optimal for reading
       technical content without feeling cramped */
    transition:      background 0.2s, color 0.2s;
}

/* =============================================================
   CONTAINER
   Max-width chosen so tiles at min 130px fill naturally on 1100px.
   Principle: container width determined by content (tile grid).
============================================================= */
.container {
    max-width: 1100px;
    margin:    0 auto;
    padding:   var(--sp-5) var(--sp-5) var(--sp-10);
}

/* =============================================================
   PAGE HEADER  (sticky)
   Principle: status information stays in view during scroll —
   engineer needs to know design state without scrolling back up.
============================================================= */
.page-header {
    background:    var(--card);
    border:        1px solid var(--border);
    border-radius: var(--radius-card);
    padding:       var(--sp-4) var(--sp-5);     /* 16px 20px */
    margin-bottom: var(--sp-5);
    position:      sticky;
    top:           0;
    z-index:       50;
    box-shadow:    var(--shadow-card);
    transition:    background 0.2s, border-color 0.2s;
}

.page-header-top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             var(--sp-4);
}

/* Breadcrumb — smallest type, muted, navigational only */
.page-breadcrumb {
    display:       flex;
    align-items:   center;
    gap:           var(--sp-2);
    font-size:     11px;
    color:         var(--muted);
    margin-bottom: var(--sp-2);
    font-family:   var(--font-mono);
    letter-spacing: 0.3px;
}

.page-breadcrumb a {
    color:           var(--brand);
    text-decoration: none;
}

.page-breadcrumb a:hover { text-decoration: underline; }

/* H1 — primary hierarchy: large, bold, immediately reads as title */
.page-title-group h1 {
    margin:         0;
    font-size:      22px;
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.4px;
    line-height:    1.2;
}

/* Page meta — secondary hierarchy: mono, muted, smaller */
.page-meta {
    margin:      var(--sp-1) 0 0;
    font-size:   12px;
    color:       var(--muted);
    font-family: var(--font-mono);
}

/* Badge + status column — right-aligned, recedes from title */
.page-header-right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--sp-1);
    flex-shrink:    0;
}

/* Badge */
.page-badge {
    font-size:      11px;
    font-weight:    600;
    font-family:    var(--font-mono);
    padding:        3px var(--sp-3);
    border-radius:  var(--radius-badge);
    background:     var(--brand-dim);
    color:          var(--brand);
    white-space:    nowrap;
    letter-spacing: 0.4px;
}

.page-badge.success { background: var(--result-ok-bg);  color: var(--result-ok-text); }
.page-badge.warning { background: #fef3c7; color: #92400e; }
.page-badge.danger  { background: #fee2e2; color: #991b1b; }

/* Status — tertiary hierarchy, changes colour by state */
.page-status {
    font-size:   11px;
    color:       var(--muted);
    font-family: var(--font-mono);
    transition:  color 0.15s;
}

.page-status[data-state="ok"]      { color: var(--result-ok-text); }
.page-status[data-state="warning"] { color: #b45309; }
.page-status[data-state="busy"]    { color: var(--brand); }

/* =============================================================
   CARD
   Principle: the card is the primary container unit — consistent
   radius, consistent right accent, consistent shadow.
   "The content determines the container." — Vignelli
============================================================= */
.card {
    background:    var(--card);
    border:        1px solid var(--border);
    border-right:  4px solid var(--brand-light);  /* accent edge */
    border-radius: var(--radius-card);
    margin-bottom: var(--sp-5);
    overflow:      hidden;
    transition:    background 0.2s, border-color 0.2s;
    box-shadow:    var(--shadow-card);
}

/* Card heading — monospace, uppercase, muted, small.
   Principle: section labels are structural, not decorative — they
   should be readable but not compete with content for attention. */
.card h2 {
    margin:          0;
    padding:         var(--sp-3) var(--sp-4);     /* 12px 16px */
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  1.4px;
    text-transform:  uppercase;
    font-family:     var(--font-mono);
    color:           var(--muted);
    background:      var(--bg);
    border-bottom:   1px solid var(--border);
}

/* =============================================================
   SUB-SECTION TITLE
   Thinner than h2 — tertiary label for field groupings.
   Principle: three distinct levels of hierarchy, no more.
============================================================= */
.sub-section-title {
    padding:        var(--sp-3) var(--sp-4) var(--sp-1);
    font-size:      10px;
    font-weight:    600;
    color:          var(--muted);
    font-family:    var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =============================================================
   FIELD NOTE
============================================================= */
.field-note {
    padding:    0 var(--sp-4) var(--sp-3);
    font-size:  11px;
    color:      var(--muted);
    margin:     0;
    font-style: italic;
}

/* =============================================================
   INFO GRID
   Principle: modular grid — auto-fill with 130px minimum.
   At 1100px container, this yields 5–7 columns naturally.
   Gutters (gap) are structural whitespace, not decoration.
============================================================= */
.info-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap:                   var(--sp-3);          /* 12px — consistent gutter */
    padding:               var(--sp-3) var(--sp-4) var(--sp-4);
    align-items:           start;
}

/* =============================================================
   INFO TILE
   Principle: each tile is a self-contained unit of information —
   label (who), value (what), unit (scale). Three things, no more.
   The tile border is subtle; content hierarchy does the work.
============================================================= */
.info-tile {
    background:     var(--card);
    border:         1px solid var(--border);
    border-radius:  var(--radius-tile);
    padding:        var(--sp-2) var(--sp-3);     /* 8px 12px */
    min-height:     68px;
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-1);
    transition:     border-color 0.15s, background 0.15s;
}

.info-tile:hover {
    border-color: var(--brand-light);
    background:   var(--bg);
}

/* AUTO tile — read-only, visually distinct but same tile shape.
   Dashed border signals "calculated, not entered". */
.calc-tile {
    background:   var(--bg);
    border-style: dashed;
}

/* AUTO label suffix */
.calc-tile .tile-label::after {
    content:        'AUTO';
    font-size:      9px;
    margin-left:    var(--sp-1);
    color:          var(--muted);
    letter-spacing: 0.6px;
    font-family:    var(--font-mono);
    opacity:        0.7;
}

/* Auto-calculated value — brand colour signals computed output */
.calc-value {
    font-size:            var(--font-value);
    font-weight:          700;
    color:                var(--brand);
    font-family:          var(--font-mono);
    font-variant-numeric: tabular-nums;
    line-height:          1.2;
}

/* Tile label — lightest weight in the hierarchy.
   Principle: labels exist to identify, not to compete. */
.tile-label {
    font-size:   var(--font-label);
    font-weight: 600;
    color:       var(--muted);
    line-height: 1.3;
    display:     flex;
    align-items: center;
    gap:         var(--sp-1);
    cursor:      default;
}

/* Edit dot — 5px accent circle signals interactivity without words */
.edit-dot {
    display:       inline-block;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--brand-light);
    flex-shrink:   0;
}

/* Value row: input → unit, left-to-right.
   Principle: consistent reading direction — value then unit. */
.tile-value-row {
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
    flex-wrap:   nowrap;
}

/* =============================================================
   TILE INPUT  (single canonical definition)
   Principle: one input style throughout — no variant confusion.
   Size determined by content: font-size 15px = engineer-readable.
============================================================= */
.tile-input {
    flex:                 1;
    width:                100%;
    min-width:            0;
    padding:              var(--sp-2) var(--sp-3);  /* 8px 12px */
    font-size:            var(--font-value);
    font-weight:          700;
    font-family:          var(--font-mono);
    font-variant-numeric: tabular-nums;
    color:                var(--text);
    background:           var(--card);
    border:               1.5px solid rgba(120, 120, 120, 0.22);
    border-radius:        var(--radius-input);
    outline:              none;
    transition:           border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.tile-input:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background:   rgba(37, 99, 235, 0.02);
}

.tile-input:focus {
    border-color: var(--brand);
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.10);
    background:   var(--brand-dim);
}

/* Select variant — custom chevron, no OS arrow */
.tile-select {
    cursor:              pointer;
    appearance:          none;
    -webkit-appearance:  none;
    padding-right:       var(--sp-8);
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
}

/* Error state */
.tile-input.input-error {
    border-color: #dc2626;
    box-shadow:   0 0 0 3px rgba(220, 38, 38, 0.10);
    background:   #fef2f2;
}

body.dark .tile-input.input-error { background: #2d1515; }

/* Remove number spinners */
.tile-input::-webkit-outer-spin-button,
.tile-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tile-input[type="number"]             { -moz-appearance: textfield; }

/* Dark mode inputs */
body.dark .tile-input {
    background:   rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color:        rgba(255, 255, 255, 0.92);
}

body.dark .tile-input:hover {
    border-color: rgba(96, 165, 250, 0.40);
    background:   rgba(96, 165, 250, 0.05);
}

body.dark .tile-input:focus {
    border-color: #60a5fa;
    box-shadow:   0 0 0 3px rgba(96, 165, 250, 0.12);
    background:   rgba(96, 165, 250, 0.08);
}

body.dark .tile-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* =============================================================
   UNIT LABEL  (single definition)
   Principle: units are navigational — mono, muted, small.
   They help the engineer verify context, not read data.
============================================================= */
.unit {
    font-size:      var(--font-unit);
    font-weight:    500;
    font-family:    var(--font-mono);
    color:          var(--muted);
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: 0.2px;
}

/* =============================================================
   BOUNDARY CONDITIONS
   Principle: the ETABS-style diagram communicates edge conditions
   spatially — one glance replaces four text labels.
   The diagram IS the grid for this section.
============================================================= */
.boundary-layout {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         var(--sp-4);
}

.boundary-top,
.boundary-bottom { width: 200px; }

.boundary-middle {
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
}

.boundary-side {
    width:           52px;
    display:         flex;
    justify-content: center;
}

/* Slab panel — the visual anchor of the boundary section */
.slab-panel {
    width:           200px;
    height:          200px;
    border:          2px solid var(--border);
    border-radius:   var(--radius-panel);
    background:      var(--bg);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-2);
    transition:      border-color 0.2s, background 0.2s;
    position:        relative;
    overflow:        hidden;
}

/* Engineering crosshatch — subtle structural texture.
   Principle: texture communicates material without decoration. */
.slab-panel::before {
    content:  '';
    position: absolute;
    inset:    0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(37, 99, 235, 0.03) 14px,
        rgba(37, 99, 235, 0.03) 15px
    );
    pointer-events: none;
}

.slab-title {
    font-size:      11px;
    font-weight:    700;
    font-family:    var(--font-mono);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color:          var(--text);
    position:       relative;
}

.slab-meta {
    font-size:   11px;
    color:       var(--muted);
    text-align:  center;
    line-height: 1.8;
    font-family: var(--font-mono);
    position:    relative;
}

.slab-ratio {
    font-size:   11px;
    color:       var(--brand);
    font-family: var(--font-mono);
    font-weight: 600;
    position:    relative;
}

/* Boundary selects */
.boundary-select {
    width:               100%;
    padding:             var(--sp-2) 28px var(--sp-2) var(--sp-3);
    font-size:           11px;
    font-family:         var(--font-sans);
    border:              1px solid var(--border);
    border-radius:       var(--radius-input);
    background:          var(--card);
    color:               var(--text);
    cursor:              pointer;
    appearance:          none;
    -webkit-appearance:  none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--sp-2) center;
    transition:          border-color 0.15s, box-shadow 0.15s;
}

.boundary-select:focus {
    outline:      none;
    border-color: var(--brand);
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* Vertical selects for left/right edges */
.boundary-select.vertical {
    writing-mode:     vertical-rl;
    transform:        rotate(180deg);
    width:            40px;
    height:           140px;
    padding:          var(--sp-3) var(--sp-1);
    font-size:        10px;
    text-align:       center;
    background-image: none;
}

body.dark .boundary-select {
    background-color: var(--card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

body.dark .boundary-select.vertical { background-image: none; }

/* =============================================================
   DESIGN RESULTS
   Principle: result panels use the SAME tile grid as input —
   invisible structure connects inputs and outputs visually.
   Required As is primary output; moment and k are secondary.
============================================================= */
.result-grid {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--sp-4);
    padding:     var(--sp-3) var(--sp-4) var(--sp-5);
    align-items: flex-start;
}

.result-panel {
    flex:           1;
    min-width:      220px;
    max-width:      340px;
    background:     var(--card);
    border:         1px solid var(--border);
    border-radius:  var(--radius-panel);
    box-shadow:     var(--shadow-card);
    display:        flex;
    flex-direction: column;
    transition:     border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.result-panel:hover {
    border-color: var(--brand-light);
    box-shadow:   var(--shadow-raised);
    transform:    translateY(-2px);
}

/* Panel title — same weight as card h2 for consistent hierarchy */
.result-panel-title {
    padding:        var(--sp-3) var(--sp-3);
    font-size:      10px;
    font-weight:    700;
    font-family:    var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background:     var(--bg);
    border-bottom:  1px solid var(--border);
    color:          var(--muted);
}

/* Result tile grid — same grid system as input tiles.
   Principle: one grid language throughout the page. */
.result-tile-grid {
    grid-template-columns: 1fr;   /* stack vertically inside panel */
    padding:               var(--sp-3);
    gap:                   var(--sp-2);
}

/* Result tile — inherits info-tile, smaller min-height */
.result-tile {
    min-height:     56px;
    justify-content: center;
}

/* Highlight tile — Required As.
   Principle: single accent colour for the most important output. */
.highlight-result {
    background:   var(--result-ok-bg);
    border-color: rgba(34, 197, 94, 0.25);
}

.highlight-result .tile-label,
.highlight-result .calc-value {
    color: var(--result-ok-text);
}

/* No-results state */
.no-results {
    text-align: center;
    padding:    var(--sp-10) var(--sp-5);
    color:      var(--muted);
}

.no-results-icon {
    font-size:      32px;
    margin-bottom:  var(--sp-3);
    display:        block;
    line-height:    1;
}

.no-results p { font-size: 13px; margin: 0; }

/* =============================================================
   PROVIDE LINE
   Principle: bar arrangement is a structured sub-row —
   same visual language as form, compact, reads left to right.
============================================================= */
.provide-line {
    display:     flex;
    align-items: center;
    flex-wrap:   nowrap;
    gap:         var(--sp-2);
    padding:     var(--sp-2) var(--sp-3) var(--sp-3);
    overflow-x:  auto;
}

/* Subtle scrollbar — allows overflow on very narrow panels */
.provide-line::-webkit-scrollbar { height: 3px; }
.provide-line::-webkit-scrollbar-thumb {
    background:    var(--border);
    border-radius: 2px;
}

.provide-label {
    font-size:      9px;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family:    var(--font-mono);
    flex-shrink:    0;
    white-space:    nowrap;
}

/* Provide-line selects — compact, share border language with tile-select */
.pl-select {
    padding:             var(--sp-1) 20px var(--sp-1) var(--sp-2);
    font-size:           12px;
    font-weight:         700;
    font-family:         var(--font-mono);
    color:               var(--text);
    background:          var(--card);
    border:              1.5px solid rgba(37, 99, 235, 0.25);
    border-radius:       6px;
    cursor:              pointer;
    appearance:          none;
    -webkit-appearance:  none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 5px center;
    flex-shrink:         0;
    transition:          border-color 0.15s, box-shadow 0.15s;
}

.pl-select:focus {
    outline:      none;
    border-color: var(--brand);
    box-shadow:   0 0 0 2px rgba(37, 99, 235, 0.12);
}

.pl-select           { min-width: 54px;  }  /* bar type    */
.pl-select--dia      { min-width: 64px;  }  /* diameter    */
.pl-select--spacing  { min-width: 82px;  }  /* spacing     */

.pl-static {
    color:       var(--muted);
    font-size:   12px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

body.dark .pl-select {
    background-color: rgba(255, 255, 255, 0.04);
    border-color:     rgba(96, 165, 250, 0.28);
    color:            rgba(255, 255, 255, 0.90);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* =============================================================
   FORM ACTIONS
   Principle: primary action right-aligned, visually dominant.
   Secondary action recedes — same position, lower weight.
============================================================= */
.form-actions {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             var(--sp-3);
    margin-top:      var(--sp-2);
    padding:         var(--sp-3) 0 var(--sp-6);
}

/* Primary — Design */
.recalc-btn {
    background:      var(--brand);
    color:           #fff;
    border:          none;
    border-radius:   10px;
    padding:         var(--sp-3) var(--sp-8);    /* 12px 32px */
    min-width:       140px;
    font-size:       14px;
    font-weight:     600;
    font-family:     var(--font-sans);
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-2);
    letter-spacing:  0.3px;
    transition:      background 0.18s, transform 0.15s, box-shadow 0.18s;
    box-shadow:      0 2px 8px rgba(37, 99, 235, 0.20);
}

.recalc-btn:hover {
    background:  #1d4ed8;
    transform:   translateY(-1px);
    box-shadow:  0 6px 16px rgba(37, 99, 235, 0.26);
}

.recalc-btn:active {
    transform:   translateY(0);
    box-shadow:  0 2px 8px rgba(37, 99, 235, 0.18);
}

.recalc-btn:focus-visible {
    outline:     none;
    box-shadow:  0 0 0 3px rgba(147, 197, 253, 0.6),
                 0 2px 8px rgba(37, 99, 235, 0.20);
}

.recalc-btn:disabled {
    background:  var(--brand-light);
    cursor:      not-allowed;
    transform:   none;
    box-shadow:  none;
}

/* Secondary — back */
.btn-secondary {
    background:      var(--card);
    color:           var(--muted);
    border:          1px solid var(--border);
    border-radius:   10px;
    padding:         var(--sp-3) var(--sp-5);
    font-size:       14px;
    font-weight:     500;
    font-family:     var(--font-sans);
    cursor:          pointer;
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-secondary:hover {
    background:   var(--bg);
    color:        var(--text);
    border-color: var(--brand-light);
}

/* =============================================================
   RESPONSIVE
   Principle: on small screens, stack everything single-column.
   The grid collapses gracefully — 2 tile columns minimum.
============================================================= */
@media (max-width: 768px) {

    .container          { padding: 14px 14px var(--sp-10); }
    .page-header        { position: static; }          /* no sticky on mobile */
    .page-header-top    { flex-direction: column; gap: var(--sp-2); }
    .page-header-right  { align-items: flex-start; }
    .page-title-group h1 { font-size: 18px; }

    .info-grid          { grid-template-columns: repeat(2, 1fr); }

    .result-grid        { flex-direction: column; }
    .result-panel       { max-width: 100%; }
    .result-tile-grid   { grid-template-columns: 1fr 1fr; }  /* 2-col on mobile */

    .slab-panel         { width: 140px; height: 140px; }
    .boundary-top,
    .boundary-bottom    { width: 140px; }
    .boundary-select.vertical { height: 100px; }

    .form-actions {
        flex-direction: column-reverse;
        align-items:    stretch;
    }

    .recalc-btn,
    .btn-secondary {
        width:           100%;
        justify-content: center;
        min-width:       0;
    }
}

@media (max-width: 420px) {
    /* Very small screens — single column tiles */
    .info-grid  { grid-template-columns: 1fr; }
}