/* ============================================================
   BUREAU OF MINOR SUFFERINGS — THE ARCHIVE  (spatial Phase 5, corrected)
   Loads LAST on complaints/index.html.

   Design intent (per the spatial direction mock): the FILING CABINET
   metaphor applies to the seven DIVISIONS — each division is one
   labelled drawer you browse by hand (RELATIONAL / PROFESSIONAL /
   DOMESTIC …). The 151 individual complaint categories inside a drawer
   stay as plain paper/frosted-glass index cards (their base style from
   subpages.css) — they are the files inside the drawer, not 151 drawers.

   Same material language as the rest of the building: brass, wood,
   smoke-grey steel, cream label paper. Honours reduced-motion.
   ============================================================ */

:root{
  --arch-steel:#6f6a5d;
  --arch-steel-lo:#57534a;
  --arch-steel-hi:#8f8a7c;
  --arch-wood:#47301c;
  --arch-wood-hi:#5a3d24;
  --arch-wood-lo:#3a2716;
  --arch-brass:#c9a033;
  --arch-brass-hi:#f0d878;
  --arch-brass-lo:#8a6d1f;
  --arch-label:#ece2c8;
}

/* ── Registry toolbar: search + division directory (a brass intake counter) ── */
.division-toolbar{
  max-width:1000px;margin:0 auto 34px;
  display:flex;flex-direction:column;gap:16px;
}
.division-search{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(12,24,44,.85),rgba(8,17,33,.9));
  border:1px solid rgba(201,160,51,.32);
  border-radius:4px;
  padding:0 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 14px -8px rgba(0,0,0,.6);
}
.division-search:focus-within{
  border-color:rgba(201,160,51,.6);
  box-shadow:0 0 0 1px rgba(201,160,51,.35),0 6px 20px -10px rgba(0,0,0,.7);
}
.division-search-icon{color:var(--arch-brass);font-size:18px;line-height:1;opacity:.8;}
#division-filter{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--arch-label);
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:15px;letter-spacing:.3px;
  padding:14px 4px;
}
#division-filter::placeholder{color:rgba(236,226,200,.4);}

/* Division jump-links — little brass index tabs */
.division-jump{display:flex;flex-wrap:wrap;gap:8px;}
.division-jump a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.4px;
  color:rgba(236,226,200,.72);
  text-decoration:none;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(180deg,rgba(111,106,93,.4),rgba(87,83,74,.4));
  border:1px solid rgba(0,0,0,.35);
  border-top-color:rgba(255,255,255,.12);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.division-jump a:hover{
  color:var(--arch-brass-hi);
  border-color:rgba(201,160,51,.5);
  background:linear-gradient(180deg,rgba(111,106,93,.6),rgba(87,83,74,.6));
}
.division-jump .dj-icon{font-size:13px;line-height:1;}
.division-noresult{
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:13px;color:rgba(236,226,200,.6);margin:0;
}
.division-noresult a{color:var(--arch-brass-hi);}

/* ── The seven drawers ─────────────────────────────────────────
   Each .division is one cabinet drawer. The head is the drawer face
   (brushed steel + wood shadow-line, a brass pull, a typed index
   label). The grid below is the open drawer's contents. */
.division{
  margin:0 auto 34px;max-width:1000px;scroll-margin-top:80px;
}
.division[hidden]{display:none;}

