/* ============================================================================
   TRASH TO CASHBACK — Mandaluyong public layer
   One functional core, three skins, one accessibility control set.

   Loaded AFTER each page's own stylesheet. Touches no IDs and no scripts;
   every form, lookup and map keeps working exactly as built.

   Skins:  A = Palengke (market board)   B = Pasbuk (passbook, default)
           C = Madali (easy mode: bigger everything, one column)
   ============================================================================ */

/* ---------------- accessibility scale (applies in every skin) -------------- */
:root{ --tc-scale:1; }
html{ font-size:calc(100% * var(--tc-scale)); }

/* ---------------- skin B — Pasbuk (default, calm, trustworthy) ------------- */
:root, :root[data-skin="B"]{
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBF8F4;
  --ink:#16110C; --ink-soft:#4A3E33; --ink-faint:#7C6C5D;
  --line:#E8E1D7; --line-soft:#F0EAE1;
  --amber:#B4610F; --amber-deep:#8A4A0A; --gold:#B4610F;
  --fill:#9C520A; --fill-ink:#FFFFFF;
  --maxw:940px; --radius:3px; --tap:44px;
  --h1-family:var(--serif); --h1-weight:600; --h1-transform:none; --h1-size:clamp(30px,5vw,48px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14100C; --surface:#1C1710; --surface-2:#221C14;
    --ink:#F6F1E9; --ink-soft:#CBBFB1; --ink-faint:#948677;
    --line:#2B241B; --line-soft:#241E17;
    --amber:#E39445; --amber-deep:#F0A93C; --gold:#E39445;
    --fill:#E39445; --fill-ink:#14100C;
  }
}
:root[data-theme="dark"]{
  --ground:#14100C; --surface:#1C1710; --surface-2:#221C14;
  --ink:#F6F1E9; --ink-soft:#CBBFB1; --ink-faint:#948677;
  --line:#2B241B; --line-soft:#241E17;
  --amber:#E39445; --amber-deep:#F0A93C; --gold:#E39445;
  --fill:#E39445; --fill-ink:#14100C;
}

/* ---------------- skin A — Palengke (market board) ------------------------- */
:root[data-skin="A"]{
  --ground:#14110D; --surface:#1C1813; --surface-2:#221D16;
  --ink:#FFF8E7; --ink-soft:#E3D9C4; --ink-faint:#B3A78F;
  --line:#332C22; --line-soft:#2A241C;
  --amber:#FFC93C; --amber-deep:#FFD84D; --gold:#FFC93C;
  --fill:#D42E22; --fill-ink:#FFFFFF;
  --h1-family:Anton,Impact,"Arial Narrow",sans-serif; --h1-weight:400;
  --h1-transform:uppercase; --h1-size:clamp(38px,7.4vw,74px);
}
:root[data-skin="A"][data-theme="light"]{ --ground:#14110D; --ink:#FFF8E7; }

/* ---------------- skin C — Madali (easy mode) ----------------------------- */
:root[data-skin="C"]{
  --maxw:660px; --radius:6px; --tap:60px;
  --h1-family:var(--display); --h1-weight:800; --h1-transform:none; --h1-size:clamp(28px,5vw,42px);
}
:root[data-skin="C"] body{ font-size:19px; line-height:1.68; }
:root[data-skin="C"] .card,:root[data-skin="C"] .item,
:root[data-skin="C"] .dl,:root[data-skin="C"] .role{ border-width:2.5px!important }
:root[data-skin="C"] .roles{ flex-direction:column }
:root[data-skin="C"] .roles button{ width:100%; justify-content:flex-start; font-size:17px }
:root[data-skin="C"] .grid,:root[data-skin="C"] .grid2,
:root[data-skin="C"] .cards,:root[data-skin="C"] .dgrid{ grid-template-columns:1fr!important }

/* ---------------- high contrast (over any skin) --------------------------- */
:root[data-contrast="high"]{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --ink:#000000; --ink-soft:#000000; --ink-faint:#1F1F1F;
  --line:#000000; --line-soft:#000000;
  --amber:#7A3D00; --amber-deep:#5C2E00; --gold:#7A3D00;
  --fill:#000000; --fill-ink:#FFFFFF;
}
:root[data-contrast="high"][data-theme="dark"]{
  --ground:#000000; --surface:#000000; --surface-2:#000000;
  --ink:#FFFFFF; --ink-soft:#FFFFFF; --ink-faint:#EDEDED;
  --line:#FFFFFF; --line-soft:#FFFFFF;
  --amber:#FFC46B; --amber-deep:#FFD68F; --gold:#FFC46B;
  --fill:#FFFFFF; --fill-ink:#000000;
}
:root[data-contrast="high"] *{ text-shadow:none!important; box-shadow:none!important }

/* ---------------- shared page furniture ----------------------------------- */
body{ background:var(--ground); color:var(--ink); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px }
a{ color:var(--amber) }
h1{ font-family:var(--h1-family); font-weight:var(--h1-weight); text-transform:var(--h1-transform);
  font-size:var(--h1-size); line-height:1.06; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance }
:root[data-skin="A"] h1{ letter-spacing:.01em; line-height:.94 }
h2{ font-family:var(--h1-family); font-weight:var(--h1-weight); text-transform:var(--h1-transform);
  font-size:clamp(21px,3vw,28px); line-height:1.15; letter-spacing:-.015em; text-wrap:balance }
h3{ font-family:var(--display); font-weight:700; letter-spacing:-.012em }
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); font-weight:600 }
.lede{ font-size:1.12rem; color:var(--ink-soft); max-width:58ch; line-height:1.55 }
header{ padding:40px 0 8px }

