/* ==========================================================================
   BDS — Bonaventura Design System
   Tokens · base · shared components (website, member portal, staff office)
   ========================================================================== */

:root{
  /* Ecclesiastical wine */
  --wine-950:#24060C; --wine-900:#380A15; --wine-800:#4F0F1F; --wine-700:#6B1528;
  --wine-600:#831F38; --wine-500:#9C3049; --wine-200:#E7C7CE; --wine-100:#F3E3E6; --wine-50:#FAF2F3;
  /* Liturgical gold */
  --gold-800:#5E4516; --gold-700:#7A5A1E; --gold-600:#9C7A35; --gold-500:#B8913F;
  --gold-400:#CFAE67; --gold-300:#E2C992; --gold-200:#EEDDB6; --gold-100:#F7EED9;
  /* Ivory & parchment */
  --ivory-0:#FFFEFB; --ivory-50:#FCFAF5; --ivory-100:#F8F4EA; --ivory-200:#F1EADB; --ivory-300:#E6DCC7;
  /* Ink */
  --ink-950:#15110F; --ink-900:#1E1A17; --ink-800:#2E2925; --ink-700:#47403A; --ink-600:#5E554D;
  --ink-500:#716760; --ink-400:#9C9187; --ink-300:#BDB3A8; --ink-200:#DAD2C7; --ink-100:#ECE6DC;
  --line:#E7DFD0; --line-strong:#D5C8B2;

  /* Liturgical colours */
  --lit-green:#2F6A45; --lit-violet:#5B3F8C; --lit-white:#EFE5CC; --lit-red:#A3202D;
  --lit-rose:#C77C95; --lit-black:#1F1B18; --lit-gold:#C9A04A;
  --lit-current:var(--lit-green);

  /* Request status */
  --st-submitted:#3F4B5C; --st-submitted-bg:#ECEFF3;
  --st-review:#7A5200;    --st-review-bg:#FBF0D6;
  --st-info:#8F3E0E;      --st-info-bg:#FCE6D8;
  --st-approved:#1D6440;  --st-approved-bg:#E1F0E6;
  --st-scheduled:#1D4E78; --st-scheduled-bg:#E2ECF6;
  --st-completed:#28463A; --st-completed-bg:#E4EBE6;
  --st-rejected:#8E1F2A;  --st-rejected-bg:#F7E0E2;

  /* Calendar categories */
  --cat-liturujia:#9C7A35; --cat-misa:#6B1528; --cat-sakramenti:#1F5F80; --cat-parokia:#7A4A26;
  --cat-jumuiya:#2F6A45; --cat-vijana:#B04A26; --cat-katekesi:#5B3F8C; --cat-usafi:#3F6A66; --cat-vikao:#5E554D;

  /* Type */
  --font-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --font-sans:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-caps:"Cinzel","Cormorant Garamond",serif;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(36,6,12,.06),0 1px 1px rgba(36,6,12,.03);
  --sh-2:0 10px 24px -12px rgba(36,6,12,.24),0 2px 5px rgba(36,6,12,.05);
  --sh-3:0 30px 60px -24px rgba(36,6,12,.40),0 8px 16px -8px rgba(36,6,12,.12);

  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:150ms; --d-base:260ms; --d-slow:560ms;
  --container:1240px; --gutter:24px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink-900);background:var(--ivory-100);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.15;letter-spacing:-.005em}
p{margin:0}
ul,ol{margin:0;padding:0}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
::selection{background:var(--gold-200);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:999;background:var(--wine-700);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600;transition:top .2s}
.skip-link:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Typography ---------- */
.display{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.01em}
.serif{font-family:var(--font-display)}
.caps{font-family:var(--font-caps);letter-spacing:.14em;text-transform:uppercase}
.h1{font-family:var(--font-display);font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);font-weight:600;line-height:1.05}
.h2{font-family:var(--font-display);font-size:clamp(1.9rem,1.5rem + 1.5vw,2.6rem);font-weight:600;line-height:1.08}
.h3{font-family:var(--font-display);font-size:1.6rem;font-weight:600;line-height:1.15}
.h4{font-size:1.06rem;font-weight:600;line-height:1.3;letter-spacing:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.eyebrow.plain::before{display:none}
.lead{font-size:1.14rem;line-height:1.6;color:var(--ink-700)}
.muted{color:var(--ink-600)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.num{font-variant-numeric:tabular-nums lining-nums}
.link{color:var(--wine-700);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline}
.link .ic{transition:transform var(--d-fast) var(--ease-out)}
.link:hover .ic{transform:translateX(3px)}
.prose p+p{margin-top:.9em}
.prose ol,.prose ul{padding-left:1.3em;margin:.8em 0}
.prose li+li{margin-top:.45em}
.prose h3{font-family:var(--font-display);font-size:1.45rem;margin:1.2em 0 .4em}

/* Gold hairline with centred cross — signature separator */
.rule-cross{display:flex;align-items:center;gap:14px;color:var(--gold-600);margin:18px 0}
.rule-cross::before,.rule-cross::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-400) 30%,var(--gold-400) 70%,transparent)}
.rule-cross span{font-size:14px;line-height:1}
.rule-short{width:56px;height:2px;background:var(--gold-500);border:0;margin:14px 0 0}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.stack>*+*{margin-top:var(--gap,16px)}
.row{display:flex;align-items:center;gap:var(--gap,12px)}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.grid{display:grid;gap:var(--gap,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}:root{--gutter:18px}}

