/* dsr/dsr.css — shared stylesheet for the CPWD DSR recipe pages. Self-contained, no JS. */
:root{
  --saffron:#D4500A;--saffron-l:#FEF0E8;--saffron-d:#A33D07;--saffron-m:#E06830;
  --green:#1E6B42;--green-l:#E8F5EE;
  --surface:#F9F5F0;--surface-1:#FFFFFF;--surface-2:#F3EDE5;--surface-3:#EBE3D8;
  --ink:#1C1108;--ink-2:#3D2A18;--ink-3:#6B5040;--ink-4:#9C8070;
  --line:rgba(28,17,8,.10);--line-2:rgba(28,17,8,.16);
  --r-sm:8px;--r:12px;--r-lg:16px;--r-full:100px;
  --f-xs:12px;--f-sm:13px;--f-base:15px;--f-md:16px;--f-lg:19px;--f-xl:24px;
}
@media (prefers-color-scheme: dark){
  :root{
    /* neutral dark (443d8be, 2026-07-25) — keep in sync with the deployed
       dsr/dsr.css: this constant OVERWRITES it on every regen */
    --surface:#141311;--surface-1:#1C1A17;--surface-2:#24211D;--surface-3:#2C2924;
    --ink:#EDE9E3;--ink-2:#C9C2B8;--ink-3:#978E82;--ink-4:#6E675E;
    --line:rgba(237,233,227,.10);--line-2:rgba(237,233,227,.16);
    --saffron-l:#2A1B10;--green-l:#0F2A1B;
  }
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:var(--f-base);line-height:1.6;color:var(--ink);background:var(--surface);}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#1C1108;position:sticky;top:0;z-index:10;}
.wordmark{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:900;color:#fff;letter-spacing:-.3px;}
.wordmark span{color:var(--saffron-m);}
.topnav{display:flex;gap:4px;}
.topnav a{color:rgba(255,255,255,.6);font-size:var(--f-sm);font-weight:600;padding:7px 12px;border-radius:var(--r-sm);}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.08);}

/* layout */
main{padding:0 0 60px;}
.wrap{max-width:840px;margin:0 auto;padding:28px 20px 0;}
.crumb{font-size:var(--f-xs);color:var(--ink-4);margin-bottom:14px;}
.crumb a{color:var(--saffron-d);font-weight:600;}
.crumb span{margin:0 4px;}

h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.5rem,4.4vw,2.15rem);font-weight:900;letter-spacing:-.5px;line-height:1.18;color:var(--ink);margin-bottom:12px;}
h2{font-size:var(--f-lg);font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-.2px;}
h3{font-size:var(--f-md);font-weight:700;color:var(--ink-2);margin:18px 0 6px;}
.intro{font-size:var(--f-md);color:var(--ink-3);line-height:1.65;max-width:70ch;margin-bottom:26px;}

.section{margin-bottom:32px;}
.section-note{font-size:var(--f-xs);color:var(--ink-4);margin-bottom:10px;line-height:1.55;}

/* tables */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-1);-webkit-overflow-scrolling:touch;}
table.recipe-table{border-collapse:collapse;width:100%;min-width:620px;font-size:var(--f-sm);}
table.recipe-table.small{min-width:540px;font-size:var(--f-xs);}
.recipe-table th{text-align:left;font-weight:700;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;}
.recipe-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.recipe-table tbody tr:last-child td{border-bottom:none;}
.c-code{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.92em;color:var(--saffron-d);white-space:nowrap;}
.c-desc{min-width:220px;}
.qty-note{display:block;font-size:11px;color:var(--ink-4);margin-top:2px;font-style:italic;}
.c-desc a.is-link{color:var(--saffron-d);border-bottom:1px dotted currentColor;}
.c-desc a.is-link:hover{border-bottom-style:solid;}
.c-unit{white-space:nowrap;color:var(--ink-3);}
.c-rate,.c-qty,.c-amount{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.c-amount{font-weight:700;}
.total-row td{font-weight:800;background:var(--surface-2);border-top:2px solid var(--line-2);}
.total-row td:first-child{text-align:right;color:var(--ink-3);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.4px;}
.c-brand{font-weight:700;}
.tier{display:block;font-size:11px;color:var(--ink-4);font-weight:400;}

.variation{margin-bottom:20px;}
.variation:last-child{margin-bottom:0;}

/* notes */
.notes ul{display:flex;flex-direction:column;gap:8px;}
.notes li{font-size:var(--f-sm);color:var(--ink-3);line-height:1.6;padding-left:16px;position:relative;}
.notes li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--saffron);}

/* actions */
.actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:var(--r);font-size:var(--f-sm);font-weight:700;border:1px solid transparent;}
.btn-primary{background:var(--saffron);color:#fff;}
.btn-primary:hover{background:var(--saffron-d);}
.btn-secondary{background:var(--surface-1);color:var(--ink-2);border-color:var(--line-2);}
.btn-secondary:hover{background:var(--surface-2);}

/* related */
.related ul{display:flex;flex-direction:column;gap:6px;}
.related a{color:var(--saffron-d);font-weight:600;font-size:var(--f-sm);}
.related a:hover{text-decoration:underline;}

/* hub */
.hub-group{margin-bottom:36px;}
.hub-book{font-size:var(--f-xs);font-weight:500;color:var(--ink-4);text-transform:none;letter-spacing:0;}
.hub-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-1);}
.hub-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;font-size:var(--f-sm);border-bottom:1px solid var(--line);}
.hub-list li:last-child a{border-bottom:none;}
.hub-list a:hover{background:var(--surface-2);}
.hub-title{color:var(--ink-2);font-weight:600;}
.hub-total{color:var(--saffron-d);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* footer */
.site-footer{max-width:840px;margin:40px auto 0;padding:20px 20px 40px;border-top:1px solid var(--line);}
.footer-links{display:flex;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.footer-links a{font-size:var(--f-sm);color:var(--ink-3);font-weight:600;}
.footer-links a:hover{color:var(--saffron-d);}
.footer-copy{font-size:11px;color:var(--ink-4);line-height:1.5;}

/* mobile */
@media (max-width:520px){
  .wrap{padding:20px 14px 0;}
  .topbar{padding:12px 14px;}
  .actions{flex-direction:column;}
  .btn{width:100%;}
}

/* print */
@media print{
  .topbar,.actions,.related,.site-footer,.topnav{display:none !important;}
  body{background:#fff;color:#000;}
  .wrap{max-width:100%;padding:0;}
  .table-scroll{border:1px solid #999;overflow:visible;}
  table.recipe-table{min-width:0;}
  a{color:#000;text-decoration:none;}
  @page{size:A4;margin:16mm;}
}