/* ==========================================================================
   RAILS — the nav panel and the aside panel
   ==========================================================================
   Copied VERBATIM from miti-exchange-2027/resources/css/layout.css — the
   sheet Miti's app.css ACTUALLY IMPORTS. Check that @import list before
   extracting: layout-2.css sits beside it, is imported by nothing, and is
   missing whole rule sets (it cost this file the pinned-tab-bar rules at
   the foot, and cost carousel.css and marketplace.css far more).
   Miti is the single source of truth for structure; this file and the
   partials in resources/views/partials/ are the only place that structure
   lives on this site.

   Loaded by layouts/app.blade.php for EVERY page, not per page. That is the
   point: a page cannot write its own rail markup and drift, because it does
   not write rail markup at all — it includes a partial and passes content.

   Do not add rules here that Miti does not have. If a rail needs something
   new, it needs it on Miti first.
   ========================================================================== */

/* ---------- the panel a rail sits in -----------------------------------
   Miti's .panel on desktop is a ROW flex with `padding: 0`, so a rail with
   `width:100%` and a 1.25rem side margin shrinks to 220 inside the 240
   column, and its own `margin-top: 1rem` puts it at y=96.

   This site's .panel (shell.css) is a COLUMN flex with `padding-top: 16px`,
   because its pages fill the panels with bare `.box` elements that carry no
   margin of their own. Both differences show the moment a Miti rail goes in:
   the rail came out 240 wide at y=112 instead of 220 at y=96.

   Scoped to panels that actually contain a rail, so the pages not yet
   converted keep working. WHEN EVERY PAGE USES THE RAIL COMPONENTS this
   block goes away and shell.css's .panel is replaced by Miti's verbatim —
   that is the end state, and this is the bridge to it, not the answer. */
.panel:has(> .aside-section),
.panel:has(> .nav-rail-fill) {
    padding-top: 0;

    /* COLUMN, not row.
       Miti's panel is a row flex holding exactly ONE rail, and a row was
       what reproduced its 220-in-240 geometry: the rail is width:100% with
       a 1.25rem right margin, so it overflows and flex-shrink pulls it back
       to 220.

       That only works for one child. The browse page (/projects on Zuva,
       /schemes on Akwa) has TWO aside sections —
       "Closing soonest" and the map — and in a row they sat side by side at
       92px each. In a column they stack and `width: auto` below gives the
       same 220, however many there are. */
    flex-direction: column;
    align-items: stretch;
}

/* width:auto, not 100%: in a column flex an auto-width child stretches to
   the cross axis MINUS its own margins — 240 less the 1.25rem side margin
   is 220, which is Miti's number. width:100% resolves against the full 240
   and then overflows by the margin, which is what put the nav rail at
   20..260 inside a 0..240 panel. Both rails, same reason. */
.panel > .aside-section,
.panel > .nav-rail-fill { width: auto; }

/* ---------- panels shared by both rails ---------- */
.wht-pnl {
    width: 100%;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.lgt-pnl {
    width: 100%;
    background: #FEFDFA;
}

/* ---------- the aside (right) rail ---------- */
.aside-section {
    position: sticky;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - (var(--bar-h) * 3.75));
    overflow: hidden;
    margin: 1rem 1.25rem 0 0;
    width: 100%;

    /* Miti's markup says `rounded-xl`, which Tailwind resolves through
       --radius-xl. Miti's token is 0.75rem; THIS SITE'S tokens.css defines
       the same name as 1.25rem, so the identical class produced a 20px
       corner here against Miti's 12px. Stated outright rather than left to
       a token the two sites disagree on. */
    border-radius: 0.75rem;
}

.aside-body {
    overflow-y: auto;
    flex: 0 1 auto;
    min-height: 0;
    margin-right: -1rem;
    padding-right: 1rem;
}

/* .aside-header and .aside-footer carry no rules on Miti either — they are
   structural hooks, and .aside-footer is an empty div. Kept in the markup
   because the markup is copied, not paraphrased. */

/* ---------- the nav (left) rail ---------- */
.nav-rail-fill {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - (var(--bar-h) * 3.75));

    /* Miti puts these on .nav-section, because its rail holds exactly one.
       Ours holds a stack, so they belong to the column — one value, not one
       per card. The 1rem top is what puts the first card at y=96, level with
       the aside rail's first card, exactly as Miti's two line up. */
    margin: 1rem 0 0 1.25rem;
}

.nav-section {
    position: sticky;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: calc(100vh - (var(--bar-h) * 3.75));
    overflow: hidden;
    margin: 1rem 0 0 1.25rem;
}