/* ---------- Icons ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:16px;height:16px}
.ic-lg{width:26px;height:26px}
.ic-xl{width:34px;height:34px;stroke-width:1.3}
.ic-fill{fill:currentColor;stroke:none}

/* ---------- Buttons ---------- */
.btn{--b-bg:var(--ivory-0);--b-fg:var(--ink-900);--b-bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-sm);
  border:1px solid var(--b-bd);background:var(--b-bg);color:var(--b-fg);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;transition:background var(--d-fast),border-color var(--d-fast),color var(--d-fast),transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast)}
.btn:hover{border-color:var(--ink-400)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-primary{--b-bg:var(--wine-700);--b-fg:#fff;--b-bd:var(--wine-700)}
.btn-primary:hover{--b-bg:var(--wine-600);--b-bd:var(--wine-600);box-shadow:0 8px 20px -10px rgba(107,21,40,.7)}
.btn-gold{--b-bg:var(--gold-400);--b-fg:var(--wine-950);--b-bd:var(--gold-400)}
.btn-gold:hover{--b-bg:var(--gold-300);--b-bd:var(--gold-300)}
.btn-ghost{--b-bg:transparent;--b-bd:transparent;--b-fg:var(--ink-800)}
.btn-ghost:hover{--b-bg:var(--ivory-200);--b-bd:transparent}
.btn-light{--b-bg:rgba(255,255,255,.08);--b-fg:#fff;--b-bd:rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.btn-light:hover{--b-bg:rgba(255,255,255,.16);--b-bd:#fff}
.btn-danger{--b-bg:var(--ivory-0);--b-fg:var(--st-rejected);--b-bd:#E3B9BE}
.btn-danger:hover{--b-bg:var(--st-rejected-bg)}
.btn-success{--b-bg:var(--st-approved);--b-fg:#fff;--b-bd:var(--st-approved)}
.btn-sm{min-height:34px;padding:0 13px;font-size:.86rem;gap:6px}
.btn-lg{min-height:52px;padding:0 26px;font-size:1rem}
.btn-block{width:100%}
.btn-icon{width:40px;min-height:40px;padding:0;border-radius:var(--r-pill)}
.btn-icon.btn-sm{width:34px;min-height:34px}
.btn .ic{width:18px;height:18px}

/* ---------- Chips, badges, status ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--ivory-0);font-size:.86rem;font-weight:600;color:var(--ink-700);transition:all var(--d-fast);user-select:none}
.chip:hover{border-color:var(--ink-400)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--wine-700);border-color:var(--wine-700);color:#fff}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink-400));box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.chip .count{font-size:.75rem;opacity:.75}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--gold-100);color:var(--gold-800)}
.tag.wine{background:var(--wine-100);color:var(--wine-800)}
.tag.ink{background:var(--ink-100);color:var(--ink-700)}
.tag.green{background:#E1EFE5;color:#1F5A37}
.tag.outline{background:transparent;border:1px solid currentColor}
.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--wine-700);color:#fff;font-size:.7rem;font-weight:700;line-height:1}

.status{--fg:var(--st-submitted);--bg:var(--st-submitted-bg);display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:600;line-height:1.35;white-space:nowrap;color:var(--fg);background:var(--bg);border:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.status .ic{width:14px;height:14px;stroke-width:2}
.status[data-s="submitted"]{--fg:var(--st-submitted);--bg:var(--st-submitted-bg)}
.status[data-s="review"]{--fg:var(--st-review);--bg:var(--st-review-bg)}
.status[data-s="info"]{--fg:var(--st-info);--bg:var(--st-info-bg)}
.status[data-s="approved"]{--fg:var(--st-approved);--bg:var(--st-approved-bg)}
.status[data-s="scheduled"]{--fg:var(--st-scheduled);--bg:var(--st-scheduled-bg)}
.status[data-s="completed"]{--fg:var(--st-completed);--bg:var(--st-completed-bg)}
.status[data-s="rejected"]{--fg:var(--st-rejected);--bg:var(--st-rejected-bg)}

.lit-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c,var(--lit-green));box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.lit-swatch.white{background:var(--lit-white);box-shadow:0 0 0 1px var(--gold-500) inset}
.lit-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 8px;border-radius:var(--r-pill);background:var(--ivory-0);border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink-700)}

/* ---------- Cards ---------- */
.card{background:var(--ivory-0);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-pad{padding:24px}
.card-pad-sm{padding:16px 18px}
.card-hover{transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),border-color var(--d-base)}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:1.02rem;font-weight:700;letter-spacing:.005em;display:flex;align-items:center;gap:8px}
.card-head h3 .ic{color:var(--wine-700)}
.card-head .serif{font-size:1.35rem;font-weight:600}
.card-body{padding:20px 22px}
.card-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.parchment{background:var(--ivory-200)}

/* Arch frame — Romanesque window motif for portraits and sacred art */
.arch{border-radius:999px 999px var(--r-md) var(--r-md);overflow:hidden;position:relative;isolation:isolate}
.arch::after{content:"";position:absolute;inset:6px;border-radius:inherit;border:1px solid rgba(226,201,146,.55);pointer-events:none}

/* Cover art (generated category covers) */
.cover{position:relative;overflow:hidden;background:var(--tone,var(--wine-800));color:var(--ink,#F7EED9);display:grid;place-items:center;isolation:isolate}
.cover::before{content:"";position:absolute;inset:0;background:url("../img/pattern-quatrefoil.svg") center/68px repeat;opacity:.16;z-index:-1}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 10%,rgba(255,255,255,.18),transparent 55%);z-index:-1}
.cover .cover-ic{width:44px;height:44px;stroke-width:1.2;opacity:.9}
.cover .cover-label{font-family:var(--font-display);font-size:1.25rem;font-weight:600;text-align:center;line-height:1.1;padding:0 18px}
.cover .cover-big{font-family:var(--font-display);font-size:3.2rem;font-weight:600;line-height:.9}
.cover[data-tone="wine"]{--tone:linear-gradient(145deg,#6B1528,#380A15)}
.cover[data-tone="gold"]{--tone:linear-gradient(145deg,#CFAE67,#9C7A35);--ink:#2A1606}
.cover[data-tone="ivory"]{--tone:linear-gradient(145deg,#F7EED9,#E6DCC7);--ink:#4F0F1F}
.cover[data-tone="ink"]{--tone:linear-gradient(145deg,#47403A,#1E1A17)}
.cover[data-tone="green"]{--tone:linear-gradient(145deg,#3C7A52,#1F4A30)}
.cover[data-tone="violet"]{--tone:linear-gradient(145deg,#6C4F9C,#3A2660)}
.cover[data-tone="blue"]{--tone:linear-gradient(145deg,#2C6E8F,#173E55)}
.cover[data-tone="terracotta"]{--tone:linear-gradient(145deg,#C0603A,#7A3217)}
.cover img.cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Avatar */
.avatar{--s:40px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:calc(var(--s)*.36);
  color:var(--wine-800);background:linear-gradient(145deg,var(--gold-100),var(--gold-200));border:1px solid var(--gold-300);letter-spacing:.02em;overflow:hidden}
.avatar.wine{background:linear-gradient(145deg,var(--wine-600),var(--wine-800));color:var(--gold-200);border-color:var(--wine-800)}
.avatar.lg{--s:64px}.avatar.xl{--s:96px}.avatar.sm{--s:30px}
.avatar.arch-av{border-radius:999px 999px 12px 12px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font-weight:600;font-size:.9rem;color:var(--ink-800)}
.req{color:var(--wine-600);margin-left:2px}
.opt{font-weight:400;color:var(--ink-500);font-size:.82rem;margin-left:4px}
.input,.select,.textarea{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--ivory-0);
  color:var(--ink-900);font-size:.97rem;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.textarea{min-height:110px;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E554D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(207,174,103,.28)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--st-rejected);box-shadow:0 0 0 3px rgba(142,31,42,.12)}
.hint{font-size:.82rem;color:var(--ink-600)}
.err{display:none;align-items:center;gap:6px;font-size:.83rem;font-weight:600;color:var(--st-rejected)}
.field.has-error .err{display:flex}
.input-group{position:relative;display:flex;align-items:center}
.input-group .ic{position:absolute;left:13px;color:var(--ink-500);pointer-events:none}
.input-group .input{padding-left:42px}
.input-group .suffix{position:absolute;right:6px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-grid .span2{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}}
.fieldset{border:0;padding:0;margin:0}
.fieldset legend{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin-bottom:4px;padding:0}
.form-section+.form-section{margin-top:28px;padding-top:26px;border-top:1px dashed var(--line-strong)}
.form-section-head{margin-bottom:16px}
.form-section-head h3{font-family:var(--font-display);font-size:1.4rem}
.form-section-head p{color:var(--ink-600);font-size:.92rem;margin-top:2px}

.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.45}
.check input{appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--ink-400);border-radius:5px;background:var(--ivory-0);display:grid;place-items:center;transition:all var(--d-fast)}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--wine-700);border-color:var(--wine-700)}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translate(0,-1px) rotate(-45deg)}
.check input[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none}
.check input:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem}
.switch input{appearance:none;width:40px;height:24px;border-radius:99px;background:var(--ink-200);transition:background var(--d-fast);flex:none;position:relative;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--d-base) var(--ease-out)}
.switch input:checked{background:var(--wine-700)}
.switch input:checked::after{transform:translateX(16px)}

.radio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.radio-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--ivory-0);cursor:pointer;transition:all var(--d-fast)}
.radio-card:hover{border-color:var(--ink-400)}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card .rc-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ivory-200);color:var(--wine-700);flex:none}
.radio-card b{display:block;font-size:.95rem}
.radio-card small{display:block;color:var(--ink-600);font-size:.82rem;line-height:1.4;margin-top:2px}
.radio-card:has(input:checked){border-color:var(--wine-700);background:var(--wine-50);box-shadow:0 0 0 1px var(--wine-700) inset}
.radio-card:has(input:checked) .rc-ic{background:var(--wine-700);color:#fff}
.radio-card:has(input:focus-visible){outline:2px solid var(--gold-500);outline-offset:2px}

/* Upload */
.upload{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--ivory-50);padding:18px;display:flex;gap:14px;align-items:center;transition:all var(--d-fast);cursor:pointer}
.upload:hover,.upload.is-drag{border-color:var(--gold-500);background:var(--gold-100)}
.upload .up-ic{width:44px;height:44px;border-radius:12px;background:var(--ivory-0);border:1px solid var(--line);display:grid;place-items:center;color:var(--wine-700);flex:none}
.upload b{display:block;font-size:.95rem}
.upload small{color:var(--ink-600);font-size:.82rem}
.upload input{display:none}
.file-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ivory-0);font-size:.88rem}
.file-item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .ok{color:var(--st-approved)}
.progress{height:6px;border-radius:99px;background:var(--ivory-300);overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--wine-600));border-radius:inherit;width:var(--p,0%);transition:width .6s var(--ease-out)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;padding:12px 14px;border:0;background:none;font-weight:600;font-size:.93rem;color:var(--ink-600);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.tab:hover{color:var(--ink-900)}
.tab[aria-selected="true"],.tab.is-active{color:var(--wine-700)}
.tab[aria-selected="true"]::after,.tab.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--wine-700);border-radius:2px}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-sm);background:var(--ivory-200);border:1px solid var(--line)}
.seg button{border:0;background:none;padding:7px 14px;border-radius:5px;font-weight:600;font-size:.86rem;color:var(--ink-600)}
.seg button[aria-pressed="true"]{background:var(--ivory-0);color:var(--wine-700);box-shadow:var(--sh-1)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ivory-0)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
.table th{position:sticky;top:0;text-align:left;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);background:var(--ivory-50);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--d-fast)}
.table tbody tr:hover{background:var(--ivory-50)}
.table tbody tr.is-click{cursor:pointer}
.table .cell-user{display:flex;align-items:center;gap:11px}
.table .cell-user b{display:block;font-weight:600;line-height:1.25}
.table .cell-user small{color:var(--ink-600);font-size:.8rem}
.table .mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.82rem;color:var(--ink-700)}
@media (max-width:760px){
  .table.stack-sm thead{display:none}
  .table.stack-sm,.table.stack-sm tbody,.table.stack-sm tr,.table.stack-sm td{display:block;width:100%}
  .table.stack-sm tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .table.stack-sm td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px}
  .table.stack-sm td::before{content:attr(data-label);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
  .table.stack-sm td.cell-first{display:block}
  .table.stack-sm td.cell-first::before{display:none}
}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-600)}

