/* Calm demo pages. Neutrals plus one green accent; amber only for short stock. Two weights. */
:root{--ink:#0b131d;--bg:#faf9f6;--sage:#56625a;--pale:#e3e8e2;--line:#dcd9d0;--green:#5f9a6b;--green-bg:#e6efe8;--amber:#b2741f;--amber-bg:#f8ecd8;--white:#fff;
  --sans:"Libre Franklin",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pale);color:var(--ink);font:400 17px/1.6 var(--sans)}
b,strong,h1,h2,h3,th{font-weight:700}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:3px}

/* Site bar */
.cv-bar-wrap{background:var(--bg);border-bottom:1px solid var(--line)}
.cv-bar{max-width:1240px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cv-bar a.cv-logo{display:block;line-height:0}
.cv-bar img{width:184px;height:auto;display:block}
.cv-btn{display:inline-block;font-weight:700;font-size:16px;line-height:1.2;color:var(--white);background:var(--ink);border:2px solid var(--ink);border-radius:3px;padding:9.6px 20px;text-decoration:none;white-space:nowrap}
.cv-btn:hover{background:transparent;color:var(--ink)}
@media (max-width:640px){.cv-bar{padding:0 12px;min-height:56px}.cv-bar img{width:152px}.cv-btn{font-size:14px;padding:7px 14px}}

/* Dark head band, in the site's style, with the ridge into the sage stage */
.band{background:var(--ink);color:var(--white);position:relative;padding:40px 0 92px;overflow:hidden}
.band .ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64px;display:block}
.head{max-width:760px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.kicker{font-size:14px;color:#a9b5ac;margin-bottom:8px}
h1{font-size:28px}
.sub{color:#d5dbd6;margin-top:10px;max-width:40ch}
.col{max-width:760px;margin:0 auto;padding:36px 20px 140px}
@media (min-width:640px){h1{font-size:40px}.band{padding:56px 0 110px}.band .ridge{height:88px}.col{padding-top:44px}}

/* Pieces */
.panel{background:var(--white);border:1px solid #cfd7ce;border-radius:8px;padding:24px;box-shadow:0 10px 30px rgba(11,19,29,.08)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--white);border:2px solid var(--ink);border-radius:3px;padding:12px 20px;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.btn.done{background:var(--green);border-color:var(--green);color:var(--white);cursor:default}
.btn.small{padding:8px 14px;font-size:15px}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--sage);cursor:pointer}
.link:hover{text-decoration-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{background:var(--white);border:1.5px solid #cfd7ce;border-radius:3px;padding:8px 14px;font-size:15px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.tag{display:inline-block;font-size:13px;font-weight:700;border-radius:3px;padding:2px 8px}
.tag.ok{color:var(--green);background:var(--green-bg)}
.tag.short{color:var(--amber);background:var(--amber-bg)}
.av{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pale);color:var(--ink);font-size:14px;font-weight:700;flex:none}
.meta{font-size:15px;color:var(--sage)}
.row{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .main{flex:1;min-width:0}
.row .name{display:block}
.row .one{display:block;color:var(--sage);font-size:15px}
.stack{display:grid;gap:14px}
details{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
details summary{list-style:none;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:8px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:400;font-size:20px;line-height:1}
details[open] summary::after{content:"\2212"}
.body{white-space:pre-line;margin-top:14px;padding:16px;background:var(--bg);border-radius:4px}
.note{font-size:14px;color:var(--sage);margin-top:36px}

/* Steps */
.stephead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px}
.stephead .n{font-size:14px;color:var(--sage)}
.stephead h2{font-size:22px}
.lead{color:var(--sage);margin-bottom:24px}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px}
@media (max-width:639px){.nav{position:sticky;bottom:0;background:var(--bg);padding:14px 0 18px;border-top:1px solid var(--line);margin-top:28px}}
.section + .section{margin-top:54px;padding-top:54px;border-top:1px solid var(--line)}

/* One short fade between screens. The end state is the natural one, so a frozen tab still shows the content. */
.fade{transform:translateY(10px);transition:transform .25s ease-out}
.fade.in{transform:none}
@media (prefers-reduced-motion:reduce){.fade{transform:none;transition:none}.btn{transition:none}}

/* Quote desk */
mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px}
.msg{font-size:19px;line-height:1.55}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.field{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.field span{display:block;font-size:13px;color:var(--sage)}
.mat{display:grid;gap:4px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .q{font-family:var(--mono);font-size:14px;color:var(--sage);white-space:nowrap}
.mrow .bar{grid-column:1/-1;height:4px;background:var(--pale);border-radius:2px;overflow:hidden}
.mrow .bar i{display:block;height:100%;background:var(--green)}
.mrow.short .bar i{background:var(--amber)}
.mrow .nm .tag{margin-left:8px;vertical-align:1px}
.bignums{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.big{background:var(--white);border:1px solid #cfd7ce;border-radius:8px;padding:20px;box-shadow:0 10px 30px rgba(11,19,29,.08)}
.big.dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.big.dark span,.big.dark em{color:#b9c0c8}
.big span{display:block;font-size:14px;color:var(--sage)}
.big b{display:block;font-size:30px;line-height:1.1;margin-top:4px;letter-spacing:-.01em}
.big em{display:block;font-style:normal;font-size:14px;color:var(--sage);margin-top:6px}
.outs{display:grid;gap:24px}
.olabel{display:block;font-size:14px;color:var(--sage);margin-bottom:10px}
.tabs{display:none;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:10px 12px;font-weight:700;color:var(--sage);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green)}
@media (min-width:640px){.outs{grid-template-columns:1.25fr 1fr;align-items:start}.bignums{grid-template-columns:1fr 1fr}.big b{font-size:36px}}
@media (max-width:639px){.tabs{display:flex}.outs > [hidden]{display:none}}
.paper{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:22px;font-size:15px}
.paper .ph{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.paper .ph span{display:block;font-size:12px;color:var(--sage)}
.paper .ph .qn{text-align:right;font-family:var(--mono);font-size:12px}
.paper .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;font-size:14px}
.paper .k{font-size:12px;color:var(--sage)}
.paper table{width:100%;border-collapse:collapse;font-size:14px}
.paper th{text-align:left;font-size:12px;color:var(--sage);padding:6px 0;border-bottom:1px solid var(--line)}
.paper td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.paper .r{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:13px}
.paper .tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.paper .tot b{font-size:22px}
.paper .terms{font-size:12px;color:var(--sage);margin-top:10px}
.thread{display:grid;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:16px}
.bb{max-width:88%;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.45}
.bb.them{background:var(--pale);border-bottom-left-radius:3px;justify-self:start}
.bb.us{background:var(--ink);color:var(--white);border-bottom-right-radius:3px;justify-self:end}
.thread .dl{font-size:12px;color:var(--sage);justify-self:end}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.actions .hint{font-size:14px;color:var(--sage)}

/* Inbox */
.switch{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
.switch{border-color:rgba(255,255,255,.35)}
.switch button{background:transparent;border:0;padding:6px 12px;font-size:14px;font-weight:700;color:#c9d2cb;cursor:pointer}
.switch button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.tile{background:var(--white);border:1.5px solid #cfd7ce;border-top:4px solid #cfd7ce;border-radius:8px;padding:14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(11,19,29,.06)}
.tile svg{width:22px;height:22px;stroke:var(--sage);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.tile b{font-size:30px;line-height:1.1}
.tile span{font-size:14px;color:var(--sage)}
.tile[aria-expanded="true"]{border-color:var(--ink);border-top-color:var(--green)}
.tile[aria-expanded="true"] svg{stroke:var(--green)}
.tile[aria-expanded="true"] b{color:var(--ink)}
@media (min-width:640px){.tiles{gap:16px}.tile{padding:20px 22px}.tile b{font-size:36px}}
.group{background:var(--white);border:1px solid #cfd7ce;border-radius:8px;padding:6px 24px;box-shadow:0 10px 30px rgba(11,19,29,.08)}
.ghint{font-size:14px;color:var(--sage);padding:14px 0 4px}
.row .acts{display:flex;gap:8px;flex:none}
.clockchip{display:inline-flex;align-items:center;gap:8px;background:var(--green-bg);color:var(--green);font-weight:700;font-size:14px;border-radius:3px;padding:6px 10px;margin-top:8px}
.clockchip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.vmtag{font-size:13px;color:var(--sage)}
.frow .fchip{display:inline-block;font-size:13px;color:var(--sage);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:2px 8px;margin:6px 6px 0 0}
.raw{display:grid}
.raw .row{padding:14px 0}
@media (max-width:639px){.row{flex-wrap:wrap}.row .acts{width:100%;padding-left:54px}}

/* Embed mode, used for the cover images: no site bar, tighter column */
body.embed .cv-bar-wrap,body.embed .note,body.embed .chips,body.embed .nav{display:none}
body.embed .col{padding:20px 24px 24px}
body.embed .head{margin-bottom:28px}
body.embed.quotes .band{display:none}
body.embed.inbox .band{padding:24px 0 70px}

/* Phones: material rows stack the name over the on-hand count */
@media (max-width:639px){.mrow{grid-template-columns:1fr;gap:4px}.mrow .q{white-space:normal}}

/* Step track: four stops, done in green, current in ink */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:28px;list-style:none;padding:0}
.track li{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--sage)}
.track li i{display:block;height:4px;border-radius:2px;background:#cfd7ce}
.track li.done i{background:var(--green)}
.track li.now i{background:var(--ink)}
.track li.now{color:var(--ink);font-weight:700}
.track li.done{color:var(--green)}
.stephead .ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green-bg);color:var(--green);margin-right:12px;vertical-align:middle;flex:none}
.stephead .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stephead .t{display:flex;align-items:center}
.cv-bar-wrap{border-bottom-color:var(--line)}
.note{color:var(--sage)}