.nav-section.nav-quote {
    max-height: calc(100vh - 30rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nav-scroll {
    overflow-y: auto;
    flex: 1;
    scrollbar-gutter: stable;
}

/* ---------- a STACK of cards in the rail ------------------------------
   Miti's rail holds ONE block, so .nav-section is sticky and height-capped:
   it clips its single card to the viewport on purpose, and the .nav-scroll
   INSIDE it does the scrolling. Put two cards in it and that cap does what
   Garikayi photographed — the Category list stopped mid-row and "Who writes
   this" never appeared at all.

   So the cards stack and ONE of them carries Miti's scroll. Each card is an
   ordinary block; the card marked --scroll takes whatever height is left and
   scrolls its own body, heading staying put. That is Miti's arrangement, not
   a new one: .nav-section clips, .nav-scroll scrolls.

   The rules Miti needs for its one-block rail are left above, untouched, for
   a rail that has one.

   This is the customisation Garikayi asked for — "you might need to
   customise it so it displays like that" — and it is here, in the shared
   sheet, rather than on the page that happened to need it first. */
.nav-rail-fill > .nav-section {
    position: static;
    max-height: none;
    height: auto;
    overflow: hidden;          /* Miti's: the card clips, .nav-scroll scrolls */
    flex: none;
    margin: 0 0 1rem 0;

    /* .wht-pnl's own 0.5rem is right for an advert that fills its panel edge
       to edge; a card of text needs the room. */
    padding: 1rem;
}
.nav-rail-fill > .nav-section:last-child { margin-bottom: 0; }

/* The one card that scrolls. It takes the rail's remaining height and lays
   its heading and body out as a column, so .nav-scroll gets the leftover and
   the heading never moves. min-height:0 is what lets a flex child actually
   shrink below its content — without it the card grows and the rail
   overflows instead of scrolling. */
.nav-rail-fill > .nav-section--scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nav-banner {
    margin: auto 0 1rem 1.25rem;   /* margin-top:auto pins to bottom; left inset matches .nav-section */
    display: block;
}

.nav-banner__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- the sticky tab bars ---------------------------------------
   Copied VERBATIM from Miti, INCLUDING the selector. Miti pairs #tptab with
   .stat-grid--nav in one rule — the media hub's tab bar and the community
   directory's stat nav are the same component in two places — and the pair
   is the point: split them and they drift, which is exactly what happened
   here (media sticky, community not, neither rising with the menu).

   .tabs--raised is added by public/js/header.js in lockstep with
   .menu--hidden, so when the header tucks away on a downward scroll the bar
   rises one bar-height to sit snug under the menu. Copying this CSS without
   that JS is why the bar stayed put while Miti's moved.

   top: the two stacked bars, the same expression the layout uses for
   scroll-padding — see shell.css. */
#tptab,
.stat-grid--nav {
    position: sticky;
    top: calc(var(--bar-h) * 2);
    z-index: 100;              /* over page content; under .menu (290) */
    background: #ffffff;
    transition: transform 0.25s ease;
}

/* Miti's markup says `rounded-b-lg`, which Tailwind resolves through
   --radius-lg. Miti's token is 0.5rem; THIS SITE'S tokens.css defines the
   same name as 0.875rem, so the identical class produced a 14px corner here
   against Miti's 8px. Same collision as --radius-xl on .aside-section.
   Stated outright rather than left to a token the two sites disagree on. */
#tptab { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

#tptab.tabs--raised,
.stat-grid--nav.tabs--raised {
    transform: translateY(calc(-1 * var(--bar-h)));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---------- avatars --------------------------------------------------
   Copied VERBATIM from Miti's .avatar rules. One component, one set of
   rules, every size Miti has — <x-avatar> renders them.

   --radius-full is Miti's token name and this site does not define it
   (it has sm/lg/xl/pill), so the value is stated. Same collision as
   --radius-xl and --radius-lg elsewhere in this file. */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 62.5rem;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
    background: var(--color-brand-100);
    color: var(--color-brand-700);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: inherit;
    letter-spacing: 0.03em;
}

.avatar--xs  { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar--sm  { width: 2rem;   height: 2rem;   font-size: 0.75rem;  }
.avatar--md  { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.avatar--lg  { width: 4rem;   height: 4rem;   font-size: 1.25rem;  }
.avatar--xl  { width: 6rem;   height: 6rem;   font-size: 2rem;     }
.avatar--2xl { width: 8rem;   height: 8rem;   font-size: 2.5rem;   }

.avatar--ring {
    border: 0.25rem solid var(--color-white);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* ---------- rail body copy ---------- */
.banner-tab__intro {
    font-size: var(--fs-sm);
    color: var(--color-surface-600);
    line-height: 1.7;
    margin: 0;
    padding-right: 0.75rem;
}

/* ---------- putting Tailwind back in charge inside the rails -------------
   Tailwind v4 emits into @layer, and a cascade layer loses to any UNLAYERED
   rule regardless of specificity. Every hand-written sheet here is
   unlayered, so shell.css's element rules beat the utility classes on
   Miti's markup:

       shell.css  h1,h2,h3,h4,h5 { font-weight:600; letter-spacing:-0.01em }
                  beat  .font-bold / .font-extrabold
       shell.css  p { margin: 0 0 var(--s-4) }
                  beat  Tailwind's preflight p{margin:0}

   Restated here for the rails only. MEASURED off Miti's rendered rails.
   The real fix is to put shell.css into a layer, which is a site-wide
   cascade change and belongs in its own piece of work. */
.aside-section h2,
.nav-section h2,
.nav-section h3 {
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}
.aside-section p,
.nav-section p { margin: 0; }

/* ---------- the tab bar when it is PINNED -----------------------------
   Copied from Miti's layout.css — the sheet its app.css imports. An earlier
   pass took the rails from layout-2.css, a variant copy in the same folder
   imported by nothing, which carries the two base #tptab rules above but
   NONE of the collapse set below. The bar therefore pinned at full height
   instead of shrinking to a row of labels.

   .tabs--raised is added by public/js/header.js in lockstep with
   .menu--hidden. These rules are what make the pinned bar compact: the icon
   and the small second line are hidden, and the cards lose their padding.
   ====================================================================== */
#tptab.exchange-tabs {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#tptab.exchange-tabs .spec-tab-nav {
    margin-bottom: 0;
}

#tptab.tabs--hide-on-scroll.tabs--raised {
    transform: translateY(-100%);
    visibility: hidden;
    box-shadow: none;
    pointer-events: none;
}

#tptab.tabs--raised.spec-tab-nav--commodity,
#tptab.tabs--raised .spec-tab-nav--commodity {
    padding: 0.375rem;
    gap: 0.375rem;
}

#tptab.tabs--raised .spec-tab-nav__icon,
#tptab.tabs--raised .spec-tab-nav__text small {
    display: none;
}

#tptab.tabs--raised .spec-tab-nav__card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0.5rem 0.75rem;
    justify-content: center;
}