.brand{ background:var(--ground); border-bottom:none; padding:13px 22px;
  font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--ink) }
.brand a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; display:inline-block; padding:10px 3px }
.brand a:hover,.brand a:focus-visible{ color:var(--amber) }
.tgr{ height:15px; border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(74deg,var(--ink) 0 7px,transparent 7px 20px,var(--amber) 20px 44px,transparent 44px 58px) }
:root[data-skin="C"] .tgr{ height:9px }

.card,.item,.faq,.law,.dl,.role{ background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:var(--radius) }
.card:hover,.item:hover,.dl:hover{ border-left-color:var(--amber); background:var(--surface-2) }

/* controls, forms, buttons — every tap target respects --tap */
.roles{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 20px }
.roles button{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; padding:12px 16px; min-height:var(--tap); border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer }
.roles button:hover{ border-color:var(--amber); color:var(--ink) }
.roles button.on{ background:var(--fill); border-color:var(--fill); color:var(--fill-ink) }
label,.fgroup label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600 }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  width:100%; padding:13px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:16px;
  min-height:var(--tap) }
:root[data-skin="C"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
:root[data-skin="C"] select,:root[data-skin="C"] textarea{ font-size:18px }
.btn,button.primary,.cta{ font-family:var(--display); font-weight:700; font-size:15px;
  background:var(--fill); color:var(--fill-ink); border:none; border-radius:var(--radius);
  padding:14px 22px; min-height:var(--tap); cursor:pointer }
:root[data-skin="A"] .btn,:root[data-skin="A"] button.primary,:root[data-skin="A"] .cta{
  font-family:Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:.02em; font-size:18px }
:root[data-skin="C"] .btn,:root[data-skin="C"] button.primary,:root[data-skin="C"] .cta{ font-size:18px; width:100% }
.btn:hover,button.primary:hover,.cta:hover{ background:var(--amber-deep); color:var(--fill-ink) }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px }

.big,.bstat,.n,.v{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.025em }
:root[data-skin="A"] .big,:root[data-skin="A"] .bstat{ font-family:Anton,Impact,sans-serif; color:var(--amber) }
.mono,.q,code{ font-family:var(--mono); font-variant-numeric:tabular-nums }
table{ border-collapse:collapse }
th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600 }
.note,.reqnote{ font-size:.9rem; color:var(--ink-faint) }
hr{ border:none; border-top:1px solid var(--line) }

/* ---------------- the control bar ----------------------------------------- */
.tcbar{ position:sticky; top:0; z-index:60; background:var(--surface);
  border-bottom:2px solid var(--line); font-family:var(--sans) }
.tcbar .in{ max-width:1180px; margin:0 auto; padding:8px 18px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center }
.tcbar .lb{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; white-space:nowrap }
.tcseg{ display:flex; border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden }
.tcseg button{ font-family:var(--sans); font-weight:600; font-size:12.5px; background:transparent;
  color:var(--ink-soft); border:none; cursor:pointer; padding:10px 12px;
  min-height:var(--tap); min-width:var(--tap) }
.tcseg button+button{ border-left:1.5px solid var(--line) }
.tcseg button[aria-pressed="true"]{ background:var(--fill); color:var(--fill-ink) }
.tcbar .sp{ flex:1 }
@media (max-width:760px){ .tcbar .sp{ display:none } .tcbar .in{ padding:8px 14px } }

/* ---------------- stakeholder bar ----------------------------------------- */
.tcwho{ background:var(--surface-2); border-bottom:1px solid var(--line) }
.tcwho .in{ max-width:1180px; margin:0 auto; padding:0 18px; display:flex; gap:2px; overflow-x:auto;
  scrollbar-width:none }
.tcwho .in::-webkit-scrollbar{ display:none }
.tcwho a{ font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:13px 14px; white-space:nowrap;
  border-bottom:3px solid transparent; min-height:var(--tap); display:flex; align-items:center }
.tcwho a:hover,.tcwho a:focus-visible{ color:var(--amber); border-bottom-color:var(--amber) }
:root[data-skin="C"] .tcwho .in{ flex-wrap:wrap; overflow:visible }
:root[data-skin="C"] .tcwho a{ font-size:14px; text-transform:none; letter-spacing:0 }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }
@media print{ .tcbar,.tcwho{ display:none } }

/* ---------------- fixes found by the contrast + tap-target audit ----------- */

/* The required-field asterisk uses the page's own red, which is 3.24:1 on the
   Palengke ground. Give it a skin-aware value rather than dimming the marker. */
.req{ color:#AF4A38 }
:root[data-skin="A"] .req{ color:#D96A55 }          /* 5.16:1 on #1C1813 */
:root[data-contrast="high"] .req{ color:var(--ink) }

/* A 13px checkbox is not a tap target. Enlarge the control and give its whole
   row a 44px hit area, so the label is part of the target as WCAG intends. */
.consent{ display:flex; align-items:flex-start; gap:11px; min-height:var(--tap);
  padding:9px 0; cursor:pointer }
.consent input[type=checkbox]{ width:24px; height:24px; min-height:24px; flex:none;
  margin:2px 0 0; accent-color:var(--fill); cursor:pointer }
.consent label,.consent span{ cursor:pointer; text-transform:none; letter-spacing:0;
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); line-height:1.45 }

/* inline links in running text and footers still need a real hit area */
.links a,footer a,.doc-head a,.back a{ display:inline-block; padding:8px 2px; min-height:var(--tap) }