/* Filter bar */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filterbar .input-group{flex:1;min-width:220px;max-width:380px}
.filterbar .select{width:auto;min-width:150px;min-height:42px}
.filterbar .input{min-height:42px}

/* ---------- Overlay: modal & drawer ---------- */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(21,17,15,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:fadeIn var(--d-base) var(--ease-out)}
.modal{width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--ivory-0);border-radius:var(--r-xl);box-shadow:var(--sh-3);animation:rise var(--d-slow) var(--ease-out)}
.modal.wide{width:min(880px,100%)}
.modal.narrow{width:min(440px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 12px}
.modal-head h2{font-family:var(--font-display);font-size:1.7rem;font-weight:600}
.modal-body{padding:8px 24px 20px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--line);background:var(--ivory-50);border-radius:0 0 var(--r-xl) var(--r-xl);flex-wrap:wrap}
.overlay.is-drawer{place-items:stretch;justify-content:end;padding:0}
.drawer{width:min(560px,100vw);height:100%;overflow:auto;background:var(--ivory-0);box-shadow:var(--sh-3);animation:slideIn var(--d-slow) var(--ease-out);display:flex;flex-direction:column}
.drawer .modal-head{position:sticky;top:0;background:var(--ivory-0);z-index:2;border-bottom:1px solid var(--line);padding-bottom:16px}
.drawer .modal-body{flex:1;padding-top:18px}
.drawer .modal-foot{position:sticky;bottom:0;border-radius:0}
.overlay.calm,.overlay.calm .modal,.overlay.calm .drawer{animation:none}
@keyframes fadeIn{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}}