#tptab.tabs--raised .spec-tab-nav__card--active {
    background: transparent;
    border-bottom: 0.125rem solid var(--color-brand-600);
    border-radius: 0;
}
/* ---------- x-cloak ---------------------------------------------------
   Hides an element until Alpine has initialised, so a page does not flash
   every tab panel at once on first paint. Miti carries the same rule in
   layout.css.

   HERE, not in a page sheet: it must apply wherever Alpine does, and this
   file is the one the layout loads for every page. It used to sit in
   media.css, which meant the browse page — the next Alpine page built — flashed
   all five of its panels before Alpine started.

   !important because the utility classes on those panels set display
   themselves. */
[x-cloak] { display: none !important; }

/* ---------- the three column widths -------------------------------------
   Miti's names for the middle column at its three widths. They lived one per
   page-sheet (.main-mid in marketplace.css, .main-lrg in directory.css,
   .main-slim in media.css), which meant a page could only use the width whose
   sheet it happened to load — the article page needed .main-mid and would have
   had to pull 220 rules of marketplace.css for one of them. Shell geometry
   belongs with the shell. */
.main-slim {
    padding: 1rem 0;
    max-width: 32rem;
    width: 100%;
    margin-inline: auto;
}

.main-mid {
    max-width: 42rem;
    width: 100%;
    margin-inline: auto;
}

.main-lrg {
    max-width: 56rem;
    width: 100%;
    margin-inline: auto;
}
/* ---------- breadcrumb --------------------------------------------------
   Miti's, from layout.css. Shell furniture rather than page furniture —
   Miti's own comment says .breadcrumb-pnl is shared with media, locations
   and profile — so it lives here, where the layout loads it for every
   page, not in description.css where only the two detail pages could see
   it. <x-breadcrumb> is the markup. */
.breadcrumb-pnl {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.breadcrumbs__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0.25rem;
    border-radius: 0.5rem;   /* match .breadcrumbs__list */
    background: transparent;
    color: var(--color-surface-800);
    cursor: pointer;
    flex-shrink: 0;
}

.breadcrumbs__back:hover {
    background: var(--color-brand-500);
    color: var(--color-white);
}

/* Back-arrow size + stroke */
.breadcrumbs__back svg {
    width: 1.6rem;
    height: 1.6rem;
    stroke-width: 1;
}

/* In main content the back arrow is brand green (set on the button so the
   currentColor arrow turns white on hover); the marketplace-hero override wins there. */
main .breadcrumbs__back {
    color: var(--color-brand-600);
}

.breadcrumbs__list {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--color-surface-500);
    width: auto;
}

.breadcrumbs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs__item--home .breadcrumbs__link {
    padding: 0.45rem;
}

