/* commodities.css - shared styles for the public Trade Ledger and Trade
   Routes pages (ledger.php, routes.php). Adapted from the imported
   obsidian-commodities static project per the 18 Sep 2026 project review:
   colours, radii, and the scrollbar treatment now come straight from
   root.css (the imported project's own :root tokens were already
   byte-for-byte identical to root.css's), the bespoke topbar/nav/footer
   were dropped in favour of the site's shared nav.php/footer.html, and the
   Google Fonts Orbitron/Rajdhani pairing was dropped in favour of the
   site's own Obsidian/Arial fonts already set globally by root.css - full
   match, no Google Fonts, per the site owner's confirmed answer.
   Everything below is scoped under .commodities-page so these fairly
   generic class names (.panel, .stat, .note, .empty, .muted, etc.) can
   never collide with any other page's styles. --muted/--buy/--sell are
   specific to this page's buy/sell colour coding and are scoped the same
   way rather than added to the site-wide :root in root.css. */

.commodities-page {
    --buy: #4ade80;
    --sell: #fbbf24;
}

.commodities-page .hero {
    text-align: center;
    /* No top padding: the title's own margin sets the gap under the nav, the
       same as every other page (this used to add 2.2rem on top of it). */
    padding: 0 1.2rem 1rem;
}

.commodities-page .hero p {
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;
}

.commodities-page .livebar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    color: var(--muted);
    font-size: .92rem;
}

.commodities-page .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sell);
    display: inline-block;
}

.commodities-page .dot.ok {
    background: var(--buy);
    box-shadow: 0 0 8px var(--buy);
}

.commodities-page .dot.err {
    background: #fb7185;
}

.commodities-page .chip {
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    padding: .18rem .65rem;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--highlight-colour);
}

.commodities-page .wrap {
    width: calc(100% - 3rem);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 4rem;
}

.commodities-page .panel {
    background: color-mix(in srgb, var(--background-mid) 80%, #000);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius2);
}

.commodities-page .form {
    display: grid;
    /* minmax(0, 1fr): a plain 1fr column cannot shrink below its content's
       min-width, so a long <select> option pushed the grid wider than a
       phone screen - how wide depended on the device's font. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
}

.commodities-page .field {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    min-width: 0;
}

.commodities-page .field.span2 {
    grid-column: span 2;
}

/* Labels, fields, button and stat tiles match the site-wide components
   (root.css .os-label / .os-btn / .os-stat) since the 21 Sep 2026
   consistency pass. */
.commodities-page .field label {
    font-size: var(--label-size);
    font-weight: bold;
    color: var(--muted);
}

.commodities-page input,
.commodities-page select {
    /* border-box: without it the 100% width plus padding and border spills
       out of narrow grid columns (it scrolled sideways at phone width). */
    box-sizing: border-box;
    max-width: 100%;
    height: var(--control-h);
    background: var(--background-dark);
    border: 0.125rem solid var(--border-colour);
    color: #fff;
    border-radius: var(--radius1);
    padding: 0 .8rem;
    font: inherit;
    color-scheme: dark;
    transition: border-color .2s, box-shadow .2s;
}

.commodities-page input:focus,
.commodities-page select:focus {
    outline: none;
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

.commodities-page option {
    background: #07121C;
}

/* Reset is a grid item in .form, so without justify-self it stretched to a
   whole filter column and read as a fourth dropdown (24 Sep). It is a
   normal button now: as wide as its text needs, with a sensible minimum so
   it stays an easy target. */
.commodities-page .go {
    align-self: end;
    justify-self: start;
    min-width: 7rem;
    min-height: var(--control-h);
    background: var(--gradient-main);
    border: 0.125rem solid var(--highlight-colour);
    color: #fff;
    cursor: pointer;
    padding: .45rem 1rem;
    border-radius: var(--radius1);
    font-family: var(--font-display);
    font-size: .95rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.commodities-page .go:hover {
    transform: scale(1.03);
    box-shadow: 0 0 10px var(--glow-colour);
}

.commodities-page .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin: 1rem 0;
}

/* commodities.js writes <b>number</b><span>label</span>; flex order puts
   the label on top to match the Supply Chain tiles without touching the JS. */
.commodities-page .stat {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .9rem 1rem;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    text-align: center;
}

.commodities-page .stat b {
    order: 2;
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.45rem;
    color: var(--highlight-colour);
    font-variant-numeric: tabular-nums;
}

.commodities-page .stat span {
    order: 1;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.commodities-page .layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
}

.commodities-page .list {
    max-height: 720px;
    overflow: auto;
    padding: .55rem;
}

.commodities-page .cbtn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    padding: .65rem .7rem;
    border-radius: .45rem;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    font: inherit;
}

.commodities-page .cbtn:hover {
    border-color: var(--border-colour);
    background: rgba(255, 255, 255, .04);
}

.commodities-page .cbtn.active {
    border-color: var(--highlight-colour);
    background: color-mix(in srgb, var(--main-colour1) 35%, #000);
}

.commodities-page .cbtn small {
    color: var(--muted);
    font-size: .85rem;
}

.commodities-page .detail {
    padding: 1.1rem 1.2rem;
}

.commodities-page .detail h2 {
    letter-spacing: .06em;
    margin-bottom: .35rem;
}

.commodities-page .muted {
    color: var(--muted);
    font-size: .95rem;
}

.commodities-page .price-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: .9rem 0;
}

.commodities-page .pcard {
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    padding: .8rem 1rem;
    background: rgba(0, 0, 0, .25);
}

.commodities-page .pcard .k {
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
}

.commodities-page .pcard .v {
    font-size: 1.35rem;
    font-weight: 700;
}

.commodities-page .buy {
    color: var(--buy);
}

.commodities-page .sell {
    color: var(--sell);
}

.commodities-page table {
    width: 100%;
    border-collapse: collapse;
}

.commodities-page th,
.commodities-page td {
    padding: .55rem .5rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--border-colour) 70%, transparent);
    vertical-align: top;
    font-size: .95rem;
}

