/* =========================================================
   Coastal Living ROLEPLAY — shared site styles
   Same design language as the Public Safety Budget Office.
   ========================================================= */

:root{
  color-scheme: light;
  --page-bg:        #F3F5F7;
  --surface:        #FFFFFF;
  --surface-2:      #EEF2F5;
  --ink:            #10202E;
  --ink-secondary:  #4B5A67;
  --ink-muted:      #647280;
  --hairline:       #DCE3E8;
  --hairline-strong:#C4CFD6;

  --accent:         #B8892F;
  --accent-ink:     #6E4E14;
  --op-fund:        #2A78D6;
  --op-fund-ink:    #144B8F;

  --good:           #0B800B;
  --warning:        #9C6607;
  --critical:       #d03b3b;

  --shadow: 0 1px 2px rgba(16,32,46,0.04), 0 8px 24px -12px rgba(16,32,46,0.12);

  --jso:   #1E4C8A;  --jso-tint:  rgba(30,76,138,0.10);
  --jfrd:  #B23A2E;  --jfrd-tint: rgba(178,58,46,0.10);
  --ncso:  #1E7A72;  --ncso-tint: rgba(30,122,114,0.10);
  --ncfr:  #AD5426;  --ncfr-tint: rgba(173,84,38,0.10);
  --fhp:   #7C6A3D;  --fhp-tint:  rgba(124,106,61,0.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page-bg:        #0B1218;
    --surface:        #121C24;
    --surface-2:      #17222C;
    --ink:            #EAF1F6;
    --ink-secondary:  #A9B8C2;
    --ink-muted:      #82919C;
    --hairline:       #223038;
    --hairline-strong:#2C3D46;

    --accent:         #D9A542;
    --accent-ink:     #F3D383;
    --op-fund:        #3987E5;
    --op-fund-ink:    #9CC3F2;

    --good:           #24c624;
    --warning:        #f5b93e;
    --critical:       #ef6a6a;

    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);

    --jso:  #6E9BD6;  --jso-tint:  rgba(110,155,214,0.14);
    --jfrd: #E1786C;  --jfrd-tint: rgba(225,120,108,0.14);
    --ncso: #4FBBB0;  --ncso-tint: rgba(79,187,176,0.14);
    --ncfr: #E39A5E;  --ncfr-tint: rgba(227,154,94,0.14);
    --fhp:  #C2AE7C;  --fhp-tint:  rgba(194,174,124,0.16);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page-bg:        #0B1218;
  --surface:        #121C24;
  --surface-2:      #17222C;
  --ink:            #EAF1F6;
  --ink-secondary:  #A9B8C2;
  --ink-muted:      #82919C;
  --hairline:       #223038;
  --hairline-strong:#2C3D46;

  --accent:         #D9A542;
  --accent-ink:     #F3D383;
  --op-fund:        #3987E5;
  --op-fund-ink:    #9CC3F2;

  --good:           #24c624;
  --warning:        #f5b93e;
  --critical:       #ef6a6a;

  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);

  --jso:  #6E9BD6;  --jso-tint:  rgba(110,155,214,0.14);
  --jfrd: #E1786C;  --jfrd-tint: rgba(225,120,108,0.14);
  --ncso: #4FBBB0;  --ncso-tint: rgba(79,187,176,0.14);
  --ncfr: #E39A5E;  --ncfr-tint: rgba(227,154,94,0.14);
  --fhp:  #C2AE7C;  --fhp-tint:  rgba(194,174,124,0.16);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Oswald","Public Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
a{color:var(--op-fund-ink); text-decoration:none;}
p a, .prose a{text-decoration:underline; text-underline-offset:2px;}
.num{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--op-fund); outline-offset:2px;}
img{max-width:100%; display:block;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ============ NAV ============ */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-nav .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center; gap:10px; flex:none; min-width:0;}
.brand svg{width:28px; height:28px; flex:none;}
.brand .word{font-family:"Oswald",sans-serif; font-weight:600; font-size:15.5px; letter-spacing:0.03em; color:var(--ink); white-space:nowrap;}
.brand .word b{color:var(--accent-ink);}
.nav-links{display:flex; gap:22px; flex:1; margin-left:8px; min-width:0;}
.nav-links a{
  font-family:"Oswald",sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--ink-secondary); white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-links a.active{color:var(--op-fund-ink); border-bottom:2px solid var(--op-fund);}