/* Drawer face */
.division-head{
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  align-items:center;gap:20px;
  padding:20px 26px;
  position:relative;
  border-radius:4px 4px 0 0;
  /* brushed steel drawer front with a warm wood undertone */
  background:
    linear-gradient(180deg,var(--arch-steel-hi) 0%,var(--arch-steel) 46%,var(--arch-steel-lo) 100%);
  border:1px solid rgba(0,0,0,.45);
  border-top-color:rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -8px 16px -8px rgba(0,0,0,.4) inset,
    0 6px 14px -6px rgba(0,0,0,.5);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
/* the machined seam across the drawer face */
.division-head::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
/* brass drawer pull */
.division-head::before{
  content:'';
  grid-column:1;justify-self:center;
  width:54px;height:18px;border-radius:3px;
  background:linear-gradient(180deg,var(--arch-brass-hi),var(--arch-brass) 45%,var(--arch-brass-lo));
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 2px rgba(74,54,12,.5) inset,
    0 2px 5px rgba(0,0,0,.45);
}
/* hover: ease the drawer open */
.division-head:hover{
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 -8px 16px -8px rgba(0,0,0,.4) inset,
    0 12px 24px -8px rgba(0,0,0,.55),
    0 0 26px rgba(201,160,51,.10);
}
.division-icon{
  grid-column:2;
  font-size:30px;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.division-meta{grid-column:3;min-width:0;}
.division-class{
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:#3a2c0d;
  /* stamped into a small brass index plate */
  display:inline-block;
  background:linear-gradient(180deg,var(--arch-brass-hi),var(--arch-brass) 60%,var(--arch-brass-lo));
  padding:2px 8px;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 1px 2px rgba(0,0,0,.4);
  margin-bottom:8px;
}
.division-name{
  font-family:'Cinzel',serif;
  font-size:20px;line-height:1.15;color:var(--arch-label);
  margin:0 0 5px;text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.division-desc{
  font-family:'IM Fell English',serif;
  font-style:italic;font-size:13.5px;line-height:1.4;
  color:rgba(236,226,200,.66);margin:0;max-width:62ch;
}
.division-count{
  grid-column:4;
  font-family:'Courier Prime',ui-monospace,monospace;
  font-size:11px;letter-spacing:.5px;
  color:var(--arch-label);
  text-align:right;white-space:nowrap;
  padding-left:14px;border-left:1px solid rgba(0,0,0,.35);
}
.division-empty{
  font-family:'IM Fell English',serif;
  font-style:italic;color:rgba(236,226,200,.5);
  padding:16px 20px;
  background:linear-gradient(180deg,rgba(58,39,22,.35),rgba(28,20,12,.4));
  border:1px solid rgba(0,0,0,.4);border-top:0;border-radius:0 0 4px 4px;
}

/* Open-drawer interior: the files sit in a recessed wooden tray */
.division .complaints-grid{
  margin:0 auto;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(58,39,22,.30),rgba(28,20,12,.36)),
    linear-gradient(180deg,var(--arch-wood-hi),var(--arch-wood) 60%,var(--arch-wood-lo));
  border:1px solid rgba(0,0,0,.5);border-top:0;
  border-radius:0 0 4px 4px;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6) inset;
}
/* the 151 cards keep their base frosted-glass "paper file" look from
   subpages.css — we only warm the label so it reads on the wood tray */
.division .complaint-title{letter-spacing:.3px;}

/* ── Click-to-open drawers (JS enhancement) ───────────────────
   Real cabinet drawers sit closed until pulled. When JS is on, the
   <body> gets .js-drawers and every division starts collapsed; the
   head becomes a button and the tray slides open on click. Without
   JS none of this applies, so all 151 links stay visible + crawlable. */
.js-drawers .division-head{cursor:pointer;user-select:none;}
.js-drawers .division-head:focus-visible{
  outline:2px solid var(--arch-brass-hi);outline-offset:3px;
}
/* chevron pull-indicator, far right of the drawer face */
.division-chevron{
  grid-column:5;justify-self:end;
  width:18px;height:18px;color:var(--arch-label);opacity:.7;
  display:none;                     /* only shown once JS enables drawers */
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .2s ease;
}
.js-drawers .division-chevron{display:block;}
.js-drawers .division-head:hover .division-chevron{opacity:1;color:var(--arch-brass-hi);}
.division[data-open="true"] .division-chevron{transform:rotate(180deg);}

/* the sliding tray: JS animates max-height between 0 and scrollHeight.
   Targets the wooden tray (.complaints-grid) and the empty-state note.
   Padding + border are also collapsed when shut so no sliver peeks. */
.js-drawers .division .complaints-grid,
.js-drawers .division .division-empty{
  overflow:hidden;
  max-height:0;
  transition:max-height .34s cubic-bezier(.3,.8,.35,1),
             padding .34s cubic-bezier(.3,.8,.35,1);
}
.js-drawers .division:not([data-open="true"]) .complaints-grid,
.js-drawers .division:not([data-open="true"]) .division-empty{
  padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;
}
/* keep the drawer face's bottom edge square while closed so it reads shut */
.js-drawers .division:not([data-open="true"]) .division-head{border-radius:4px;}
.js-drawers .division-head{transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease,border-radius .2s ease;}

@media (max-width:720px){
  .division-head{grid-template-columns:auto 1fr auto;gap:12px 14px;padding:16px 16px;}
  .division-head::before{grid-column:1;width:44px;height:15px;}
  .division-icon{grid-column:2;}
  .division-meta{grid-column:1 / -1;}
  .division-count{grid-column:1 / -1;text-align:left;border-left:0;padding-left:0;
    border-top:1px solid rgba(0,0,0,.3);padding-top:8px;}
  .division-chevron{grid-column:3;grid-row:1;align-self:center;}
  .division-name{font-size:18px;}
  .division .complaints-grid{padding:14px;}
}

/* Footer seal row → a brass wall-plaque above the exits */
.footer-seal-row .footer-divider{
  background:linear-gradient(90deg,transparent,rgba(201,160,51,.5),transparent)!important;
  height:2px!important;
}

@media (prefers-reduced-motion:reduce){
  .division-head,.division-head:hover{transition:none!important;transform:none!important;}
}