/* Shades of off-white, after the hibee.us news section (components/news/news-fluid.css): warm paper tones,
   warm grey ink, hairline rules, greige and taupe chart bars and one muted ochre accent. Loaded after
   layouts.css. Used for what reads as a sequence of dates or as data:
   - .ow-chain: a timeline chain. Fresh news runs newest first with ochre rings; .ow-chain.ahead is what is
     still to come or to wait for, on a dashed line, with the next item filled in.
   - .ow-dates: date | text rows with hairline rules, like "Key dates" on the news page.
   - chart bars and tracks (histograms, the status timeline, source bars, the bulletin trend).
   The brand yellow stays on buttons, the logo and selected states. */

:root{
  --ow-inset:#efebe2;--ow-track:#e7e1d5;--ow-rule:#e2dccf;--ow-bar:#cdc3b0;--ow-bar-strong:#8c8170;
  --ow-accent:#b98e3e;--ow-accent-ink:#8a6a24;--ow-ink:#24211c;--ow-ink-2:#5a5448;--ow-ink-3:#8a8375;--ow-alert:#a64b36
}
html[data-theme=night]{
  --ow-inset:#27241f;--ow-track:#2f2b25;--ow-rule:#3a352e;--ow-bar:#5a5347;--ow-bar-strong:#a79c88;
  --ow-accent:#d2aa5c;--ow-accent-ink:#ddba72;--ow-ink:#eeeae2;--ow-ink-2:#bdb6a8;--ow-ink-3:#8e8678;--ow-alert:#d98468
}

/* ---------- Timeline chain ---------- */
.ow-chain{list-style:none;margin:0 0 0 6px;padding:0 0 0 20px;border-left:2px solid var(--ow-rule)}
.ow-chain>li{position:relative;padding:0 0 16px;line-height:1.55}
.ow-chain>li:last-child{padding-bottom:2px}
.ow-chain>li::before{content:"";position:absolute;left:-27px;top:.42em;width:8px;height:8px;border-radius:50%;border:2px solid var(--ow-accent);background:var(--ow-paper,var(--bg,#f2eee6))}
html[data-theme=night] .ow-chain>li::before{background:#23211f}
html[data-theme=day] .ow-chain>li::before{background:#f6f3ec}
.ow-chain time,.ow-chain .ow-when{display:block;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ow-accent-ink)}
.ow-chain .ow-when small{margin-left:8px;font-weight:500;color:var(--ow-ink-3)}
.ow-chain b,.ow-chain strong{display:block;font-size:15px;font-weight:650;line-height:1.45;color:var(--ow-ink)}
.ow-chain p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:var(--ow-ink-2)}
.ow-chain .src-list{margin-top:4px}
.ow-chain .ow-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:2px}
.ow-chain .ow-kick time{display:inline}
.ow-tag{font-size:12px;font-weight:600;color:var(--ow-ink-2)}
.ow-tag.mine{color:var(--ow-accent-ink)}
.ow-tag+.ow-tag::before{content:"·";margin-right:8px;color:var(--ow-ink-3)}
/* A whole item that opens the story */
.ow-chain .ow-open{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ow-chain .ow-open:hover b,.ow-chain .ow-open:focus-visible b{text-decoration:underline;text-decoration-color:var(--ow-accent);text-underline-offset:4px}
.ow-chain .ow-open:focus-visible{outline:2px solid var(--ow-accent);outline-offset:4px;border-radius:6px}
/* What is still to come: dashed line, hollow grey dots, the next one filled */
.ow-chain.ahead{border-left-style:dashed;border-left-color:var(--ow-bar)}
.ow-chain.ahead>li::before{border-color:var(--ow-bar-strong)}
.ow-chain.ahead>li.next::before{border-color:var(--ow-accent);background:var(--ow-accent)}
.ow-chain.ahead time,.ow-chain.ahead .ow-when{color:var(--ow-ink)}
.ow-chain.ahead>li.next time,.ow-chain.ahead>li.next .ow-when{color:var(--ow-accent-ink)}
.ow-chain.ahead>li.always::before{border-style:dotted}
.ow-chain.ahead>li.always .ow-when{color:var(--ow-ink-3);font-weight:600}

/* ---------- Date | text rows ---------- */
.ow-dates{list-style:none;margin:0;padding:0}
.ow-dates>li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px;padding:10px 0;border-top:1px solid var(--ow-rule);font-size:13.5px;line-height:1.45}
.ow-dates>li:first-child{border-top:0}
.ow-dates>li>b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ow-ink)}
.ow-dates>li>span,.ow-dates>li>button{color:var(--ow-ink-2)}
.ow-dates>li>button{padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ow-ink);text-decoration:underline;text-decoration-color:var(--ow-rule);text-underline-offset:4px}
.ow-dates>li>button:hover{text-decoration-color:var(--ow-accent)}

