/* =====================================================================
   The places the status card opens: Orders, Shipments and Settings.
   Rows in the product list's manner, records in the same sheet.
   ===================================================================== */

/* ---------- Figures in a row: a small line above, the figure on it ---------- */
.fig{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.fig small{display:block;height:12px;font-size:10px;color:var(--faint);white-space:nowrap}
.fig b{font-size:15px;font-weight:300;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.fig b.q{color:var(--quiet)}
.fig b.f{color:var(--faint)}

/* ---------- Orders ---------- */
.orow,.orders-heads{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 170px 110px 100px 100px 132px}
.orow{display:grid;column-gap:20px;align-items:center;padding:14px var(--gutter);border-top:1px solid var(--hair);cursor:pointer;
  transition:background-color .12s}
.orow.top{border-top:none}
.orow:hover,.orow.open{background-color:var(--raised)}
.orow.done{opacity:.5}
.o-who{display:flex;flex-direction:column;gap:5px;min-width:0}
.o-who .sku-card{align-self:flex-start}
.o-who b{font-size:16px;line-height:20px;font-weight:300;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-who b.unnamed{color:var(--faint)}
.o-who small{font-size:11.5px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-pieces{display:flex;flex-direction:column;gap:6px;min-width:0}
.o-thumbs{display:flex;align-items:center;gap:4px;min-height:40px}
.o-thumbs img,.o-thumbs .none{width:40px;height:40px;object-fit:cover;display:block;background:var(--sunk)}
.o-thumbs small{margin-left:4px;font-size:11px;color:var(--quiet)}
.o-pieces>small{font-size:11px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.o-stage{display:flex;flex-direction:column;gap:7px;min-width:0}
.o-stage b{font-size:13px;font-weight:300;color:var(--ink);white-space:nowrap}
.o-stage small{font-size:11px;color:var(--quiet);white-space:nowrap}
.o-stage small.late{color:var(--ink)}
.o-next{display:flex;justify-content:flex-end;min-width:0}
.o-next small{font-size:11.5px;color:var(--quiet);text-align:right}
@media(max-width:1100px){
  .orow,.orders-heads{grid-template-columns:minmax(0,1fr) 150px 100px 100px 124px}
  .orow .o-pieces,.orow .c-paid,.orders-heads .c-pieces,.orders-heads .c-paid{display:none}
}
@media(max-width:560px){
  .orders-heads{display:none}
  .orow{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:8px;padding:12px var(--gutter)}
  .orow .o-who{grid-column:1;grid-row:1}
  .orow .o-stage{grid-column:1;grid-row:2}
  .orow .c-total{grid-column:2;grid-row:1;align-self:end}
  .orow .c-due{grid-column:2;grid-row:2;align-self:start}
  .orow .o-next,.orow .o-who small{display:none}
  .o-who b{font-size:15px}
  .orow .o-stage small{display:none}
}

.oline{display:grid;grid-template-columns:minmax(0,1fr) 64px 80px 84px;column-gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.oline-id{display:flex;align-items:center;gap:12px;min-width:0}
.oline-id .pic img,.oline-id .pic .none{width:44px;height:44px}
.oline-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.oline-t b{font-size:17px;line-height:1.1;font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.oline-t span{font-size:11.5px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oline-t small{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--faint);white-space:nowrap}
.oline-t small.wait{color:var(--ink)}
.oline>.r{text-align:right;font-size:13px;color:var(--quiet);white-space:nowrap;font-variant-numeric:tabular-nums}
.oline>.r.t{font-size:14px;color:var(--ink)}
.oline input{width:100%;box-sizing:border-box;background:none;border:none;border-bottom:1px solid var(--rule);outline:none;font:inherit;
  font-size:13px;color:var(--ink);text-align:right;padding:4px 0;font-variant-numeric:tabular-nums}
.oline input:focus{border-bottom-color:var(--ink)}
.oline .x{justify-self:end}
.oline input.lead-in{width:140px;margin-top:3px;padding:2px 0;border-bottom-color:var(--hair);font-size:11px;color:var(--quiet);text-align:left}
.oline.edit{grid-template-columns:minmax(0,1fr) 56px 64px 84px 28px}
.adder{position:relative;margin-top:14px}
.adder-list{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:320px;overflow-y:auto;background:var(--ground);
  border:1px solid var(--rule);box-shadow:0 18px 40px rgba(11,11,11,.08)}
.adder-list button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;background:none;border:none;
  border-top:1px solid var(--hair);font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.adder-list button:first-child{border-top:none}
.adder-list button:hover{background:var(--raised)}
.adder-list img,.adder-list .none{width:34px;height:34px;object-fit:cover;background:var(--sunk);flex:0 0 34px}
.adder-list b{font-size:15px;font-weight:300;font-variant-numeric:tabular-nums}
.adder-list span{flex:1;min-width:0;font-size:12px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adder-list small{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .oline{grid-template-columns:minmax(0,1fr) 40px 80px;column-gap:10px}
  .oline .c-unit,.oline .c-off{display:none}
  .oline.edit{grid-template-columns:minmax(0,1fr) 44px 44px 76px 24px;column-gap:8px}
  .oline.edit .c-off{display:block}
  .oline-id{gap:10px}
  .oline-id .pic img,.oline-id .pic .none{width:40px;height:40px}
}

.payrow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:10px 0;
  border-top:1px solid var(--hair);font-size:12.5px}
.payrow span:first-child{color:var(--quiet);font-variant-numeric:tabular-nums}
.payrow b{font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.payrow>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.payform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:14px;padding:16px;background:var(--raised);border:1px solid var(--hair)}
.payform .wide{grid-column:1 / -1}
.person{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:12.5px;color:var(--quiet)}
.person b{font-size:14px;font-weight:300;color:var(--ink)}
.side-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.side-acts .row{display:flex;gap:8px}
.side-acts .row .cmd{flex:1}
.block-gap{margin-top:28px}
.timeline{margin-top:10px}
.hist-row{display:grid;grid-template-columns:70px 64px minmax(0,1fr);column-gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:12.5px;cursor:pointer}
.hist-row span:first-child{color:var(--quiet);font-variant-numeric:tabular-nums}
.hist-row span:nth-child(2){font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.hist-row span:last-child{color:var(--ink)}
.notice{margin:24px var(--gutter);padding:16px 18px;border:1px solid var(--rule);max-width:760px;font-size:13px;line-height:1.7;color:var(--quiet)}
.notice b{color:var(--ink);font-weight:400}

/* ---------- Shipments ---------- */
.srow,.ship-heads{grid-template-columns:minmax(0,1fr) 210px 70px repeat(3,110px) 80px}
.srow{display:grid;column-gap:20px;align-items:center;padding:14px var(--gutter);border-top:1px solid var(--hair);cursor:pointer;
  transition:background-color .12s}
.srow.top{border-top:none}
.srow:hover,.srow.open{background-color:var(--raised)}
.srow.done{opacity:.55}
.s-id{display:flex;align-items:stretch;gap:14px;min-width:0}
.s-marks{display:flex;flex-direction:column;gap:1px;flex:0 0 2px;min-height:44px}
.s-marks i{flex:1;width:2px;display:block}
.s-t{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.s-t b{font-size:19px;line-height:1.1;font-weight:300;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-t small{font-size:11.5px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){
  .srow,.ship-heads{grid-template-columns:minmax(0,1fr) 180px 110px 110px}
  .srow .c-lines,.srow .c-import,.srow .c-uplift,.ship-heads .c-lines,.ship-heads .c-import,.ship-heads .c-uplift{display:none}
}
@media(max-width:560px){
  .ship-heads{display:none}
  .srow{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:10px;column-gap:12px;padding:12px var(--gutter)}
  .srow .s-id{grid-column:1;grid-row:1}
  .srow .o-stage{grid-column:1;grid-row:2}
  .srow .c-landed{grid-column:2;grid-row:1 / span 2;align-self:center}
  .srow .c-goods{display:none}
  .s-t b{font-size:17px}
}
.sline{display:grid;grid-template-columns:minmax(0,1fr) 56px 76px 76px;column-gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--hair)}
.sline .r{text-align:right;font-size:13px;color:var(--quiet);font-variant-numeric:tabular-nums;white-space:nowrap}
.sline .r.t{font-size:14px;color:var(--ink)}
.cost-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--hair)}
.cost-row>span{font-size:12.5px;color:var(--quiet)}
.cost-row .fld{width:110px;min-height:30px;font-size:14px}
.cost-row .fld input{text-align:right;padding:4px 0}
.side-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.side-title small{font-size:11px;color:var(--faint)}
.four-up{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:26px}
@media(max-width:560px){ .four-up{grid-template-columns:repeat(2,minmax(0,1fr))} .sline{grid-template-columns:minmax(0,1fr) 50px 72px} .sline .c-unit{display:none} }

/* ---------- Settings ---------- */
.set-page{display:flex;gap:80px;padding:0 var(--gutter) 72px}
.set-index{flex:0 0 190px;position:sticky;top:0;align-self:flex-start;padding-top:44px;display:flex;flex-direction:column}
.set-index button{display:flex;align-items:center;gap:12px;padding:7px 0;background:none;border:none;font:inherit;font-size:13px;
  color:var(--quiet);text-align:left;cursor:pointer}
.set-index button i{width:2px;height:14px;display:block;background:transparent}
.set-index button.on{color:var(--ink)}
.set-index button.on i{background:var(--ink)}
.set-body{flex:1;max-width:860px;min-width:0}
.set-sec{padding:40px 0 4px;scroll-margin-top:12px}
.set-sec h2{margin:0 0 12px;font-size:20px;font-weight:300;color:var(--ink)}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:32px;padding:14px 0;border-top:1px solid var(--hair)}
.set-row .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.set-row .t b{font-size:13.5px;font-weight:300;color:var(--ink)}
.set-row .t small{font-size:11.5px;line-height:1.5;color:var(--quiet)}
.set-row .v{font-size:13.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.set-row .v.q{color:var(--quiet)}
.set-row .fld{justify-content:flex-end;min-height:30px}
.set-row .fld input{text-align:right;padding:4px 0}
.set-sub{padding:22px 0 6px}
.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
.compact{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;border-top:1px solid var(--hair)}
.compact>span{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact>span small{margin-left:8px;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.compact .fld{min-height:30px;font-size:13.5px}
.compact .fld input{text-align:right;padding:4px 0}
.set-note{padding:12px 0;border-top:1px solid var(--hair);font-size:12px;line-height:1.6;color:var(--faint)}
.swatch{display:flex;align-items:center;gap:10px;background:none;border:none;padding:4px 0;font:inherit;font-size:12px;color:var(--faint);cursor:pointer}
.swatch i{width:2px;height:22px;display:block}
.set-list{display:none}
@media(max-width:900px){ .set-page{gap:40px} .set-index{flex-basis:150px} .two-up{grid-template-columns:1fr} }
@media(max-width:560px){
  .set-page{display:block;padding:0 0 56px}
  .set-index{display:none}
  .set-page .set-list{display:block}
  .set-page.reading .set-list{display:none}
  .set-page:not(.reading) .set-body{display:none}
  .set-body{padding:0 var(--gutter)}
  .set-sec{display:none;padding-top:14px}
  .set-sec.here{display:block}
  .set-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:15px var(--gutter);
    background:none;border:none;border-top:1px solid var(--hair);font:inherit;text-align:left;cursor:pointer}
  .set-list button:first-child{border-top:none}
  .set-list button b{font-size:15px;font-weight:300;color:var(--ink)}
  .set-list button span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--quiet);font-variant-numeric:tabular-nums}
  .set-back{display:flex;align-items:center;gap:8px;padding:14px 0 0;background:none;border:none;font:inherit;font-size:12.5px;color:var(--quiet);cursor:pointer}
  .set-row{column-gap:16px;padding:12px 0}
  .set-sec h2{font-size:18px}
}
.set-back{display:none}
@media(max-width:560px){ .set-back{display:flex} }

/* ---------- Cash flow ---------- */
/* The resource bar's figure as a statement: money in, each running cost on a
   dotted leader, and what is left on a double rule. */
.cf-page{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:96px;padding:40px var(--gutter) 72px}
.cf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cf-when{display:flex;flex-direction:column;gap:4px}
.cf-when .num{font-size:13px;color:var(--quiet)}
.cf-hero{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:28px}
.cf-hero b{font-size:52px;line-height:1;font-weight:200;color:var(--ink)}
.cf-hero span{font-size:13px;color:var(--quiet)}
.cf-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:34px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.cf-sec small{font-size:11.5px;color:var(--faint)}
.cf-line{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:13.5px;color:var(--ink)}
.cf-line span{white-space:nowrap}
.cf-line i{flex:1;min-width:12px;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.cf-line b{font-weight:300;white-space:nowrap}
.cf-line.quiet{color:var(--faint)}
.cf-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px;padding:10px 0 8px;border-top:1px solid var(--rule)}
.cf-total .caps{color:var(--ink)}
.cf-total b{font-size:15px;font-weight:400;color:var(--ink)}
.cf-total.last{margin-top:30px;padding-bottom:10px;border-top-color:var(--ink);border-bottom:3px double var(--ink)}
.cf-total.last b{font-size:22px}
.cf-note{margin:18px 0 0;max-width:560px;font-size:12px;line-height:1.65;color:var(--faint)}
.cf-aside{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:6px}
.cf-rules{align-self:stretch}
.cf-rules div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hair);font-size:12.5px}
.cf-rules span:first-child{color:var(--quiet)}
.cf-rules span:last-child{color:var(--ink);text-align:right}
@media(max-width:900px){ .cf-page{grid-template-columns:minmax(0,1fr);gap:40px} .cf-aside{position:static} }
@media(max-width:560px){ .cf-page{padding:22px var(--gutter) 48px} .cf-hero{margin-top:22px} .cf-hero b{font-size:40px} .cf-total.last b{font-size:20px} }

/* ---------- Printing a quote or an order ---------- */
/* Only the record prints: the sheet's contents on white, with the logo, and
   none of the controls or the notes meant only for you. */
.print-head{display:none}
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  body>*:not(.drawer){display:none!important}
  .drawer{position:static!important;transform:none!important;visibility:visible!important;width:auto!important;max-width:none!important;
    padding:0!important;border:none!important;box-shadow:none!important;overflow:visible!important;background:#fff!important}
  .drawer-grip,.drawer-tools,.side-acts,.payform,.adder,[data-noprint],.x,.link{display:none!important}
  .print-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #000}
  .print-logo svg{height:14px;width:auto;display:block;fill:#000}
  .print-head b{display:block;font-size:18px;font-weight:400;text-align:right}
  .print-head small{display:block;font-size:11px;color:#444;text-align:right}
  .drawer input,.drawer textarea,.drawer select{border:none!important}
  .drawer-cols{gap:32px}
}