/* ====================================================================
   Orange Duck Cycling Tools - shared form-tool styles
   --------------------------------------------------------------------
   Linked - after site.css, before the page's own inline <style> - by the
   calculator tools that share the standard form layout: Tyre Pressure,
   GPX Compressor, Gear Ratio, Power & Speed and Training Zones.

   It holds the "form chrome" those five pages had each been copying into
   their inline <style> verbatim: the page body base, the masthead
   heading scale, the numbered fieldset heads, the unit bar, the
   segmented toggle, the field grid and inputs, and the disclosure.

   The homepage and Fueller do NOT link this file - they have their own
   layouts - so nothing here can leak onto them. As with site.css, a page
   can still override any rule from its own inline <style> (which loads
   last); the point is that it shouldn't need to. Change a form-chrome
   value once, here.
   ==================================================================== */

/* ===== Page base ===== */
body {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
        radial-gradient(ellipse 55% 40% at 95% -6%, rgba(191,54,12,0.07) 0, transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* A section toggled by the `hidden` attribute stays hidden even if a page
   rule would otherwise hand it a `display` value. */
[hidden] { display: none !important; }

/* ===== Layout ===== */
.page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--page-pad-y) var(--page-pad-x);
}

/* ===== Masthead heading =====
   Shared masthead + divider CSS is in site.css; this is the tool h1
   scale, which all five form tools share. */
.masthead h1 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
}

/* ===== Form sections ===== */
fieldset { border: 0; padding: 0; margin: 0; }
legend, .section-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0;
}
.counter {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.1em;
    background: var(--accent-soft);
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    flex: 0 0 auto;
}
.heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.8vw, 1.6rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.022em;
    flex: 0 0 auto;
}
.rest-rule {
    flex: 1;
    height: 1px;
    background: var(--line);
    margin-left: 0.25rem;
}

/* ===== Unit bar ===== */
.unit-bar {
    display: flex;
    gap: 0.7rem 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}
.unit-bar .unit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ===== Segmented toggle ===== */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}
.seg button {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.34rem 0.72rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--accent); color: #fff; }

/* ===== Fields ===== */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.15rem 1.25rem;
    align-items: start;
}
@media (max-width: 520px) { .field-grid { grid-template-columns: 1fr; } }
.field-wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}
.field .note {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}

/* ===== Inputs =====
   Selectors are scoped to the input types the tools actually style, so
   this file can be linked by a page that also has range/radio/file
   inputs (the GPX tool) without restyling them. */
input[type=number], input[type=text], select {
    width: 100%;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.65rem 0.8rem;
    min-height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2380848B' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
    cursor: pointer;
}
input[type=number]:hover, input[type=text]:hover, select:hover { border-color: var(--muted); }
input[type=number]:focus, input[type=text]:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=number]:disabled, input[type=text]:disabled {
    background: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 0.4; }

/* ===== Disclosure (details / summary) =====
   The plain "+/-" disclosure. A page that wants a different summary
   (the GPX tool's triangle "How compression works" panel) overrides
   this with a more specific selector from its own inline <style>. */
details summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent);
    padding: 0.5rem 0;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; }
details[open] summary::before { content: "\2013 "; }
details summary:hover { color: var(--accent-deep); }

/* ===== Print ===== */
@media print {
    body { background: #fff; background-image: none; }
    .topbar, .site-nav { display: none !important; }
}