/* ---------- Toasts ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;min-width:280px;max-width:380px;padding:14px 16px;border-radius:var(--r-md);background:var(--ink-900);color:#fff;box-shadow:var(--sh-3);animation:toastIn .5s var(--ease-out);font-size:.92rem}
.toast .ic{color:var(--gold-300);margin-top:1px}
.toast b{display:block}
.toast small{color:rgba(255,255,255,.72)}
.toast.out{animation:toastOut .3s var(--ease-io) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){.toasts{left:12px;right:12px;bottom:84px}.toast{min-width:0;max-width:none}}

/* ---------- Alerts / callouts ---------- */
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--gold-100);border:1px solid var(--gold-200);color:var(--ink-800);font-size:.92rem;line-height:1.5}
.callout .ic{color:var(--gold-700);margin-top:2px}
.callout.info{background:#EAF0F5;border-color:#D3DFEA}.callout.info .ic{color:var(--st-scheduled)}
.callout.warn{background:var(--st-info-bg);border-color:#F2CDB5}.callout.warn .ic{color:var(--st-info)}
.callout.ok{background:var(--st-approved-bg);border-color:#C4E0CE}.callout.ok .ic{color:var(--st-approved)}
.callout.err{background:var(--st-rejected-bg);border-color:#EDC3C8}.callout.err .ic{color:var(--st-rejected)}
.callout.lock{background:var(--ink-100);border-color:var(--ink-200)}.callout.lock .ic{color:var(--ink-700)}
.callout b{display:block;margin-bottom:2px}

/* ---------- Timeline (request progress) ---------- */
.timeline{position:relative;list-style:none;padding:0;margin:0}
.timeline li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;padding-bottom:22px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--line-strong)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--gold-500)}
.tl-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-strong);background:var(--ivory-0);color:var(--ink-400);position:relative;z-index:1}
.tl-dot .ic{width:16px;height:16px;stroke-width:2}
.timeline li.done .tl-dot{background:var(--gold-500);border-color:var(--gold-500);color:#fff}
.timeline li.current .tl-dot{border-color:var(--wine-700);color:var(--wine-700);box-shadow:0 0 0 5px var(--wine-100)}
.timeline li.warn .tl-dot{border-color:var(--st-info);color:var(--st-info);box-shadow:0 0 0 5px var(--st-info-bg)}
.timeline li.stop .tl-dot{border-color:var(--st-rejected);background:var(--st-rejected);color:#fff}
.tl-title{font-weight:700;line-height:1.3;margin-top:6px}
.tl-meta{font-size:.82rem;color:var(--ink-600);margin-top:2px}
.tl-note{margin-top:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--ivory-100);border:1px solid var(--line);font-size:.88rem;color:var(--ink-700)}
.timeline li.pending .tl-title{color:var(--ink-500);font-weight:600}

/* Horizontal progress (compact request progress) */
.hsteps{display:flex;gap:4px}
.hsteps i{flex:1;height:5px;border-radius:99px;background:var(--ivory-300)}
.hsteps i.on{background:var(--gold-500)}
.hsteps i.now{background:var(--wine-700)}
.hsteps i.warn{background:var(--st-info)}

/* ---------- Stepper (multi-step form) ---------- */
.stepper{display:grid;grid-template-columns:270px minmax(0,1fr);gap:36px;align-items:start}
.step-rail{position:sticky;top:110px;list-style:none;padding:0;margin:0;counter-reset:s}
.step-rail li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;position:relative}
.step-rail li::after{content:"";position:absolute;left:15px;top:44px;bottom:-4px;width:1px;background:var(--line-strong)}
.step-rail li:last-child::after{display:none}
.step-rail .sn{width:31px;height:31px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.82rem;font-weight:700;border:1.5px solid var(--line-strong);background:var(--ivory-0);color:var(--ink-500)}
.step-rail .st{font-weight:600;font-size:.93rem;line-height:1.25;color:var(--ink-600);padding-top:4px}
.step-rail .st small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-500);margin-top:2px}
.step-rail li.done .sn{background:var(--gold-500);border-color:var(--gold-500);color:#fff}
.step-rail li.done .st{color:var(--ink-800)}
.step-rail li.current .sn{background:var(--wine-700);border-color:var(--wine-700);color:#fff;box-shadow:0 0 0 5px var(--wine-100)}
.step-rail li.current .st{color:var(--ink-900)}
.step-rail button{all:unset;display:flex;gap:12px;cursor:pointer}
.step-rail button:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;border-radius:6px}
.step-top{display:none}
.step-panel{animation:stepIn var(--d-slow) var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}}
.step-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
@media (max-width:900px){
  .stepper{grid-template-columns:1fr;gap:18px}
  .step-rail{display:none}
  .step-top{display:block}
  .step-top .row{margin-bottom:8px}
}
.calm .step-panel,.calm .reveal{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}

