/* Camerune soap calculator: page styles (extends styles.css tokens) */
.page.calc{display:block;padding-top:64px;padding-bottom:96px}
.calc h1{margin:10px 0 16px}
.calc .lede{max-width:70ch}
.calc label,.calc legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.calc input,.calc select{background:var(--ink);border:1px solid var(--ink3);color:var(--bone);padding:11px 12px;font-size:16px;outline:none;width:100%;border-radius:0}
.calc input:focus,.calc select:focus{border-color:var(--gold-text)}
.calc select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-text) 50%),linear-gradient(135deg,var(--gold-text) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.fine{font-size:13px;margin:6px 0 0}
.linklike{background:none;border:0;padding:0;color:var(--gold-text);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.formula-head{margin:40px 0 0;padding:24px 28px;border:1px solid var(--rule-strong);background:var(--gold-tint);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.formula-head h2{font-size:clamp(26px,3vw,34px);margin-top:6px}
.fh-status{display:flex;gap:8px;flex-wrap:wrap}
.badge-dim{color:var(--bone-dim);border-color:var(--rule)}
.calc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;margin-top:40px;align-items:start}
.panel{border:1px solid var(--rule);padding:28px;background:var(--ink2);display:flex;flex-direction:column;gap:22px}
.panel-h{font-size:28px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row.four{grid-template-columns:1fr 1fr 1fr 80px;gap:8px;margin:10px 0}
.with-unit{display:flex;align-items:stretch}
.with-unit input{flex:1;min-width:0}
.with-unit select{width:auto;flex:0 0 auto;border-left:0}
.with-unit.wide select{flex:1 1 auto;border-left:1px solid var(--ink3);border-right:0}
.with-unit.wide input{flex:0 0 90px}
.u{display:flex;align-items:center;padding:0 12px;border:1px solid var(--ink3);border-left:0;color:var(--bone-dim);font-size:14px;background:var(--ink)}
.seg{display:flex;gap:0;margin-bottom:12px}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink3);padding:9px 10px;font-size:12px;cursor:pointer;color:var(--bone-dim)}
.seg label+label{border-left:0}
.seg input{width:auto;accent-color:var(--gold)}
.seg label:has(input:checked){color:var(--gold-text);border-color:var(--rule-strong);background:var(--gold-tint)}
.oil-table,.calc-table{width:100%;border-collapse:collapse;font-size:15px}
.oil-table th,.calc-table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);font-weight:500;text-align:left;padding:6px 6px;border-bottom:1px solid var(--rule)}
.oil-table td{padding:6px 4px;border-bottom:1px solid var(--ink3);vertical-align:middle}
.oil-table td:first-child{width:52%}
.oil-table .num{text-align:right}
.oil-table td.num:nth-child(2){display:flex;align-items:stretch;justify-content:flex-end}
.oil-table .amt{width:84px;text-align:right;padding:8px}
.oil-table .u{padding:0 8px;font-size:13px}
.oil-table select{padding:8px 28px 8px 8px;font-size:15px}
.oil-table .out{color:var(--bone-dim);font-size:14px;white-space:nowrap}
.oil-table tfoot td{border-bottom:0;padding-top:12px}
.icon-btn{background:none;border:1px solid var(--ink3);color:var(--bone-dim);width:32px;height:32px;font-size:18px;line-height:1}
.icon-btn:hover{color:var(--error);border-color:var(--error)}
#pct-total{font-size:14px;padding:0 8px}
#pct-total.ok{color:var(--gold-text)} #pct-total.bad{color:var(--error)}
.mold summary{cursor:pointer;color:var(--gold-text);font-size:14px}
.mold .field-row input,.mold .field-row select{padding:9px}
.big-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:22px}
.bn{background:var(--ink2);padding:16px 18px}
.bn .v{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(32px,4vw,42px);line-height:1.1;margin-top:4px}
.bn .dim{font-size:13px}
.calc-table td{padding:8px 6px;border-bottom:1px solid var(--ink3)}
.calc-table .num{text-align:right;white-space:nowrap}
.calc-table tr.strong td{font-weight:500;color:var(--gold-text)}
.calc-table tr.sub td{font-size:13px;color:var(--bone-dim);padding-top:14px}
.qp{margin-top:28px}
.qp .fine{margin:4px 0 12px}
.qrow{display:grid;grid-template-columns:110px 1fr 36px 72px;align-items:center;gap:12px;padding:5px 0;font-size:14px}
.qrow.plain{grid-template-columns:110px 1fr 72px}
.qrow.plain .qv{text-align:left}
.qbar{position:relative;height:12px;background:var(--ink);border:1px solid var(--ink3)}
.qbar .band{position:absolute;top:0;bottom:0;background:rgba(201,162,78,.22)}
[data-theme="light"] .qbar .band{background:rgba(138,106,30,.2)}
.qbar .mk{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:var(--gold)}
.qv{text-align:right;font-weight:500}.qv.out{color:var(--error)}
.qr{font-size:12px}
.fa{margin-top:20px}.fa summary{cursor:pointer;color:var(--gold-text);font-size:14px}
.warnings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.warnings li{font-size:14px;padding:10px 14px;border-left:3px solid var(--muted);background:var(--ink)}
.warnings li.warn{border-left-color:var(--gold)} .warnings li.bad{border-left-color:var(--error);color:var(--bone)}
.share{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.share input{flex:1 1 220px;font-size:13px;padding:9px 10px;color:var(--bone-dim)}
.safety{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule);max-width:80ch}
.safety p{color:var(--bone-dim)}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}.panel{padding:20px}}
@media (max-width:560px){.oil-table thead{display:none}.oil-table tbody tr,.oil-table tfoot tr{display:grid;grid-template-columns:1fr auto 36px;gap:6px 8px;padding:10px 0;border-bottom:1px solid var(--ink3)}.oil-table td{border:0;padding:0}.oil-table td:first-child{grid-column:1/-1;width:auto}.oil-table td.num:nth-child(2){justify-content:flex-start}.oil-table .out{align-self:center}.oil-table tfoot tr{grid-template-columns:auto 1fr auto}}
@media (max-width:480px){.field-row{grid-template-columns:1fr}.field-row.four{grid-template-columns:1fr 1fr 1fr}.big-nums{grid-template-columns:1fr}.qrow{grid-template-columns:90px 1fr 30px}.qrow .qr{display:none}.oil-table .amt{width:64px}}
@media print{
  .site-header,.site-footer,.panel:first-child,.share,.theme-toggle,.lede,.calc>h1,.calc>.label{display:none!important}
  body{background:#fff;color:#000}.calc-grid{display:block;margin:0}.panel{border:0;background:#fff;padding:0}
  .formula-head{background:#fff;border:1px solid #000;margin:0 0 12px}.bn{background:#fff}.big-nums{background:#999;border-color:#999}
  .calc-table td,.calc-table th{color:#000;border-color:#bbb}.warnings li{background:#fff;border-color:#000}.fa{display:none}
  .qbar{border-color:#000}.qbar .band{background:#ddd}.qbar .mk{background:#000}.safety{page-break-inside:avoid}
}

.bn .label.nc{text-transform:none;letter-spacing:.06em}