/* ============================================================
   Wicket — styles for Directory, Committees, Documents, Motions
   ============================================================ */

/* ---- shared toolbar + filters ---- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.toolbar__search {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px 13px; min-width: 260px; flex: 1; max-width: 380px;
  color: var(--fg-muted); transition: all var(--dur-fast);
}
.toolbar__search:focus-within { border-color: var(--wk-accent); box-shadow: 0 0 0 3px var(--wk-accent-soft); }
.toolbar__search input { border: 0; outline: 0; background: none; font-family: var(--font-body); font-size: 14px; color: var(--fg1); width: 100%; }
.toolbar__search input::placeholder { color: var(--fg-muted); }
.toolbar__spacer { flex: 1; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-subheading); font-size: 12.5px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--fg2);
  transition: all var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--border-strong); color: var(--tfe-slate); }
.chip--active { background: var(--tfe-slate); border-color: var(--tfe-slate); color: var(--tfe-cream); }
.chip__n { opacity: 0.6; margin-left: 5px; font-size: 11px; }
.chip--active .chip__n { opacity: 0.8; }

/* ---- stat strip ---- */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.statbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-sm); display: flex; align-items: center; gap: 14px; }
.statbox__icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px 12px 12px 3px; background: var(--wk-accent-soft); color: var(--accent-press); }
.statbox__v { font-family: var(--font-heading); font-size: 28px; line-height: 1; color: var(--tfe-slate); letter-spacing: 0.02em; }
.statbox__l { font-size: 11.5px; color: var(--fg2); margin-top: 3px; }

/* ============================================================
   DIRECTORY
   ============================================================ */
.memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.memcard {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 18px;
  transition: all var(--dur-base) var(--ease-standard); display: flex; flex-direction: column; gap: 13px;
}
.memcard:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--border-strong); }
.memcard__top { display: flex; align-items: center; gap: 13px; }
.memcard__id { flex: 1; min-width: 0; }
.memcard__name { font-family: var(--font-subheading); font-size: 16px; font-weight: 600; color: var(--fg1); display: flex; align-items: center; gap: 7px; }
.memcard__role { font-size: 12.5px; color: var(--fg2); margin-top: 1px; }
.officer-pill { font-family: var(--font-subheading); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tfe-cream); background: var(--wk-accent); padding: 2px 7px; border-radius: var(--r-full); }
.memcard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-sm { font-family: var(--font-subheading); font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-full); background: var(--surface-sunken); color: var(--fg2); border: 1px solid var(--border); }
.memcard__foot { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--fg-muted); padding-top: 11px; border-top: 1px solid var(--divider); }
.memcard__foot span { display: inline-flex; align-items: center; gap: 5px; }
.memcard__foot .lc { width: 13px; height: 13px; }

/* slide-over drawer — resting state is visible (no clock dependency);
   entrance is a small transform-only nudge so it's never stuck off-screen */
.drawer-scrim { position: fixed; inset: 0; background: rgba(50,68,70,0.45); z-index: 60; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--bg); z-index: 61; box-shadow: var(--sh-lg);
  transform: none;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .drawer-scrim { animation: scrimIn var(--dur-base) var(--ease-out); }
  .drawer { animation: drawerIn var(--dur-slow) var(--ease-out); }
  @keyframes drawerIn { from { transform: translateX(34px); } }
  @keyframes scrimIn { from { opacity: 0.4; } }
}
.drawer__hero { background: var(--tfe-slate); color: var(--tfe-cream); padding: 24px 24px 22px; position: relative; overflow: hidden; }
.drawer__hero .wm { position: absolute; right: -20px; bottom: -16px; color: rgba(251,248,239,0.06); }
.drawer__close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: var(--r-md); background: rgba(251,248,239,0.1); border: 0; color: var(--tfe-cream); display: grid; place-items: center; transition: background var(--dur-fast); z-index: 2; }
.drawer__close:hover { background: rgba(251,248,239,0.2); }
.drawer__herorow { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.drawer__name { font-family: var(--font-title); font-size: 26px; line-height: 1.05; color: var(--tfe-cream); }
.drawer__role { font-size: 13px; color: var(--tfe-sage); margin-top: 2px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 22px 24px 32px; }
.drawer__section { margin-bottom: 22px; }
.drawer__section h4 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--fg-muted); margin: 0 0 11px; }
.drawer__bio { font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0; }
.kv { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; color: var(--fg1); }
.kv:last-child { border-bottom: 0; }
.kv .lc { width: 16px; height: 16px; color: var(--tfe-olive); flex-shrink: 0; }
.kv .k { color: var(--fg-muted); width: 70px; flex-shrink: 0; font-size: 12px; }
.attendance { display: flex; align-items: center; gap: 14px; }
.ring { --p: 100; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--wk-accent) calc(var(--p) * 1%), var(--surface-sunken) 0);
  display: grid; place-items: center; }