/* ---------- Empty / loading / error / success states ---------- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 24px;gap:10px}
.state .state-ic{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--ivory-200);color:var(--gold-700);margin-bottom:6px;position:relative}
.state .state-ic::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--gold-300)}
.state .state-ic .ic{width:30px;height:30px;stroke-width:1.4}
.state h3{font-family:var(--font-display);font-size:1.5rem}
.state p{max-width:420px;color:var(--ink-600);font-size:.94rem}
.state.err .state-ic{background:var(--st-rejected-bg);color:var(--st-rejected)}
.state.ok .state-ic{background:var(--st-approved-bg);color:var(--st-approved)}
.skel{position:relative;overflow:hidden;background:var(--ivory-200);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--gold-200);border-top-color:var(--wine-700);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Success confirmation (submission) */
.success-seal{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,var(--gold-300),var(--gold-600));color:#fff;box-shadow:0 0 0 8px var(--gold-100),0 18px 40px -16px rgba(156,122,53,.8);margin:0 auto}
.success-seal .ic{width:40px;height:40px;stroke-width:2}
.ref-no{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--r-md);border:1px dashed var(--gold-500);background:var(--gold-100);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.06em;color:var(--wine-800)}

/* ---------- KPI ---------- */
.kpi{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;background:var(--ivory-0);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);text-decoration:none;overflow:hidden;transition:all var(--d-base) var(--ease-out)}
a.kpi:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-2px)}
.kpi .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi .kpi-label{font-size:.8rem;font-weight:600;color:var(--ink-600);line-height:1.3}
.kpi .kpi-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ivory-200);color:var(--wine-700)}
.kpi .kpi-ic .ic{width:18px;height:18px}
.kpi .kpi-value{font-family:var(--font-sans);font-size:1.95rem;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ink-900)}
.kpi .kpi-delta{font-size:.8rem;color:var(--ink-600);display:flex;align-items:center;gap:5px}
.kpi .kpi-delta .up{color:var(--st-approved);font-weight:700}
.kpi .kpi-delta .warn{color:var(--st-info);font-weight:700}
.kpi::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--k,var(--gold-400))}