/* match padding for exchange icon breadcrumb */
.breadcrumbs__item--exchange .breadcrumbs__link {
    padding: 0 0.45rem;
    border-right: 1px solid var(--color-brand-600);
}

/* spacer technique: insert a flex spacer li after the left group */
.breadcrumbs__spacer {
    flex: 1 1 0;
    min-width: 0;
}

/* right-group items should truncate if necessary */
.breadcrumbs__spacer ~ .breadcrumbs__item .breadcrumbs__link,
.breadcrumbs__spacer ~ .breadcrumbs__item .breadcrumbs__current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs__item + .breadcrumbs__item {
    padding-left: 0.75rem;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.75rem;
    /* Miti's separator arrow, commented rather than deleted.
       /assets/images/bk/bread-arrow.svg 404s ON MITI TOO — checked against
       localhost:8005, not assumed — so the arrow draws on neither site and
       every breadcrumb page was paying for a failed request. Commenting the
       url out changes nothing that renders and stops the request. Restore
       these five lines the day the asset exists.
    background-image: url('/assets/images/bk/bread-arrow.svg');
    background-size: 0.65rem 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    */
}

.breadcrumbs__link,
.breadcrumbs__current {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem;
}

.breadcrumbs__link {
    color: var(--color-brand-600);
    text-decoration: none;
    transition: color 0.12s;
}

.breadcrumbs__link:hover {
    color: var(--color-brand-700);
    text-decoration: underline;
}

.breadcrumbs__current {
    color: var(--color-surface-700);
    font-weight: 600;
    padding-right: 0.75rem;
}

.breadcrumbs__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Type-page breadcrumb: pin to the TOP-CENTRE of the hero banner (banner is
   position:relative; the title is centred below it). */
.marketplace-hero__content .breadcrumbs {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
}

/* Dark-banner theme: white/translucent text + semi-transparent back button */
.marketplace-hero__content .breadcrumbs__back {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
}

.marketplace-hero__content .breadcrumbs__back:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.marketplace-hero__content .breadcrumbs__list {
    width: auto;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.marketplace-hero__content .breadcrumbs__link {
    color: rgba(255, 255, 255, 0.85);
}

.marketplace-hero__content .breadcrumbs__link:hover {
    color: var(--color-white);
}

.marketplace-hero__content .breadcrumbs__current {
    color: var(--color-white);
}

/* Whiten the dark separator arrow so it reads on the banner */
.marketplace-hero__content .breadcrumbs__item + .breadcrumbs__item::before {
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

.breadcrumb-pnl--mid {
    max-width: 42rem;
    margin-inline: auto;
}

/* ---------- content area ------------------------------------------------
   Miti's two-column article + sidebar wrapper, from layout.css. Shell
   furniture rather than page furniture — Miti uses it on /search, on the
   locations pages and on commodities/about — so it lives here, where the
   layout loads it for every page, not in search.css where only one page
   could see it.

   The three --sidebar-* widths are Miti's literals (15.625 / 18.75 /
   21.875rem), documented in its own comment above the rules. */
/* ==========================================================================
   CONTENT AREA  — Reusable article + sidebar layout
   ==========================================================================
   Usage (in any Blade view inside <main>):

     <div class="content-area content-area--sidebar-md">
         <article class="content-area__article">
             …
         </article>
         <aside class="content-area__sidebar">
             …
         </aside>
     </div>

   Modifier          Sidebar width
   --sidebar-sm      15.625rem   15.625rem / 250px
   --sidebar-md      18.75rem   18.75rem  / 300px
   --sidebar-lg      21.875rem   21.875rem / 350px

   If <aside> is absent, article takes full width automatically.
   On screens < 64em the layout stacks vertically (mobile-first).
   ========================================================================== */

.content-area {
    display: flex;
    flex-direction: column;                  /* mobile: stack */
    gap: 1.5rem;
    width: 100%;
}

/* Article always fills the remaining horizontal space */
.content-area__article {
    flex: 1;
    min-width: 0;                            /* prevent flex overflow */
}

/* Sidebar — fixed width, set by modifier on parent */
.content-area__sidebar {
    min-width: 0;
}

@media (min-width: 64rem) {
    .content-area {
        flex-direction: row;
    }
    /* Default sidebar width = regular (300px) when no modifier given */
    .content-area__sidebar {
        width: 18.75rem;
        flex-shrink: 0;
    }
    /* Size modifiers — set on .content-area parent */
    .content-area--sidebar-sm .content-area__sidebar {
        width: 15.625rem;
    }
    .content-area--sidebar-md .content-area__sidebar {
        width: 18.75rem;
    }
    .content-area--sidebar-lg .content-area__sidebar {
        width: 21.875rem;
    }
    /* Sidebar on the LEFT (article right) — opt-in modifier */
    .content-area--sidebar-left {
        flex-direction: row-reverse;
    }
}