.ring__inner { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-family: var(--font-heading); font-size: 17px; color: var(--tfe-slate); }

/* ============================================================
   COMMITTEES
   ============================================================ */
.commgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-5); }
.commcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; transition: all var(--dur-base); }
.commcard:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.commcard__top { padding: 18px 20px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: 12px; }
.commcard__badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px 13px 13px 3px; display: grid; place-items: center; color: var(--tfe-cream); }
.commcard__badge.slate { background: var(--tfe-slate); } .commcard__badge.olive { background: var(--tfe-olive); } .commcard__badge.sage { background: var(--tfe-sage); }
.commcard__name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 21px; color: var(--tfe-slate); line-height: 1; }
.commcard__chair { font-size: 12px; color: var(--fg-muted); margin-top: 3px; }
.commcard__body { padding: 16px 20px 20px; }
.commcard__charter { font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 0 0 16px; }
.avstack { display: flex; align-items: center; }
.avstack .avatar { border: 2px solid var(--surface); margin-left: -10px; }
.avstack .avatar:first-child { margin-left: 0; }
.avstack__more { margin-left: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-sunken); border: 2px solid var(--surface); display: grid; place-items: center; font-family: var(--font-heading); font-size: 12px; color: var(--fg2); }
.commcard__count { font-size: 12px; color: var(--fg-muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }

/* ============================================================
   DOCUMENTS
   ============================================================ */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start; }
.foldernav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.foldernav__btn { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--r-md); border: 0; background: transparent; color: var(--fg2); font-size: 13.5px; font-weight: 500; text-align: left; transition: all var(--dur-fast); }
.foldernav__btn .lc { width: 17px; height: 17px; color: var(--fg-muted); }
.foldernav__btn:hover { background: var(--surface-sunken); color: var(--tfe-slate); }
.foldernav__btn .n { margin-left: auto; font-size: 11.5px; color: var(--fg-muted); font-family: var(--font-heading); }
.foldernav__btn--active { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); color: var(--tfe-slate); font-weight: 600; }
.foldernav__btn--active .lc { color: var(--wk-accent); }

.docmain { min-width: 0; }
.recent-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.recent { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-sm); transition: all var(--dur-base); }
.recent:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.recent__meta { min-width: 0; }
.recent__name { font-size: 13px; font-weight: 600; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent__sub { font-size: 11px; color: var(--fg-muted); }

.filetable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.filehead { display: grid; grid-template-columns: 1fr 150px 110px 90px 80px; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-family: var(--font-subheading); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.filerow { display: grid; grid-template-columns: 1fr 150px 110px 90px 80px; gap: 12px; padding: 13px 18px; align-items: center; border-bottom: 1px solid var(--divider); transition: background var(--dur-fast); }
.filerow:last-child { border-bottom: 0; }
.filerow:hover { background: var(--surface-sunken); }
.filename { display: flex; align-items: center; gap: 12px; min-width: 0; }
.filename__txt { min-width: 0; }
.filename__name { font-size: 14px; font-weight: 500; color: var(--fg1); display: flex; align-items: center; gap: 8px; }
.filename__name .star { color: var(--warning); display: inline-flex; }
.typeicon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.04em; color: #fff; }
.typeicon.pdf { background: #a6442d; } .typeicon.xls { background: #4f7a3a; } .typeicon.doc { background: #2f5572; } .typeicon.img { background: #7a5a2e; }
.fileowner { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg2); min-width: 0; }
.fileowner .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filecol { font-size: 12.5px; color: var(--fg2); }
.filebadge { font-family: var(--font-subheading); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tfe-cream); background: var(--wk-accent); padding: 2px 6px; border-radius: var(--r-full); }
.fileactions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fast); }
.filerow:hover .fileactions { opacity: 1; }
.fileact { width: 30px; height: 30px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--fg-muted); display: grid; place-items: center; transition: all var(--dur-fast); }
.fileact:hover { background: var(--bg); color: var(--tfe-slate); }

@media (max-width: 1080px) {
  .docs { grid-template-columns: 1fr; }
  .foldernav { position: static; flex-direction: row; flex-wrap: wrap; }
  .foldernav__btn { flex: 0 0 auto; }
  .foldernav__btn .n { display: none; }
}
@media (max-width: 760px) {
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .filehead, .filerow { grid-template-columns: 1fr 70px; }
  .filehead .h-owner, .filehead .h-date, .filerow .c-owner, .filerow .c-date { display: none; }
  .fileactions { opacity: 1; }
  .recent-strip { grid-template-columns: 1fr; }
}