/* A section rule and heading in the news style: a dark hairline on top, bold heading below */
.ow-sec{padding-top:14px;border-top:1px solid var(--ow-ink)}
.ow-sec>h2{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--ow-ink)}

/* ---------- Charts ---------- */
/* :root[data-theme] outranks the day and night colour maps without !important */
/* Histograms: greige bars, the median bin in ochre */
:root[data-theme] .ins-hist{border-bottom-color:var(--ow-rule)}
:root[data-theme] .ins-hist span{background:var(--ow-bar)}
:root[data-theme] .ins-hist span.med{background:var(--ow-accent)}
:root[data-theme] .ins-hist-axis{color:var(--ow-ink-3)}
/* Visa Bulletin trend: chart A in ochre, chart B dashed taupe */
:root[data-theme] .ins-chart .grid{stroke:var(--ow-rule)}
:root[data-theme] .ins-chart .axis{fill:var(--ow-ink-3)}
:root[data-theme] .ins-chart .line-a{stroke:var(--ow-accent)}
:root[data-theme] .ins-chart .dot-a{fill:var(--ow-accent)}
:root[data-theme] .ins-chart .line-b{stroke:var(--ow-bar-strong)}
:root[data-theme] .ins-legend .key-a{background:var(--ow-accent)}
/* Data sources: ochre, taupe, greige */
:root[data-theme] .ins-srcbar{background:var(--ow-track)}
:root[data-theme] .src-hibee{background:var(--ow-accent)}
:root[data-theme] .src-user{background:var(--ow-bar-strong)}
:root[data-theme] .src-public{background:var(--ow-bar)}
/* Status timeline on the workspace home */
:root[data-theme] .wh-track:not(.plan){background:var(--ow-track)}
:root[data-theme] .wh-seg.f1{background:var(--ow-bar);color:var(--ow-ink)}
:root[data-theme] .wh-seg.cpt{background:var(--ow-bar-strong)}
:root[data-theme] .wh-seg.opt{background:color-mix(in srgb,var(--ow-accent) 40%,var(--ow-track));color:var(--ow-ink)}
:root[data-theme] .wh-seg.stem{background:var(--ow-accent);color:#fff}
html[data-theme=night] .wh-seg.stem{color:#1f1d19}
:root[data-theme] .wh-seg.h1b{border-color:var(--ow-bar-strong);background:transparent;color:var(--ow-ink-2)}
:root[data-theme] .wh-today,:root[data-theme] .wh-today em{background:var(--ow-alert)}
/* Small tracks that read as data */
:root[data-theme] .wh-bar{background:var(--ow-track)}
:root[data-theme] .wh-bar>span{background:var(--ow-accent)}

/* ---------- Guides and policy (#news) ---------- */
/* Plain paper like the hibee.us news list: sections ruled in dark hairlines, no cards, no coloured thumbnails */
:root[data-theme] .nf-main,:root[data-theme] .nf-aside section{padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nf{gap:2rem 5%}
.nf-aside{gap:2rem}
.nf-aside .ow-sec{padding-top:14px}
.nf .ow-sec>h2{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:clamp(1.05rem,.95rem + .35vw,1.25rem)}
.nf .ow-chain>li{padding-bottom:22px}
.nf .ow-chain b{font-size:clamp(1rem,.94rem + .25vw,1.125rem)}
.nf .ow-chain p{font-size:14px}
.nf-item{display:block;padding:1.2em 0;border-top:1px solid var(--ow-rule)}
.nf-item:first-child{border-top:0;padding-top:.2em}
.nf-item h3{font-family:inherit;font-weight:650;font-size:clamp(1rem,.94rem + .25vw,1.125rem);margin:0 0 .3em}
.nf-item p{-webkit-line-clamp:unset;display:block;font-size:14px;color:var(--ow-ink-2)}
.nf-kicker{color:var(--ow-ink-3);font-size:12.5px}
.nf-kicker b{color:var(--ow-accent-ink)}
.nf-list{margin-top:0}
.nf-more{margin-top:10px;padding:0;border:0;background:none;cursor:pointer;font-size:13.5px}
:root[data-theme] .nf-aside section.ow-sec{border-top:1px solid var(--ow-ink)}
.nf-aside .ow-chain b{font-size:14.5px}
.nf-aside .ow-chain>li{padding-bottom:14px}

/* ---------- My status (#status) ---------- */
/* The path so far and ahead: solid taupe behind, ochre now, a dashed greige line for what is still to come */
:root[data-theme] .journey li::before{height:0;background:none;border-top:2px dashed var(--ow-bar)}
:root[data-theme] .journey li.done::before{border-top:2px solid var(--ow-bar-strong)}
:root[data-theme] .journey li.current::before{border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--ow-accent) 50%,var(--ow-bar) 50%) 1}
:root[data-theme] .journey .dot{border-color:var(--ow-bar);background:var(--ow-inset);color:var(--ow-paper-ink,#fff)}
:root[data-theme] .journey li.done .dot{border-color:var(--ow-bar-strong);background:var(--ow-bar-strong);color:#fff}
html[data-theme=night] .journey li.done .dot{color:#1f1d19}
:root[data-theme] .journey li.current .dot{border-color:var(--ow-accent);background:var(--ow-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ow-accent) 22%,transparent)}
:root[data-theme] .journey li:not(.done):not(.current) strong{color:var(--ow-ink-2)}
:root[data-theme] .journey em{background:none;padding:0;color:var(--ow-accent-ink);font-size:12px;font-weight:700}
#coming-up .card-body{padding:18px 24px 6px}
#coming-up .ow-chain{margin-left:10px}
#coming-up .ow-chain>li{padding-bottom:20px}
.ow-sub{margin:6px 0 12px;padding-top:16px;border-top:1px solid var(--ow-rule);font-size:12.5px;font-weight:700;color:var(--ow-ink-3)}
#affects-you .ow-chain{margin-top:14px}
#affects-you .ow-chain strong{font-size:14px}
#affects-you .ow-chain .impact{margin-top:6px}

/* ---------- The five answers on My status (journey.js answersBlock) ---------- */
/* One list on paper: the question small, the date or count big in ochre, one or two lines under it, a hairline between */
.ow-answers{margin-top:20px}
.ow-ans{list-style:none;margin:0;padding:0 24px 8px}
.ow-ans>li{padding:18px 0 20px;border-top:1px solid var(--ow-rule)}
.ow-ans>li:first-child{border-top:0;padding-top:6px}
.ow-q{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ow-ink-2)}
.ow-q span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ow-accent);font-size:11px;font-weight:700;color:var(--ow-accent-ink)}
.ow-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ow-ink);font-variant-numeric:tabular-nums}
.ow-big small{font-size:13.5px;font-weight:600;color:var(--ow-accent-ink)}
.ow-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ow-lines li{position:relative;padding-left:14px;font-size:14px;line-height:1.55;color:var(--ow-ink-2)}
.ow-lines li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ow-bar-strong)}
.ow-ans-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.ow-ans-foot:empty{display:none}
.ow-ans-foot .src-list a{font-size:12.5px;color:var(--ow-ink-3)}
.ow-ans .ow-chain{margin-top:4px}
.ow-ans .ow-chain+.text-link{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;font-size:13.5px}
@media (max-width:640px){.ow-ans{padding:0 16px 6px}.ow-big{font-size:19px}}