/* ---------- Charts ---------- */
.chart{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font-sans);font-size:11px;fill:var(--ink-600)}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:var(--line-strong)}
.chart .bar{transition:opacity var(--d-fast)}
.chart:hover .bar{opacity:.55}
.chart .bar:hover{opacity:1}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.82rem;color:var(--ink-700)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.chart-tip{position:fixed;z-index:500;pointer-events:none;background:var(--ink-900);color:#fff;padding:8px 11px;border-radius:8px;font-size:.8rem;line-height:1.45;box-shadow:var(--sh-2);transform:translate(-50%,calc(-100% - 12px));white-space:nowrap}
.chart-tip b{color:var(--gold-300)}

/* ---------- Permission matrix ---------- */
.perm-table td,.perm-table th{text-align:center}
.perm-table td:first-child,.perm-table th:first-child{text-align:left}
.perm-box{appearance:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--ink-300);background:var(--ivory-0);display:inline-grid;place-items:center;cursor:pointer;margin:0;vertical-align:middle;transition:all var(--d-fast)}
.perm-box:checked{background:var(--wine-700);border-color:var(--wine-700)}
.perm-box:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.perm-box.sensitive:checked{background:var(--gold-600);border-color:var(--gold-600)}
.perm-na{color:var(--ink-300)}

/* ---------- Notification centre ---------- */
.notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(400px,calc(100vw - 24px));background:var(--ivory-0);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:150;overflow:hidden;animation:rise var(--d-base) var(--ease-out);transform-origin:top right}
.notif-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:background var(--d-fast)}
.notif-item:hover{background:var(--ivory-50)}
.notif-item.unread{background:linear-gradient(90deg,var(--gold-100),transparent 60%)}
.notif-item.unread::before{content:"";position:absolute;left:6px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--wine-700)}
.notif-ic{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ivory-200);color:var(--wine-700)}
.notif-ic .ic{width:17px;height:17px}
.notif-item b{font-size:.9rem;font-weight:600;display:block;line-height:1.35}
.notif-item small{font-size:.78rem;color:var(--ink-500)}
.channel-pills{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.channel-pills i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--ivory-200);color:var(--ink-600)}
.channel-pills i .ic{width:11px;height:11px;stroke-width:2}
@keyframes bellSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-11deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
.bell-swing .ic{animation:bellSwing .9s var(--ease-out);transform-origin:50% 10%}