.commodities-page th {
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--muted);
    text-transform: uppercase;
}

.commodities-page .sys {
    display: inline-block;
    min-width: 4.2rem;
    font-size: .68rem;
    letter-spacing: .04em;
    border: 1px solid var(--border-colour);
    padding: .1rem .35rem;
    border-radius: 4px;
    text-align: center;
}

.commodities-page .sys.Stanton {
    color: #7dd3fc;
}

.commodities-page .sys.Pyro {
    color: #fb923c;
}

.commodities-page .sys.Nyx {
    color: #c4b5fd;
}

.commodities-page .where {
    color: var(--muted);
    font-size: .85rem;
}

.commodities-page .note {
    color: var(--muted);
    margin-top: .9rem;
    font-size: .92rem;
}

.commodities-page .note a {
    color: var(--highlight-colour);
}

.commodities-page .routes {
    display: grid;
    gap: .75rem;
}

.commodities-page .route {
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    background: rgba(0, 0, 0, .28);
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: 1.35fr auto 1.35fr;
    gap: .75rem;
    align-items: center;
}

.commodities-page .leg .lbl {
    font-size: .62rem;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
}

.commodities-page .leg .place {
    font-weight: 700;
    font-size: 1.05rem;
}

.commodities-page .arrow {
    text-align: center;
    color: var(--highlight-colour);
    font-size: .78rem;
    letter-spacing: .06em;
}

.commodities-page .metrics {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    border-top: 1px solid color-mix(in srgb, var(--border-colour) 70%, transparent);
    padding-top: .65rem;
}

.commodities-page .metric {
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .95rem;
}

.commodities-page .metric b {
    color: var(--highlight-colour);
}

.commodities-page .risk-low {
    color: var(--buy);
}

.commodities-page .risk-high {
    color: #fb7185;
}

.commodities-page .empty {
    color: var(--muted);
    padding: 1.4rem .2rem;
    font-size: 1rem;
}

.commodities-page .warn {
    color: #fbbf24;
}

@media (max-width: 980px) {
    .commodities-page .form,
    .commodities-page .stats,
    .commodities-page .layout,
    .commodities-page .price-cards,
    .commodities-page .route {
        grid-template-columns: minmax(0, 1fr);
    }

    .commodities-page .field.span2 {
        grid-column: auto;
    }

    /* One column at this width: a start-aligned Reset would sit stranded
       on the left, so it lines up with the fields above it. */
    .commodities-page .go {
        justify-self: stretch;
    }

    .commodities-page .list {
        max-height: 260px;
    }
}

/* Trade / Ledger / Routes titles use the shared .os-page-title and
   .os-page-sub classes (root.css); the Routes/Ledger filters use .os-tabs.
   Nothing page-specific is needed for either any more. */