/* ---------- Choosing and paying (#plans and the prompts that lead there) ---------- */
/* Open paper, generous space, one price and one button per plan; no cards competing with each other */
.pl-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:-6px 0 28px;font-size:13.5px;color:var(--ow-ink-2)}
.pl-note .text-link{padding:0;border:0;background:none;cursor:pointer;font-size:13.5px}
.pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ow-ink)}
.pl-plan{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px clamp(18px,2.6vw,40px) 36px;border-left:1px solid var(--ow-rule)}
.pl-plan:first-child{border-left:0;padding-left:0}
.pl-plan.best{background:linear-gradient(var(--ow-accent),var(--ow-accent)) top/100% 3px no-repeat}
.pl-mark{margin:0 0 10px;min-height:1.2em;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ow-accent-ink)}
.pl-plan h2{margin:0;font-size:20px;font-weight:700;color:var(--ow-ink)}
.pl-price{display:flex;align-items:baseline;gap:6px;margin:18px 0 0}
.pl-price b{font-size:clamp(34px,3.2vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ow-ink);font-variant-numeric:tabular-nums}
.pl-price span{font-size:14px;color:var(--ow-ink-3)}
.pl-alt{margin:8px 0 26px;font-size:13.5px;color:var(--ow-ink-2)}
.pl-plan>.btn,.pl-cta>.btn{min-width:min(100%,220px);justify-content:center}
.pl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pl-year{padding:0;border:0;background:none;cursor:pointer;font-size:13px;color:var(--ow-ink-2)}
.pl-year:hover{color:var(--ow-accent-ink)}
.pl-deal{margin-top:4px;padding:8px 12px;border-radius:10px;background:var(--ow-inset);font-size:13px;color:var(--ow-ink)}
.pl-deal b{color:var(--ow-accent-ink)}
.pl-on{display:flex;align-items:center;gap:6px;min-height:44px;margin:0;font-size:14px;font-weight:600;color:var(--ow-ink-2)}
.pl-on svg{width:16px;height:16px;color:var(--ow-accent-ink)}
.pl-list{list-style:none;align-self:stretch;margin:30px 0 0;padding:0}
.pl-list li{padding:11px 0;border-top:1px solid var(--ow-rule);font-size:14px;line-height:1.5;color:var(--ow-ink-2)}
.pl-filing{margin-top:44px;border-top:1px solid var(--ow-rule)}
.pl-filing>summary{display:flex;align-items:center;gap:10px;padding:16px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:650;color:var(--ow-ink)}
.pl-filing>summary::-webkit-details-marker{display:none}
.pl-filing>summary::after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.5px solid var(--ow-ink-3);border-bottom:1.5px solid var(--ow-ink-3);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.pl-filing[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.pl-fine{margin:12px 0 0;font-size:12.5px;color:var(--ow-ink-3)}
@media (max-width:900px){.pl{grid-template-columns:minmax(0,1fr)}.pl-plan,.pl-plan:first-child{padding:24px 0 30px;border-left:0;border-top:1px solid var(--ow-rule)}.pl-plan:first-child{border-top:0}}
@media (prefers-reduced-motion:reduce){.pl-filing>summary::after{transition:none}}
/* Paywall prompts inside a page: a quiet inset line, not a yellow box */
:root[data-theme] .lock-note:not(.warn){background:var(--ow-inset);border:0;color:var(--ow-ink-2)}
:root[data-theme] .lock-note:not(.warn) svg{color:var(--ow-ink-3)}

/* ---------- Community (#progress) ---------- */
/* Tiles keep the glass but read like the news page: hairlines, greige sparks with the median in ochre, and the
   picked tile marked by an ochre rule on top instead of a yellow outline */
:root[data-theme] .pt-spark{border-bottom-color:var(--ow-rule)}
:root[data-theme] .pt-spark i{background:var(--ow-bar)}
:root[data-theme] .pt-spark i.med{background:var(--ow-accent)}
:root[data-theme] .pt-row{border-top-color:var(--ow-rule)}
:root[data-theme] .pt-med{color:var(--ow-ink)}
:root[data-theme] .pt-mode{color:var(--ow-ink-3)}
:root[data-theme] button.pt-tile:hover{border-color:var(--ow-accent)}
:root[data-theme] .pt-tile.on{border-color:var(--glass-border,var(--line));box-shadow:inset 0 3px 0 var(--ow-accent),var(--glass-shadow,0 0 0 transparent)}
.pt-detail-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px 40px;padding:6px 24px 24px}
.pt-detail-body .ow-sub{margin-top:0;border-top:0;padding-top:12px}
.pt-wait{margin-left:8px}
.pt-wait>li{padding-bottom:20px}
.pt-wait>li.next b{font-size:16px}
.pt-stats{display:flex;flex-wrap:wrap;gap:8px 32px;margin:16px 0 0}
.pt-stats div{display:grid;gap:2px}
.pt-stats dt{font-size:12px;color:var(--ow-ink-3)}
.pt-stats dd{margin:0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ow-ink)}
@media (max-width:760px){.pt-detail-body{grid-template-columns:minmax(0,1fr);padding:6px 18px 20px}}