/* ============================================================
   assets/tdp-public.css — the pages a requester sees:
   the requisition form (tdp_form.php) and the charges and
   process page (tdp_guide.php).
   ============================================================ */
:root{
  --navy:#122A43; --navy-2:#1B3A5C; --gold:#B5852E; --gold-deep:#946A1E;
  --green:#1B6E47; --cream:#F1F2F5; --border:#E4E6EC; --muted:#6E7A86;
  --ink:#16202B; --danger:#B23A2E; --warn:#8A6516;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;}

/* ---------- top bar ---------- */
.top{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;
     padding:0 26px;height:60px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",Georgia,serif;font-size:19px;
     font-weight:700;color:#fff;text-decoration:none;}
.brand i{color:var(--gold);font-size:17px;}
.topnav{display:flex;align-items:center;gap:4px;}
.topnav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:6px;font-size:13.5px;
     font-weight:600;text-decoration:none;color:#E8EDF3;}
.topnav a:hover{background:rgba(255,255,255,.10);color:#fff;}
.topnav a i{color:var(--gold);}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;text-align:center;padding:28px 20px 48px;}
.hero h1{font-family:"Fraunces",Georgia,serif;font-size:31px;font-weight:700;margin:0 0 8px;letter-spacing:-.3px;}
.hero p{margin:0;font-size:14px;color:#C6D2DF;}

/* ---------- shell ---------- */
.wrap{max-width:980px;margin:-30px auto 0;padding:0 24px 50px;}
.wrap.narrow{max-width:720px;}
.box{background:#fff;border:1px solid var(--border);border-radius:10px;padding:24px 26px;margin-bottom:20px;
     box-shadow:0 2px 14px rgba(18,42,67,.06);}
.box h2{font-family:"Fraunces",Georgia,serif;font-size:20px;margin:0 0 4px;color:var(--navy);}
.box h3{font-family:"Fraunces",Georgia,serif;font-size:16px;margin:20px 0 8px;color:var(--navy);}
.box .sub{font-size:13px;color:var(--muted);margin:0 0 16px;}
.muted{font-size:12.5px;color:var(--muted);line-height:1.6;}

/* ---------- notices written by the administrator ---------- */
.notices{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
.notice{background:#fff;border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;
     padding:18px 22px;box-shadow:0 2px 14px rgba(18,42,67,.06);}
.notice h3{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--navy);margin:0 0 10px;
     display:flex;align-items:center;gap:9px;}
.notice h3 i{color:var(--gold);font-size:14px;}
.seemore{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);
     text-decoration:none;align-self:flex-start;}
.seemore:hover{text-decoration:underline;}

/* rich text an administrator wrote — headings, lists, tables, pictures */
.rich{font-size:13.8px;line-height:1.68;color:#3C4753;}
.rich > :first-child{margin-top:0;} .rich > :last-child{margin-bottom:0;}
.rich p{margin:0 0 10px;}
.rich h3{font-family:"Fraunces",Georgia,serif;font-size:16px;color:var(--navy);margin:16px 0 7px;}
.rich h4{font-size:14px;color:var(--navy);margin:14px 0 6px;}
.rich ul,.rich ol{margin:0 0 10px;padding-left:22px;} .rich li{margin-bottom:4px;}
.rich a{color:var(--navy);font-weight:600;}
.rich hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
.rich blockquote{margin:0 0 10px;padding:9px 14px;background:#F7F8FB;border-left:3px solid var(--gold);
     border-radius:0 6px 6px 0;color:#4B5763;}
.rich code{background:#F1F3F8;border-radius:4px;padding:1px 5px;font-size:12.5px;}
.rich img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px;margin:6px 0;}
.rich table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13px;}
.rich th,.rich td{border:1px solid var(--border);padding:8px 11px;text-align:left;vertical-align:top;}
.rich th{background:#F7F8FB;color:var(--navy);font-weight:700;}
.rich tr:nth-child(even) td{background:#FAFBFD;}

/* attachments under a notice */
.atts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:flex-start;}
.atts img{max-width:210px;max-height:170px;border:1px solid var(--border);border-radius:8px;display:block;}
.att{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--border);border-radius:8px;
     font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;background:#FAFBFD;}
.att i{color:var(--gold-deep);} .att:hover{border-color:var(--navy);background:#fff;}

/* ---------- tables on the guide page ---------- */
table.plain{width:100%;border-collapse:collapse;font-size:13.5px;}
table.plain th,table.plain td{padding:10px 12px;border-bottom:1px solid #EEF0F4;text-align:left;vertical-align:top;}
table.plain th{background:#F7F8FB;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
table.plain td.r,table.plain th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
table.plain td.tot{font-weight:700;color:var(--navy);}
.formula{background:#F7F8FB;border-left:4px solid var(--gold);border-radius:0 7px 7px 0;padding:13px 16px;
     font-size:14px;font-weight:600;color:var(--navy);margin:0 0 16px;}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.steps li{border:1px solid var(--border);border-radius:8px;padding:13px 15px 13px 48px;position:relative;
     font-size:13.5px;line-height:1.6;}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:13px;top:13px;width:24px;height:24px;
     border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;display:flex;
     align-items:center;justify-content:center;}
.steps li b{color:var(--navy);}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.chip{background:#F1F3F8;border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:12.5px;}
.chip b{color:var(--gold-deep);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* ---------- form ---------- */
fieldset{border:none;border-top:1px solid var(--border);margin:0 0 22px;padding:18px 0 0;}
fieldset:first-of-type{border-top:none;padding-top:0;}
legend{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:700;color:var(--navy);padding:0 10px 0 0;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.f label{font-size:12.5px;font-weight:600;color:var(--navy);}
.f .hint{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:6px;}
.rq{color:var(--danger);}
.f input[type=text],.f input[type=email],.f input[type=number],.f input[type=date],.f input:not([type]),
.f select,.f textarea,input.fi,select.fi,textarea.fi{
     border:1px solid var(--border);border-radius:7px;padding:10px 12px;font-size:14px;font-family:inherit;
     color:var(--ink);background:#fff;width:100%;}
.f textarea{resize:vertical;line-height:1.55;}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,42,67,.08);}
.f input[type=file]{font-size:13px;padding:9px 10px;border:1px dashed var(--border);border-radius:7px;background:#FAFBFD;width:100%;}
.checks{display:flex;flex-wrap:wrap;gap:8px;}
.checks.tight{gap:6px;}
.ck{display:inline-flex;align-items:flex-start;gap:8px;padding:9px 13px;border:1px solid var(--border);border-radius:7px;
     font-size:13.5px;cursor:pointer;background:#fff;}
.ck:hover{border-color:var(--navy);background:#FBFCFE;}
.ck input{margin:2px 0 0;}
.ck.big{display:flex;width:100%;margin-bottom:10px;line-height:1.6;font-size:13.5px;color:#3C4753;}
.acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:none;border-radius:7px;font-size:14.5px;
     font-weight:700;text-decoration:none;color:#fff;cursor:pointer;font-family:inherit;white-space:nowrap;}
.btn.green{background:var(--green);} .btn.navy{background:var(--navy);} .btn.gold{background:var(--gold);}
.btn.ghost{background:#F1F3F8;color:var(--navy);}
.btn.off{background:#9AA3AE;cursor:default;}
.btn:hover{filter:brightness(1.08);}

/* ---------- alerts ---------- */
.alert{border-radius:8px;padding:13px 16px;font-size:13.5px;line-height:1.6;}
.alert.bad{background:#FBEBE8;border:1px solid #E8C4BD;color:var(--danger);}
.alert.warn{background:#FBF3E0;border:1px solid #E8D6AC;color:var(--warn);display:flex;gap:10px;align-items:flex-start;}
.alert.ok{background:#E8F3EC;border:1px solid #BFDCC9;color:var(--green);}
.alert ul{margin:7px 0 0 18px;padding:0;}

/* ---------- acknowledgement ---------- */
.ack .jobno{background:var(--navy);color:#fff;border-radius:9px;padding:18px 22px;text-align:center;margin-bottom:18px;}
.ack .jobno span{display:block;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:#9FB2CB;}
.ack .jobno b{font-family:"IBM Plex Mono","Courier New",monospace;font-size:26px;letter-spacing:1px;display:block;margin-top:5px;}
table.kv{width:100%;border-collapse:collapse;font-size:13.5px;}
table.kv td{padding:8px 10px;border-bottom:1px solid #EEF0F4;}
table.kv td:first-child{color:var(--muted);width:35%;font-size:12.5px;}
.next{padding-left:20px;margin:0 0 14px;font-size:13.5px;line-height:1.7;}

footer{text-align:center;font-size:12px;color:var(--muted);padding:0 20px 40px;line-height:1.7;}
@media(max-width:820px){
  .g2,.g3,.steps,.grid2{grid-template-columns:1fr;}
  .hero h1{font-size:25px;} .wrap{margin-top:-22px;padding:0 16px 40px;}
  .top{height:auto;padding:10px 16px;gap:8px;} .box{padding:20px 18px;}
}