/* ---------- Mini calendar (liturgical date picker) ---------- */
.minical{background:var(--ivory-0);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;user-select:none}
.minical-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.minical-head b{font-family:var(--font-display);font-size:1.2rem}
.minical-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.minical-grid .dow{font-size:.68rem;font-weight:700;text-align:center;color:var(--ink-500);padding:4px 0;letter-spacing:.04em}
.minical-grid button{position:relative;aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:none;font-size:.88rem;font-weight:600;color:var(--ink-800);display:grid;place-items:center;padding:0}
.minical-grid button::after{content:"";position:absolute;bottom:5px;left:50%;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:var(--lc,transparent)}
.minical-grid button.lc-white::after{background:var(--lit-white);box-shadow:0 0 0 1px var(--gold-500)}
.minical-grid button:hover:not(:disabled){background:var(--ivory-200)}
.minical-grid button.today{border-color:var(--gold-500)}
.minical-grid button.sel{background:var(--wine-700);color:#fff}
.minical-grid button:disabled{color:var(--ink-300);cursor:not-allowed}
.minical-grid button.out{visibility:hidden}
.slot-chips{display:flex;flex-wrap:wrap;gap:8px}
.slot{display:inline-flex;flex-direction:column;align-items:flex-start;padding:9px 14px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--ivory-0);cursor:pointer;min-width:110px;transition:all var(--d-fast)}
.slot b{font-size:1rem;font-variant-numeric:tabular-nums}
.slot small{font-size:.76rem;color:var(--ink-600)}
.slot:hover{border-color:var(--ink-400)}
.slot[aria-pressed="true"]{border-color:var(--wine-700);background:var(--wine-50);box-shadow:0 0 0 1px var(--wine-700) inset}
.slot[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Big calendar ---------- */
.cal{background:var(--ivory-0);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.cal-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--ivory-50)}
.cal-title{font-family:var(--font-display);font-size:1.6rem;font-weight:600;min-width:210px}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line);background:var(--ivory-50)}
.cal-dows div{padding:8px 10px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600)}
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(122px,auto)}
.cal-day{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 8px 6px;display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer;background:var(--ivory-0);transition:background var(--d-fast);text-align:left;border-top:0;border-left:0;font:inherit}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover{background:var(--ivory-50)}
.cal-day::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--lc,transparent)}
.cal-day.lc-white::before{background:repeating-linear-gradient(90deg,var(--lit-white) 0 8px,var(--gold-300) 8px 9px)}
.cal-day.out{background:var(--ivory-100)}
.cal-day.out .cal-num{color:var(--ink-400)}
.cal-num{font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;align-items:center}
.cal-day.today .cal-num span{background:var(--wine-700);color:#fff;border-radius:99px;min-width:26px;height:26px;display:inline-grid;place-items:center;padding:0 6px}
.cal-feast{font-family:var(--font-display);font-size:.93rem;font-weight:600;line-height:1.12;color:var(--ink-800);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-feast.rank-S{color:var(--wine-700)}
.cal-feast .rk{font-family:var(--font-sans);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700);display:block}
.cal-ev{display:flex;align-items:center;gap:5px;font-size:.74rem;line-height:1.3;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2.5px solid var(--c)}
.cal-ev .t{font-weight:700;font-variant-numeric:tabular-nums}
.cal-more{font-size:.72rem;font-weight:700;color:var(--ink-600);padding-left:4px}
.cal-dots{display:none;gap:3px;flex-wrap:wrap}
.cal-dots i{width:6px;height:6px;border-radius:50%;background:var(--c)}
@media (max-width:760px){
  .cal-month{grid-auto-rows:64px}
  .cal-day{padding:6px 4px;align-items:center}
  .cal-feast,.cal-ev,.cal-more{display:none}
  .cal-dots{display:flex;justify-content:center}
  .cal-num{justify-content:center}
  .cal-dows div{text-align:center;padding:8px 2px;letter-spacing:.02em}
  .cal-day.sel{background:var(--gold-100)}
}
.cal-week{display:grid;grid-template-columns:56px repeat(7,minmax(110px,1fr));overflow-x:auto;position:relative}
.cal-week .wh{position:sticky;top:0;z-index:2;padding:10px 8px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);background:var(--ivory-50);font-size:.8rem;min-height:74px}
.cal-week .wh b{display:block;font-size:1.3rem;font-family:var(--font-display);line-height:1}
.cal-week .wh .lb{height:3px;border-radius:2px;background:var(--lc);margin:6px 0 4px}
.cal-week .wh .fe{font-size:.72rem;line-height:1.2;color:var(--ink-700);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-week .wh.today{background:var(--gold-100)}
.cal-week .hours{font-size:.7rem;color:var(--ink-500);text-align:right;padding-right:8px}
.cal-week .hours div{height:48px;transform:translateY(-7px)}
.cal-week .col{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(180deg,transparent 0 47px,var(--line) 47px 48px)}
.cal-week .col.today{background-color:rgba(247,238,217,.35)}
.wk-ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:4px 6px;font-size:.72rem;line-height:1.25;overflow:hidden;background:color-mix(in srgb,var(--c) 12%,#fff);border-left:3px solid var(--c);color:color-mix(in srgb,var(--c) 80%,#000);cursor:pointer;transition:box-shadow var(--d-fast)}
.wk-ev:hover{box-shadow:var(--sh-2);z-index:3}
.wk-ev b{display:block;font-weight:700}
.cal-agenda .ag-day{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cal-agenda .ag-date{border-left:3px solid var(--lc,var(--line));padding-left:12px}
.cal-agenda .ag-date.lc-white{border-left-color:var(--gold-400)}
.cal-agenda .ag-date b{font-family:var(--font-display);font-size:2rem;line-height:1;display:block}
.cal-agenda .ag-date small{font-size:.78rem;color:var(--ink-600);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.ag-feast{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin-bottom:6px}
.ag-ev{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.ag-ev:first-of-type{border-top:0}
.ag-ev .t{font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;color:var(--ink-800)}
.ag-ev .ci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);flex:none}
.ag-ev .ci .ic{width:15px;height:15px}
@media (max-width:640px){.cal-agenda .ag-day{grid-template-columns:1fr;gap:8px}}
.cal-fade{animation:calFade var(--d-slow) var(--ease-out)}
@keyframes calFade{from{opacity:0;transform:translateY(6px)}}

.cal-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--ivory-0)}
.cal-filters .chip{min-height:32px;font-size:.82rem}
.cal-filters .chip[aria-pressed="true"]{background:var(--ivory-0);color:var(--ink-800);border-color:color-mix(in srgb,var(--c) 55%,var(--line-strong))}
.cal-filters .chip[aria-pressed="false"]{color:var(--ink-500);background:var(--ivory-100);border-style:dashed}
.cal-filters .chip[aria-pressed="false"] .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.cal-mass{display:inline-flex;align-items:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--ink-500)}
.cal-mass .ic{width:12px;height:12px}
.cal-mobile-day{display:none}
@media (max-width:760px){.cal-mobile-day{display:block;margin-top:14px}}
.day-lit{position:relative;padding:18px 20px 18px 24px;border-radius:var(--r-lg);background:var(--ivory-100);border:1px solid var(--line);overflow:hidden}
.day-lit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lc)}
.day-lit.lc-white::before{background:linear-gradient(var(--lit-white),var(--gold-300))}
.readings{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.readings li{display:grid;grid-template-columns:150px 1fr;gap:10px;font-size:.92rem;padding:7px 0;border-bottom:1px dashed var(--line)}
.readings li:last-child{border-bottom:0}
.readings li span{color:var(--ink-600)}
.readings li b{font-weight:600}
.minical-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:.72rem;color:var(--ink-600)}
.minical-legend span{display:inline-flex;align-items:center;gap:5px}
.minical-legend i{width:12px;height:3px;border-radius:2px;background:var(--c)}

/* Liturgical year band */
.lit-year{position:relative;padding-top:6px}
.lit-year .bar{display:flex;height:14px;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lit-year .bar i{display:block;height:100%}
.lit-year .labels{display:flex;margin-top:8px;font-size:.72rem;color:var(--ink-600);font-weight:600}
.lit-year .labels span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:4px}
.lit-year .marker{position:absolute;top:0;width:2px;height:26px;background:var(--ink-900);transform:translateX(-1px)}
.lit-year .marker::after{content:attr(data-label);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:700;background:var(--ink-900);color:#fff;padding:2px 7px;border-radius:5px;white-space:nowrap}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Misc ---------- */
.divider-v{width:1px;align-self:stretch;background:var(--line)}
.kbd{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--ivory-0);color:var(--ink-600)}
.dl{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px 16px;font-size:.92rem}
.dl dt{color:var(--ink-600)}
.dl dd{margin:0;font-weight:600;color:var(--ink-900)}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.84rem;color:var(--ink-600)}
.meta-row span{display:inline-flex;align-items:center;gap:6px}
.meta-row .ic{width:15px;height:15px;color:var(--gold-700)}
.pill-toggle{display:flex;gap:6px;flex-wrap:wrap}
.lock-note{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-600);font-weight:600}
.lock-note .ic{width:14px;height:14px;color:var(--gold-700)}
.date-block{width:58px;flex:none;text-align:center;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--ivory-0)}
.date-block small{display:block;background:var(--wine-700);color:var(--gold-200);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 0}
.date-block b{display:block;font-family:var(--font-display);font-size:1.7rem;line-height:1.15;padding:3px 0 1px}
.date-block span{display:block;font-size:.66rem;color:var(--ink-600);padding-bottom:4px;font-weight:600}