.nav-cta{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto;}
@media (max-width:820px){ .nav-links{display:none;} }
@media (max-width:480px){
  .brand .word{display:none;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:7px 12px; font-size:11px;}
}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:"Oswald",sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  padding:9px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--op-fund); color:#fff; box-shadow:var(--shadow);}
.btn-ghost{background:transparent; color:var(--ink-secondary); border-color:var(--hairline-strong);}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink-muted);}
.btn-discord{background:#5865F2; color:#fff;}
.btn-lg{padding:14px 26px; font-size:13.5px; border-radius:10px;}
.btn svg{width:16px; height:16px; flex:none;}

/* ============ SECTION HEADS (shared with budget office) ============ */
.section-head{display:flex; align-items:baseline; gap:12px; margin:56px 0 20px;}
.section-head h2{font-size:22px; font-weight:600;}
.section-head .count{font-size:12.5px; color:var(--ink-muted); text-transform:none; letter-spacing:0; font-family:"Public Sans";}
.section-head::after{content:""; flex:1; height:1px; background:var(--hairline);}
.eyebrow{
  font-family:"Oswald",sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 10px;
}

/* ============ CARDS (shared) ============ */
.card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  padding:20px 22px 18px; box-shadow:var(--shadow);
}

footer.site-footer{
  margin-top:70px; border-top:1px solid var(--hairline); padding:26px 0 34px;
  font-size:11.5px; color:var(--ink-muted);
}
footer.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer.site-footer a{color:var(--ink-muted); text-decoration:underline;}

/* ============ ACRONYM BADGE (shared) ============ */
.acr-badge{
  font-family:"Oswald",sans-serif; font-size:11px; font-weight:600; letter-spacing:0.06em;
  color:var(--dept-color); background:var(--dept-tint); border-radius:5px;
  padding:2px 7px; flex:none;
}

/* ============ APPLICATION FORM KIT (shared — every apply-*.html page) ============ */
.app-shell{
  margin-top:32px; display:grid; grid-template-columns:1fr 260px; gap:26px; align-items:start;
}
@media (max-width:860px){ .app-shell{grid-template-columns:1fr;} }

form.card{padding:28px 28px 26px; display:flex; flex-direction:column; gap:22px; margin-bottom:60px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-family:"Oswald",sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-secondary);}
.field .hint{font-size:11.5px; color:var(--ink-muted); font-weight:400; text-transform:none; letter-spacing:0;}
.field input, .field select, .field textarea{
  font-family:"Public Sans",sans-serif; font-size:14px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink); resize:vertical;
}
.field textarea{min-height:96px; line-height:1.5;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--op-fund); outline-offset:1px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){.row2{grid-template-columns:1fr;}}

.check-field{flex-direction:row; align-items:flex-start; gap:10px;}
.check-field input{width:16px; height:16px; margin-top:3px; flex:none;}
.check-field label{text-transform:none; font-family:"Public Sans"; font-weight:500; font-size:13px; letter-spacing:0; color:var(--ink-secondary);}
.check-field a{color:var(--op-fund-ink);}

.submit-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
#app-status{font-size:12.5px; color:var(--ink-muted);}
#app-status.ok{color:var(--good);}
#app-status.err{color:var(--critical);}

.aside .card{padding:20px; margin-bottom:16px;}
.aside h3{font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-secondary); margin-bottom:10px;}
.aside ul{margin:0; padding-left:18px; font-size:13px; color:var(--ink-secondary); line-height:1.6;}

/* ============ DEPARTMENT APPLICATION HEADER (shared) ============ */
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:"Oswald",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:16px;
}
.back-link:hover{color:var(--ink-secondary);}
.dept-head-row{display:flex; align-items:flex-start; gap:14px;}
.dept-head-row svg.dept-icon-lg{width:34px; height:34px; color:var(--dept-color); flex:none; margin-top:2px;}
.dept-head-row .acr-badge{margin-left:auto; align-self:flex-start; font-size:11.5px; padding:3px 10px;}

/* ============ REFERENCE TABLES (shared — Budget Office, City Services, etc.) ============ */
.ref-tables{display:flex; flex-direction:column; gap:26px;}
.ref-cat h4{
  font-family:"Oswald",sans-serif; font-size:13px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-secondary); margin:0 0 10px;
}
.table-scroll{overflow-x:auto; border:1px solid var(--hairline); border-radius:10px; background:var(--surface); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px;}
thead th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-muted); padding:10px 14px; border-bottom:1px solid var(--hairline);
  background:var(--surface-2);
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--hairline); color:var(--ink-secondary); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
td.item{color:var(--ink); font-weight:500;}
td.price{font-family:"Oswald",sans-serif; font-weight:600; color:var(--ink); white-space:nowrap;}
td.note{color:var(--ink-muted); font-size:12px; max-width:360px;}

/* ============ STATUS PILLS (shared — Budget Office, Council requests, etc.) ============ */
.status-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:99px; white-space:nowrap; flex:none;
}
.status-pill i{width:6px;height:6px;border-radius:50%; flex:none; background:currentColor;}
.status-pill.tier-good{color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent);}
.status-pill.tier-warning{color:var(--warning); background:color-mix(in srgb, var(--warning) 16%, transparent);}
.status-pill.tier-critical{color:var(--critical); background:color-mix(in srgb, var(--critical) 14%, transparent);}
.status-pill.tier-neutral{color:var(--ink-muted); background:var(--surface-2);}