/* shared list-hit (search results, compact link lists) */
.search-hit{display:flex;gap:12px;padding:11px 10px;border-radius:var(--r-sm);text-decoration:none;color:inherit}
.search-hit:hover,.search-hit:focus-visible{background:var(--ivory-100)}
.search-hit .ic{color:var(--wine-700);margin-top:2px;flex:none}
.search-hit b{display:block;font-size:.93rem;line-height:1.3}
.search-hit small{color:var(--ink-600);font-size:.8rem}
@media (max-width:760px){.hide-sm{display:none!important}}

/* ---------- Census / household registration ---------- */
.seg-radio{flex-wrap:wrap}
.seg-radio label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;border-radius:5px;font-weight:600;font-size:.88rem;color:var(--ink-600);cursor:pointer;transition:background var(--d-fast),color var(--d-fast)}
.seg-radio input{position:absolute;opacity:0;pointer-events:none}
.seg-radio label:has(input:checked){background:var(--ivory-0);color:var(--wine-700);box-shadow:var(--sh-1)}
.seg-radio label:has(input[value="Hajapata"]:checked){color:var(--st-info)}
.seg-radio label:has(input[value="Amepata"]:checked){color:var(--st-approved)}
.seg-radio label:has(input:focus-visible){outline:2px solid var(--gold-500);outline-offset:2px}
.field.has-error .seg-radio{box-shadow:0 0 0 1.5px var(--st-rejected)}
.faith-block{margin-top:18px;padding:16px 18px;border-radius:var(--r-md);background:var(--ivory-50);border:1px solid var(--line)}
.faith-block .form-grid{gap:14px 20px}
.faith-block>div+div{margin-top:14px}
.sac-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.sac-row{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-sm);background:var(--ivory-0);border:1px solid var(--line)}
.sac-row .sr-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem}
.sac-row .sr-l .ic{width:18px;height:18px;color:var(--wine-700)}
.sac-row .field{gap:0}
@media (max-width:760px){.sac-rows{grid-template-columns:1fr}}
.member-card{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--ivory-0);padding:18px 20px 20px;box-shadow:var(--sh-1);animation:rise var(--d-slow) var(--ease-out)}
.member-card+.member-card{margin-top:16px}
.mc-head{display:flex;align-items:center;gap:12px;margin:-4px 0 14px;padding-bottom:12px;border-bottom:1px dashed var(--line-strong)}
.mc-no{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:99px;background:var(--wine-700);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.mc-name{flex:1;font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--ink-800);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add-member{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:16px;padding:16px;border:1.5px dashed var(--gold-400);border-radius:var(--r-lg);background:var(--gold-100);color:var(--gold-800);font-weight:700;cursor:pointer;transition:all var(--d-fast)}
.add-member:hover{background:var(--gold-200)}
.step-rail li.skipped .sn{background:var(--ivory-200);border-style:dashed;color:var(--ink-400)}
.step-rail li.skipped .st{color:var(--ink-400);text-decoration:line-through;text-decoration-color:var(--ink-300)}
.need-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.need-strip div{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:var(--r-md);background:var(--ivory-0);border:1px solid var(--line);font-size:.86rem}
.need-strip .ic{color:var(--gold-700);flex:none;margin-top:1px}
.need-strip b{display:block;font-size:.9rem}
@media (max-width:900px){.need-strip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.need-strip{grid-template-columns:1fr}}
.roster td .sacs{display:flex;gap:4px}
.sacbadge{display:inline-grid;place-items:center;width:26px;height:22px;border-radius:5px;font-size:.66rem;font-weight:800;letter-spacing:.02em}
.sacbadge.y{background:var(--st-approved-bg);color:var(--st-approved)}
.sacbadge.n{background:var(--st-info-bg);color:var(--st-info)}
.sacbadge.x{background:var(--ivory-200);color:var(--ink-400)}
.prefill-banner{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:#EAF3EC;border:1px solid #C4E0CE;color:#1F5A37;margin-bottom:18px;font-size:.92rem}
.kaya-code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:6px;background:var(--gold-100);color:var(--gold-800);font-size:.84rem}
.step-head h2:focus{outline:none}
.member-card.collapsed .mc-body{display:none}
.member-card.collapsed{padding-bottom:14px}
.member-card.collapsed .mc-head{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mc-head .mc-name{display:block}
.mc-sum{display:none;font-size:.8rem;color:var(--ink-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-card.collapsed .mc-sum{display:block}
.drawer.wide{width:min(860px,100vw)}
.dl dt .ic,.dl dd .ic{display:inline-block;vertical-align:-2px}
.stepper>*{min-width:0}
.step-actions .row.wrap{justify-content:flex-end}
@media (max-width:560px){.step-actions{flex-direction:column-reverse;align-items:stretch}.step-actions .row.wrap{flex-direction:column-reverse;align-items:stretch}.step-actions .btn{width:100%}}