/* ==========================================================================
   INTERN ROOM — Design System
   A study room at dusk: dark pine walls, brass lamplight, warm paper.
   Signature motif: the lamp that switches on when you enter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- color tokens ---- */
  --room-dark:      #12201B;
  --room-darker:    #0B1512;
  --room-mid:       #1B2E27;
  --paper:          #F4EEDD;
  --paper-dim:      #EAE2CB;
  --ink:            #1E2A22;
  --ink-soft:       #4B5A4E;
  --brass:          #C89B4A;
  --brass-bright:   #EACB84;
  --brass-dim:      #8C6E36;
  --moss:           #6E9277;
  --moss-soft:      #A9C2AE;
  --cream:          #F3ECDC;
  --cream-dim:      #B9C4B9;
  --line-dark:      rgba(243,236,220,0.12);
  --line-paper:     rgba(30,42,34,0.12);
  --danger:         #C4593F;
  --danger-soft:    #F6E4DE;
  --ok:             #4C8B63;

  /* ---- type ---- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- misc ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(11,21,18,0.35), 0 14px 34px rgba(11,21,18,0.28);
  --shadow-glow: 0 0 0 1px rgba(200,155,74,0.25), 0 8px 30px rgba(200,155,74,0.18);
  --ease: cubic-bezier(.22,.85,.32,1.1);
}

*{ box-sizing: border-box; }
html{ -webkit-tap-highlight-color: transparent; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--room-dark);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select{ font-family: inherit; color: inherit; }
:root{ color-scheme: dark; }   /* native dropdown/date/checkbox popups render dark, not white-on-white */
select{ color-scheme: dark; }
.field-dark option{ background-color: #1B2A22; color: #F3ECDC; }
/* Global button reset — every <button> in the app, classed or not, starts fully
   transparent with inherited text color. This is what actually fixes "light box,
   invisible text": native appearance was bleeding through on unclassed/icon buttons.
   Specific classes (.btn, .chip-toggle, .fh-filter, etc.) layer their real look on top. */
button{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: none; border: none; margin: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: inherit;
}
a{ color: inherit; }
::selection{ background: var(--brass); color: var(--room-darker); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------- */
/* Room backdrop — walls + ambient lamp glow                              */
/* ---------------------------------------------------------------------- */
.room-bg{
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(200,155,74,0.16) 0%, rgba(200,155,74,0) 60%),
    radial-gradient(90% 70% at 85% 100%, rgba(110,146,119,0.10) 0%, rgba(110,146,119,0) 60%),
    linear-gradient(180deg, var(--room-dark) 0%, var(--room-darker) 100%);
}
.room-grain{
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Floating embers (ambient, signature motif reused everywhere) */
.embers{ position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ember{
  position: absolute; bottom: -6%; border-radius: 50%;
  background: radial-gradient(circle, var(--brass-bright) 0%, var(--brass) 60%, transparent 75%);
  opacity: 0; animation: emberRise linear infinite;
  filter: drop-shadow(0 0 4px rgba(234,203,132,0.6));
}
@keyframes emberRise{
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-112vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */
.wrap{ max-width: 880px; margin: 0 auto; padding: 28px 20px 80px; position: relative; }
.wrap-narrow{ max-width: 440px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-bright);
}
.eyebrow svg{ flex: none; }
h1,h2,h3{ font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
.display-xl{ font-size: clamp(34px, 6vw, 54px); font-weight: 600; line-height: 1.08; }
.display-lg{ font-size: clamp(26px, 4vw, 34px); font-weight: 600; line-height: 1.15; }
.display-md{ font-size: 21px; font-weight: 600; line-height: 1.25; }
.lede{ font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--cream-dim); }
.italic{ font-style: italic; color: var(--brass-bright); }
.mono{ font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  appearance: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
  padding: 12px 20px; font-weight: 700; font-size: 14px; font-family: var(--font-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s var(--ease), box-shadow .2s ease, background .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.96); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.btn-lg{ padding: 15px 30px; font-size: 15px; border-radius: 11px; }
.btn-brass{
  background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 100%);
  color: var(--room-darker); box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 10px 24px rgba(200,155,74,0.32);
}
.btn-brass:hover{ filter: brightness(1.06); box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 12px 30px rgba(200,155,74,0.44); }
.btn-outline{
  background: transparent; color: var(--cream); border: 1px solid var(--line-dark);
}
.btn-outline:hover{ background: rgba(243,236,220,0.06); border-color: rgba(243,236,220,0.28); }
.btn-ghost{ background: transparent; color: var(--cream-dim); padding: 10px 14px; }
.btn-ghost:hover{ color: var(--cream); }
.btn-danger{ background: transparent; color: #E9A288; border: 1px solid rgba(196,89,63,0.45); }
.btn-danger:hover{ background: rgba(196,89,63,0.12); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 8px 14px; font-size: 13px; border-radius: 8px; }

/* On-paper variants (buttons sitting on light paper cards) */
.card-paper .btn-outline{ color: var(--ink); border-color: var(--line-paper); }
.card-paper .btn-outline:hover{ background: rgba(30,42,34,0.05); }
.card-paper .btn-ghost{ color: var(--ink-soft); }
.card-paper .btn-ghost:hover{ color: var(--ink); }
.card-paper .btn-danger{ color: #A6472F; border-color: rgba(196,89,63,0.35); }

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(243,236,220,0.05) 0%, rgba(243,236,220,0.02) 100%);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.card-paper{
  background: var(--paper); color: var(--ink); border: 1px solid rgba(30,42,34,0.08);
  border-radius: var(--radius-md); padding: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px rgba(11,21,18,0.35);
}
.card-paper .eyebrow{ color: var(--brass-dim); }
.card-lift{ transition: transform .25s var(--ease), box-shadow .25s ease; }
.card-lift:hover{ transform: translateY(-3px); box-shadow: 0 4px 0 rgba(0,0,0,0.03), 0 26px 48px rgba(11,21,18,0.4); }

/* ---------------------------------------------------------------------- */
/* Inputs                                                                  */
/* ---------------------------------------------------------------------- */
.field-group{ margin-bottom: 14px; }
.field-label{
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.field{
  width: 100%; padding: 13px 15px; border-radius: 9px;
  border: 1.5px solid rgba(30,42,34,0.15); background: rgba(255,255,255,0.7);
  font-size: 15px; color: var(--ink); transition: border-color .15s ease, background .15s ease;
}
.field:focus{ outline: none; border-color: var(--brass); background: #fff; box-shadow: 0 0 0 4px rgba(200,155,74,0.16); }
.field::placeholder{ color: rgba(30,42,34,0.38); }
.field-dark{
  background-color: #1B2A22; border: 1.5px solid var(--line-dark); color: #F3ECDC;
}
.field-dark:focus{ border-color: var(--brass); box-shadow: 0 0 0 4px rgba(200,155,74,0.14); background-color: #22332A; }
.field-dark::placeholder{ color: rgba(243,236,220,0.32); }
textarea.field{ resize: vertical; min-height: 78px; line-height: 1.5; }
.field-wrap{ position: relative; }
.field-icon-btn{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-soft); padding: 6px; border-radius: 6px; display: flex;
}
.field-icon-btn:hover{ background: rgba(30,42,34,0.06); }

.error-msg{
  display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: #A6472F;
  background: var(--danger-soft); border: 1px solid rgba(196,89,63,0.25);
  padding: 10px 12px; border-radius: 9px; margin-bottom: 14px; line-height: 1.4;
}
.error-msg svg{ flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------------- */
/* Divider — a lit filament line                                          */
/* ---------------------------------------------------------------------- */
.filament{ display: flex; align-items: center; gap: 10px; margin: 26px 0; }
.filament::before, .filament::after{ content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line-dark), transparent); }
.filament svg{ flex: none; opacity: 0.7; }

/* ---------------------------------------------------------------------- */
/* Toast                                                                   */
/* ---------------------------------------------------------------------- */
.toast-stack{ position: fixed; bottom: 20px; right: 20px; left: 20px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast{
  pointer-events: auto; display: flex; align-items: center; gap: 9px;
  background: var(--room-darker); color: var(--cream); border: 1px solid var(--line-dark);
  padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4); max-width: 340px;
  animation: toastIn .35s var(--ease) both;
}
.toast.leaving{ animation: toastOut .3s ease forwards; }
.toast.err{ border-color: rgba(196,89,63,0.4); }
.toast.err svg{ color: #E9A288; }
.toast.ok svg{ color: var(--moss-soft); }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(10px) scale(0.96); } to{ opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut{ to{ opacity: 0; transform: translateX(20px); } }

/* ---------------------------------------------------------------------- */
/* Signature lamp mark                                                     */
/* ---------------------------------------------------------------------- */
.lamp-mark .lamp-glow{ transform-origin: 80px 58px; }
.lamp-mark.flicker-on .lamp-glow{ animation: lampFlickerGlow 1.6s ease-out both; }
.lamp-mark.flicker-on .lamp-bulb{ animation: lampFlickerBulb 1.6s ease-out both; }
.lamp-mark.flicker-on .lamp-shade{ animation: shadeSettle .7s var(--ease) both; }
@keyframes lampFlickerGlow{
  0%   { opacity: 0; transform: scale(0.7); }
  8%   { opacity: 0.9; transform: scale(1.05); }
  14%  { opacity: 0.15; }
  20%  { opacity: 1; transform: scale(0.98); }
  26%  { opacity: 0.3; }
  34%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lampFlickerBulb{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(255,244,216,0.9)); }
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  14%  { opacity: 0.2; }
  20%  { opacity: 1; }
  26%  { opacity: 0.35; }
  34%  { opacity: 1; }
}
@keyframes shadeSettle{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } }
.lamp-mark .lamp-glow{ animation: none; }
.lamp-idle .lamp-glow{ animation: lampIdle 4s ease-in-out infinite; }
@keyframes lampIdle{ 0%,100%{ opacity: 0.85; } 50%{ opacity: 1; } }

/* ---------------------------------------------------------------------- */
/* Loading                                                                 */
/* ---------------------------------------------------------------------- */
.loading-screen{ min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.loading-screen .lamp-mini{ width: 46px; height: 46px; animation: lampPulse 1.8s ease-in-out infinite; }
.loading-screen span{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
@keyframes lampPulse{ 0%,100%{ opacity: 0.55; transform: scale(0.96); } 50%{ opacity: 1; transform: scale(1.02); } }

/* ---------------------------------------------------------------------- */
/* Reveal-on-load                                                          */
/* ---------------------------------------------------------------------- */
.reveal{ animation: revealUp .6s var(--ease) both; }
.reveal-1{ animation-delay: .04s; } .reveal-2{ animation-delay: .1s; } .reveal-3{ animation-delay: .16s; }
.reveal-4{ animation-delay: .22s; } .reveal-5{ animation-delay: .28s; }
@keyframes revealUp{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */
.row{ display: flex; align-items: center; }
.between{ justify-content: space-between; }
.gap-8{ gap: 8px; } .gap-10{ gap: 10px; } .gap-14{ gap: 14px; }
.wrap-tags{ display: flex; flex-wrap: wrap; }
.muted{ color: var(--cream-dim); }
.tiny{ font-size: 12px; }
.pill{
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  font-family: var(--font-mono); letter-spacing: 0.04em; padding: 4px 10px; border-radius: 100px;
  text-transform: uppercase;
}
.pill-pending{ background: rgba(200,155,74,0.14); color: var(--brass-bright); border: 1px solid rgba(200,155,74,0.3); }
.pill-reviewed{ background: rgba(110,146,119,0.16); color: var(--moss-soft); border: 1px solid rgba(110,146,119,0.32); }
.card-paper .pill-pending{ background: rgba(200,155,74,0.14); color: var(--brass-dim); }
.card-paper .pill-reviewed{ background: rgba(110,146,119,0.14); color: #3F6E51; }

/* ---------------------------------------------------------------------- */
/* Celebration screen (welcome / special note — one-time reveal)          */
/* ---------------------------------------------------------------------- */
.celebrate{
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 30%, rgba(200,155,74,0.22) 0%, rgba(11,21,18,0) 60%), var(--room-darker);
  animation: celebrateIn .5s var(--ease) both;
}
@keyframes celebrateIn{ from{ opacity: 0; } to{ opacity: 1; } }
.celebrate .lamp-wrap{ width: 96px; height: 102px; margin: 0 auto 6px; }
.celebrate-inner{ position: relative; text-align: center; max-width: 560px; }
.celebrate-badge{
  display: inline-flex; align-items: center; gap: 8px; background: rgba(243,236,220,0.08);
  border: 1px solid var(--line-dark); padding: 8px 16px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass-bright); margin-bottom: 22px;
  animation: revealUp .6s var(--ease) .35s both;
}
.celebrate-text{
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(24px, 4.4vw, 38px); line-height: 1.32; color: var(--cream);
  margin-bottom: 14px; animation: revealUp .6s var(--ease) .48s both;
}
.celebrate-sub{ color: var(--cream-dim); font-size: 14px; margin-bottom: 30px; animation: revealUp .6s var(--ease) .58s both; }
.celebrate .btn{ animation: revealUp .6s var(--ease) .7s both, glowPulse 2.4s ease 1.6s infinite; }
@keyframes glowPulse{ 0%,100%{ box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 10px 24px rgba(200,155,74,0.32); } 50%{ box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 10px 24px rgba(200,155,74,0.32), 0 0 0 12px rgba(200,155,74,0); } }

@media (max-width: 640px){
  .stack-mobile{ flex-direction: column !important; align-items: stretch !important; }
  .wrap{ padding: 20px 16px 70px; }
}

/* ---------------------------------------------------------------------- */
/* v2 — task colour system: amber = admin, blue = meeting, green = own    */
/* ---------------------------------------------------------------------- */
:root{
  --k-admin:      #C89B4A;  /* amber/gold */
  --k-admin-bg:   rgba(200,155,74,0.12);
  --k-admin-line: rgba(200,155,74,0.38);
  --k-meet:       #6D9BC3;  /* dusk blue */
  --k-meet-bg:    rgba(109,155,195,0.12);
  --k-meet-line:  rgba(109,155,195,0.42);
  --k-own:        #6E9277;  /* moss green */
  --k-own-bg:     rgba(110,146,119,0.13);
  --k-own-line:   rgba(110,146,119,0.42);
}
.kind-admin{ --k: var(--k-admin); --k-bg: var(--k-admin-bg); --k-line: var(--k-admin-line); }
.kind-meet { --k: var(--k-meet);  --k-bg: var(--k-meet-bg);  --k-line: var(--k-meet-line); }
.kind-own  { --k: var(--k-own);   --k-bg: var(--k-own-bg);   --k-line: var(--k-own-line); }

.new-badge{
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--room-darker);
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  padding: 2px 7px; border-radius: 100px; box-shadow: 0 0 10px rgba(234,203,132,0.55);
  animation: newPulse 1.8s ease-in-out infinite;
}
@keyframes newPulse{ 0%,100%{ box-shadow: 0 0 6px rgba(234,203,132,0.4);} 50%{ box-shadow: 0 0 14px rgba(234,203,132,0.8);} }

.tab-badge{
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: linear-gradient(180deg, var(--brass-bright), var(--brass)); color: var(--room-darker);
}

/* ---------------------------------------------------------------------- */
/* Task cards (To-Do lists, both sides)                                    */
/* ---------------------------------------------------------------------- */
.task-card{
  position: relative; border: 1px solid var(--k-line, var(--line-dark));
  border-left: 4px solid var(--k, var(--brass));
  background: linear-gradient(180deg, var(--k-bg, rgba(243,236,220,0.04)), rgba(243,236,220,0.02));
  border-radius: 12px; padding: 14px 16px; margin-bottom: 9px;
  transition: transform .18s var(--ease), box-shadow .2s ease;
}
.task-card.is-clickable{ cursor: pointer; }
.task-card.is-clickable:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,21,18,0.35); }
.task-card.is-done{ opacity: 0.55; }
.task-card.is-done .task-title{ text-decoration: line-through; }
.task-card .new-badge{ position: absolute; top: -7px; right: 10px; }
.task-card.is-new{ box-shadow: 0 0 0 1px rgba(234,203,132,0.35), 0 0 22px rgba(234,203,132,0.14); }
.task-title{ font-weight: 700; font-size: 14.5px; }
.task-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; }
.kind-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--k); background: var(--k-bg); border: 1px solid var(--k-line);
  padding: 3px 9px; border-radius: 100px;
}
.date-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 10.5px; color: var(--cream-dim); background: rgba(243,236,220,0.06);
  border: 1px solid var(--line-dark); padding: 3px 9px; border-radius: 100px;
}
.date-pill.unscheduled{ font-style: italic; opacity: 0.85; }
.lock-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #E9A288; background: rgba(196,89,63,0.1); border: 1px solid rgba(196,89,63,0.35);
  padding: 3px 9px; border-radius: 100px;
}
.done-toggle{
  flex: none; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 1.6px solid var(--k-line); background: transparent; color: transparent;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.done-toggle.on{ background: var(--k); border-color: var(--k); color: var(--room-darker); }

.todo-section-head{
  display: flex; align-items: center; gap: 9px; margin: 24px 0 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.todo-section-head .swatch{ width: 10px; height: 10px; border-radius: 3px; }

/* ---------------------------------------------------------------------- */
/* Calendar                                                                */
/* ---------------------------------------------------------------------- */
.cal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title{ font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.cal-nav{ display: flex; gap: 6px; }
.cal-nav .btn{ padding: 8px 11px; }
.cal-grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: rgba(243,236,220,0.03); border: 1px solid var(--line-dark);
  border-radius: 14px; padding: 8px;
}
.cal-dow{
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cream-dim); text-align: center; padding: 6px 0 8px;
}
.cal-cell{
  min-height: 74px; border-radius: 9px; padding: 5px 5px 6px; text-align: left;
  background: rgba(243,236,220,0.03); border: 1px solid transparent; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; transition: border-color .15s ease, background .15s ease;
  appearance: none; font: inherit; color: inherit; overflow: hidden;
}
.cal-cell:hover{ border-color: rgba(200,155,74,0.4); background: rgba(200,155,74,0.06); }
.cal-cell.is-blank{ background: transparent; cursor: default; }
.cal-cell.is-blank:hover{ border-color: transparent; }
.cal-cell .d{ font-family: var(--font-mono); font-size: 11px; color: var(--cream-dim); }
.cal-cell.is-today .d{
  color: var(--room-darker); background: var(--brass-bright); width: 20px; height: 20px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.cal-chip{
  position: relative; font-size: 10px; font-weight: 700; line-height: 1.25; color: var(--cream);
  background: var(--k-bg); border-left: 3px solid var(--k); border-radius: 4px;
  padding: 2px 5px 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip .nb{ position: absolute; top: 1px; right: 2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass-bright); box-shadow: 0 0 6px rgba(234,203,132,0.9); }
.cal-more{ font-family: var(--font-mono); font-size: 9.5px; color: var(--brass-bright); padding-left: 2px; }
.cal-unscheduled{ margin-top: 20px; }

.day-panel{ animation: revealUp .35s var(--ease) both; }
.day-panel .card{ border-color: rgba(200,155,74,0.3); }

@media (max-width: 640px){
  .cal-cell{ min-height: 56px; }
  .cal-chip{ font-size: 8.5px; padding: 1px 3px 1px 5px; }
}

/* ---------------------------------------------------------------------- */
/* Attachments & submissions inside a task                                 */
/* ---------------------------------------------------------------------- */
.file-row{
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 6px;
  background: rgba(243,236,220,0.05); border: 1px solid var(--line-dark); border-radius: 9px;
  font-size: 12.5px;
}
.file-row a{ color: var(--brass-bright); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.file-row a span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .rm{ margin-left: auto; background: none; border: none; color: var(--cream-dim); cursor: pointer; padding: 4px; border-radius: 5px; }
.file-row .rm:hover{ color: #E9A288; background: rgba(196,89,63,0.12); }
.card-paper .file-row{ background: rgba(30,42,34,0.04); border-color: var(--line-paper); }
.card-paper .file-row a{ color: var(--brass-dim); }

.share-toggle{ display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.share-toggle .track{
  width: 36px; height: 20px; border-radius: 100px; background: rgba(243,236,220,0.14);
  position: relative; transition: background .18s ease; flex: none;
}
.share-toggle .track::after{
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--cream); transition: transform .18s var(--ease);
}
.share-toggle.on .track{ background: var(--k-own, var(--moss)); }
.share-toggle.on .track::after{ transform: translateX(16px); }
.card-paper .share-toggle .track{ background: rgba(30,42,34,0.18); }
.card-paper .share-toggle.on .track{ background: var(--moss); }

/* ---------------------------------------------------------------------- */
/* Intern tab bar (public site)                                            */
/* ---------------------------------------------------------------------- */
.pub-tabs{
  display: flex; gap: 4px; margin: 20px 0 22px; padding: 5px;
  background: rgba(243,236,220,0.05); border: 1px solid var(--line-dark); border-radius: 12px;
  position: sticky; top: 10px; z-index: 40; backdrop-filter: blur(8px);
}
.pub-tab{
  flex: 1; appearance: none; border: none; cursor: pointer; background: transparent;
  color: var(--cream-dim); font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 10px 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .18s ease;
}
.pub-tab:hover{ color: var(--cream); }
.pub-tab.active{ background: linear-gradient(180deg, var(--brass-bright), var(--brass)); color: var(--room-darker); box-shadow: 0 4px 14px rgba(200,155,74,0.3); }

/* ---------------------------------------------------------------------- */
/* The Wheel — full-page reveal                                            */
/* ---------------------------------------------------------------------- */
.wheel-overlay{
  position: fixed; inset: 0; z-index: 400; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(60% 55% at 50% 28%, rgba(200,155,74,0.2) 0%, rgba(11,21,18,0) 62%), var(--room-darker);
  animation: celebrateIn .45s var(--ease) both;
}
.wheel-stage{ text-align: center; max-width: 520px; width: 100%; }
.wheel-head{ margin-bottom: 10px; }
.wheel-progress{ font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); margin-top: 8px; }
.wheel-frame{ position: relative; width: min(78vw, 380px); margin: 6px auto 4px; }
.wheel-frame::before{
  content: ''; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(234,203,132,0.16) 0%, rgba(234,203,132,0) 62%);
}
.wheel-pointer{ position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.wheel-svg{ display: block; width: 100%; height: auto; }
.wheel-rotor{ will-change: transform; }
.wheel-slice{ transition: filter .3s ease, opacity .3s ease; }
.wheel-slice.winning{ filter: brightness(1.28) drop-shadow(0 0 12px rgba(234,203,132,0.85)); }
.wheel-label{ fill: #0B1512; font-family: var(--font-body); font-weight: 800; letter-spacing: 0.01em; }
.wheel-announce{ min-height: 118px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.wheel-card{
  background: var(--paper); color: var(--ink); border-radius: 14px; padding: 14px 26px;
  box-shadow: 0 18px 40px rgba(11,21,18,0.5); animation: revealUp .4s var(--ease) both;
}
.wheel-card .wc-task{ font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.wheel-card .wc-goes{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0; }
.wheel-card .wc-who{ font-weight: 800; font-size: 16px; color: var(--brass-dim); }
.wheel-final{ font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--brass-bright); animation: revealUp .4s var(--ease) both; }
.wheel-results{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 16px; }
.wheel-result-chip{
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cream);
  background: rgba(243,236,220,0.06); border: 1px solid var(--line-dark);
  padding: 5px 11px; border-radius: 100px; animation: revealUp .3s var(--ease) both;
}
.wheel-result-chip .dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wheel-result-chip .arrow{ color: var(--cream-dim); }
.wheel-overlay .btn-ghost{ margin-top: 10px; }

/* Wheel setup (admin) */
.wheel-seg-row{ display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wheel-seg-row .seg-dot{ width: 12px; height: 12px; border-radius: 4px; flex: none; }
.wheel-seg-row .rm{ background: none; border: none; color: var(--cream-dim); cursor: pointer; padding: 6px; border-radius: 6px; flex: none; }
.wheel-seg-row .rm:hover{ color: #E9A288; background: rgba(196,89,63,0.12); }

/* Generic modal (dark) */
.ir-modal-overlay{
  position: fixed; inset: 0; background: rgba(11,21,18,0.68); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 26px 16px; z-index: 300;
  overflow-y: auto; animation: celebrateIn .22s ease both;
}
.ir-modal{
  background: var(--room-mid); border: 1px solid rgba(200,155,74,0.28); color: var(--cream);
  border-radius: 16px; padding: 22px; max-width: 560px; width: 100%; position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55); margin: auto 0;
}
.ir-modal .close-x{ position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--cream-dim); padding: 6px; cursor: pointer; border-radius: 7px; }
.ir-modal .close-x:hover{ color: var(--cream); background: rgba(243,236,220,0.07); }

/* ---------------------------------------------------------------------- */
/* Knowledge table                                                         */
/* ---------------------------------------------------------------------- */
.kt-wrap{
  border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden;
  background: rgba(243,236,220,0.03);
}
.kt-row{
  display: grid; grid-template-columns: minmax(120px, 0.9fr) 1.6fr minmax(120px, 0.8fr) auto;
  gap: 12px; align-items: start; padding: 13px 16px;
  border-bottom: 1px solid var(--line-dark);
}
.kt-row:last-child{ border-bottom: none; }
.kt-row.kt-head{
  padding: 10px 16px; background: rgba(200,155,74,0.08);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim);
}
.kt-row .kt-title{ font-weight: 700; font-size: 13.5px; line-height: 1.4; }
.kt-row .kt-content{ font-size: 12.5px; color: var(--cream-dim); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.kt-row .kt-side{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.kt-row .kt-side a{
  color: var(--brass-bright); text-decoration: none; font-family: var(--font-mono); font-size: 11px;
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
}
.kt-row .kt-side a span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-vis{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cream-dim); background: rgba(243,236,220,0.06); border: 1px solid var(--line-dark);
  padding: 3px 8px; border-radius: 100px; max-width: 100%;
}
.kt-vis.on{ color: var(--moss-soft); border-color: var(--k-own-line); background: var(--k-own-bg); }
.kt-actions{ display: flex; gap: 5px; flex: none; }
.kt-actions button{
  background: none; border: 1px solid var(--line-dark); color: var(--cream-dim);
  padding: 6px 8px; border-radius: 7px; cursor: pointer; transition: all .15s ease;
}
.kt-actions button:hover{ color: var(--cream); border-color: rgba(200,155,74,0.4); }
.kt-actions button.danger:hover{ color: #E9A288; border-color: rgba(196,89,63,0.45); background: rgba(196,89,63,0.08); }
.kt-empty{ padding: 22px 16px; text-align: center; color: var(--cream-dim); font-size: 12.5px; }

@media (max-width: 640px){
  .kt-row{ grid-template-columns: 1fr auto; }
  .kt-row .kt-content{ grid-column: 1 / -1; }
  .kt-row .kt-side{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kt-row.kt-head{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* Knowledge: sections, sorting, Excel-style grids                         */
/* ---------------------------------------------------------------------- */
.kt-toolbar{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.kt-toolbar .sort-group{ display: flex; gap: 4px; align-items: center; margin-left: auto; }
.kt-sort{
  appearance: none; border: 1px solid var(--line-dark); background: rgba(243,236,220,0.04);
  color: var(--cream-dim); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px; border-radius: 100px; cursor: pointer;
  transition: all .15s ease;
}
.kt-sort:hover{ color: var(--cream); border-color: rgba(200,155,74,0.4); }
.kt-sort.on{ background: var(--brass); color: var(--room-darker); border-color: var(--brass); }

.kt-section-head{
  display: flex; align-items: center; gap: 8px; margin: 18px 0 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-bright);
}
.kt-section-head .line{ flex: 1; height: 1px; background: var(--line-dark); }
.kt-section-head button{
  background: none; border: none; color: var(--cream-dim); cursor: pointer; padding: 3px 5px; border-radius: 5px;
}
.kt-section-head button:hover{ color: var(--cream); background: rgba(243,236,220,0.07); }
.kt-section-head button.danger:hover{ color: #E9A288; background: rgba(196,89,63,0.1); }

.kt-move{ display: flex; flex-direction: column; gap: 2px; flex: none; }
.kt-move button{
  background: none; border: 1px solid var(--line-dark); color: var(--cream-dim);
  border-radius: 5px; cursor: pointer; padding: 1px 5px; line-height: 1.1; font-size: 10px;
}
.kt-move button:hover{ color: var(--brass-bright); border-color: rgba(200,155,74,0.45); }

/* Excel-style grid */
.kgrid-wrap{ overflow-x: auto; margin-top: 8px; border: 1px solid var(--line-dark); border-radius: 9px; }
table.kgrid{ border-collapse: collapse; width: 100%; min-width: max-content; font-size: 12.5px; }
table.kgrid td{
  border: 1px solid var(--line-dark); padding: 7px 10px; min-width: 92px;
  color: var(--cream); vertical-align: top; white-space: pre-wrap;
}
table.kgrid tr:first-child td{
  background: rgba(200,155,74,0.1); font-weight: 700; color: var(--brass-bright);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
table.kgrid td.empty{ color: var(--cream-dim); opacity: 0.4; }
.card-paper table.kgrid td{ border-color: var(--line-paper); color: var(--ink); }

/* Grid editor */
.kgrid-edit td{ padding: 0; }
.kgrid-edit input{
  width: 100%; min-width: 92px; background: transparent; border: none; color: var(--cream);
  font-family: var(--font-body); font-size: 12.5px; padding: 7px 9px; outline: none;
}
.kgrid-edit input:focus{ background: rgba(200,155,74,0.12); box-shadow: inset 0 0 0 1px var(--brass); }
.kgrid-edit tr:first-child input{ font-weight: 700; color: var(--brass-bright); }
.kgrid-tools{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kgrid-tools button{
  background: rgba(243,236,220,0.05); border: 1px solid var(--line-dark); color: var(--cream-dim);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 10px; border-radius: 7px; cursor: pointer; transition: all .15s ease;
}
.kgrid-tools button:hover{ color: var(--cream); border-color: rgba(200,155,74,0.4); }
.kgrid-tools button.danger:hover{ color: #E9A288; border-color: rgba(196,89,63,0.4); }

/* Admin-rights badges */
.grant-chip{
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 100px;
  background: rgba(200,155,74,0.12); border: 1px solid rgba(200,155,74,0.4); color: var(--brass-bright);
  font-size: 12.5px; font-weight: 700;
}
.grant-chip button{
  background: none; border: none; color: var(--cream-dim); cursor: pointer; padding: 2px 3px; border-radius: 5px;
}
.grant-chip button:hover{ color: #E9A288; background: rgba(196,89,63,0.14); }
.owner-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--room-darker); background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  padding: 3px 9px; border-radius: 100px;
}
.delegate-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--moss-soft); background: var(--k-own-bg); border: 1px solid var(--k-own-line);
  padding: 3px 9px; border-radius: 100px;
}

/* ---------------------------------------------------------------------- */
/* Files hub (submissions / samples / knowledge docs)                      */
/* ---------------------------------------------------------------------- */
.fh-bar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fh-filter{
  appearance: none; border: 1px solid var(--line-dark); background: rgba(243,236,220,0.04);
  color: var(--cream-dim); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px;
  cursor: pointer; transition: all .15s ease;
}
.fh-filter:hover{ color: var(--cream); border-color: rgba(200,155,74,0.4); }
.fh-filter.on{ background: var(--brass); color: var(--room-darker); border-color: var(--brass); }
.fh-row{
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line-dark);
}
.fh-row:last-child{ border-bottom: none; }
.fh-row:hover{ background: rgba(243,236,220,0.03); }
.fh-check{
  width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--line-dark);
  background: transparent; cursor: pointer; flex: none; display: inline-flex;
  align-items: center; justify-content: center; color: transparent; transition: all .12s ease;
}
.fh-check.on{ background: var(--brass); border-color: var(--brass); color: var(--room-darker); }
.fh-name{ font-family: var(--font-mono); font-size: 12px; color: var(--cream); overflow-wrap: anywhere; }
.fh-meta{ font-size: 11px; color: var(--cream-dim); margin-top: 2px; }
.fh-kind{
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 100px; flex: none;
}
.fh-kind.submission{ color: var(--k-own); background: var(--k-own-bg); border: 1px solid var(--k-own-line); }
.fh-kind.sample{ color: var(--k-admin); background: var(--k-admin-bg); border: 1px solid var(--k-admin-line); }
.fh-kind.knowledge{ color: var(--k-meet); background: var(--k-meet-bg); border: 1px solid var(--k-meet-line); }
.fh-dl{
  background: none; border: 1px solid var(--line-dark); color: var(--brass-bright);
  padding: 6px 9px; border-radius: 7px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; flex: none;
}
.fh-dl:hover{ border-color: rgba(200,155,74,0.5); background: rgba(200,155,74,0.1); }
.fh-sticky{
  position: sticky; bottom: 12px; z-index: 40; margin-top: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--room-mid); border: 1px solid rgba(200,155,74,0.35);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
@media (max-width: 640px){
  .fh-row{ grid-template-columns: auto 1fr auto; }
  .fh-row .fh-kind{ grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* Co-admin stamps */
.by-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--k-meet); background: var(--k-meet-bg); border: 1px solid var(--k-meet-line);
  padding: 3px 8px; border-radius: 100px;
}
.by-pill.owner{ color: var(--brass-bright); background: var(--k-admin-bg); border-color: var(--k-admin-line); }
.private-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-dim); background: rgba(243,236,220,0.07); border: 1px solid var(--line-dark);
  padding: 3px 8px; border-radius: 100px;
}
.scope-box{
  border: 1px solid var(--line-dark); border-radius: 10px; padding: 12px; margin-top: 10px;
  background: rgba(243,236,220,0.03);
}

/* ---------------------------------------------------------------------- */
/* Submission review — stars, comment, change requests                     */
/* ---------------------------------------------------------------------- */
.stars{ display: inline-flex; gap: 3px; align-items: center; }
.star{
  background: none; border: none; cursor: pointer; padding: 1px;
  color: rgba(243,236,220,0.22); line-height: 1; transition: color .12s ease, transform .12s var(--ease);
}
.star:hover{ transform: scale(1.15); }
.star.on{ color: var(--brass-bright); filter: drop-shadow(0 0 5px rgba(234,203,132,0.5)); }
.star.readonly{ cursor: default; }
.star.readonly:hover{ transform: none; }
.rating-num{ font-family: var(--font-mono); font-size: 11px; color: var(--cream-dim); margin-left: 5px; }

.review-box{
  border: 1px solid var(--line-dark); border-radius: 12px; padding: 14px;
  background: rgba(243,236,220,0.04); margin-top: 10px;
}
.review-box.changes{ border-color: rgba(196,89,63,0.4); background: rgba(196,89,63,0.08); }
.review-box.reviewed{ border-color: var(--k-own-line); background: var(--k-own-bg); }
.review-note{ font-size: 13px; line-height: 1.55; margin-top: 8px; white-space: pre-wrap; }
.review-meta{ font-family: var(--font-mono); font-size: 10px; color: var(--cream-dim); margin-top: 7px; letter-spacing: 0.04em; }

.ask-pill{
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #E9A288; background: rgba(196,89,63,0.12); border: 1px solid rgba(196,89,63,0.4);
  padding: 3px 9px; border-radius: 100px;
}
.pill-changes{
  background: rgba(196,89,63,0.14); color: #E9A288; border: 1px solid rgba(196,89,63,0.4);
}
.ask-choice{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ask-btn{
  appearance: none; border: 1px solid var(--line-dark); background: rgba(243,236,220,0.04);
  color: var(--cream-dim); font-size: 12px; font-weight: 700; padding: 8px 13px;
  border-radius: 9px; cursor: pointer; transition: all .15s ease;
}
.ask-btn:hover{ color: var(--cream); border-color: rgba(200,155,74,0.4); }
.ask-btn.on{ background: rgba(196,89,63,0.16); color: #E9A288; border-color: rgba(196,89,63,0.5); }
.ask-btn.on.approve{ background: var(--k-own-bg); color: var(--moss-soft); border-color: var(--k-own-line); }

/* ---------------------------------------------------------------------- */
/* Bulk assign table                                                       */
/* ---------------------------------------------------------------------- */
.bulk-wrap{ overflow-x: auto; border: 1px solid var(--line-dark); border-radius: 12px; }
table.bulk{ border-collapse: collapse; width: 100%; min-width: 900px; font-size: 12.5px; }
table.bulk th{
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cream-dim); text-align: left;
  padding: 9px 10px; background: rgba(200,155,74,0.08); border-bottom: 1px solid var(--line-dark);
  white-space: nowrap;
}
table.bulk td{ padding: 6px 8px; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
table.bulk tr:last-child td{ border-bottom: none; }
table.bulk input, table.bulk select, table.bulk textarea{
  width: 100%; background-color: #1B2A22; border: 1px solid var(--line-dark);
  color: #F3ECDC; border-radius: 7px; padding: 7px 8px; font-family: var(--font-body); font-size: 12.5px;
}
table.bulk select option{ background-color: #1B2A22; color: #F3ECDC; }
table.bulk input:focus, table.bulk select:focus, table.bulk textarea:focus{
  outline: none; border-color: var(--brass); background: rgba(200,155,74,0.08);
}
table.bulk .who{ min-width: 190px; }
table.bulk .rmrow{ background: none; border: none; color: var(--cream-dim); cursor: pointer; padding: 6px; border-radius: 6px; }
table.bulk .rmrow:hover{ color: #E9A288; background: rgba(196,89,63,0.12); }
.mini-chip{
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line-dark); background: rgba(243,236,220,0.05); color: var(--cream-dim);
  padding: 4px 8px; border-radius: 100px; cursor: pointer; margin: 2px 3px 2px 0; transition: all .12s ease;
}
.mini-chip.on{ background: var(--brass); color: var(--room-darker); border-color: var(--brass); }

/* ---------------------------------------------------------------------- */
/* Resources Library                                                       */
/* ---------------------------------------------------------------------- */
.lib-sec{ margin-bottom: 22px; }
.lib-sec-head{
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-bright);
}
.lib-sec-head .line{ flex: 1; height: 1px; background: var(--line-dark); }
.lib-sec-head.sub{ color: var(--cream-dim); font-size: 10px; padding-left: 16px; }
.lib-card{
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(243,236,220,0.05), rgba(243,236,220,0.02));
  border: 1px solid var(--line-dark); border-left: 3px solid var(--brass);
  border-radius: 11px; cursor: grab; transition: transform .15s var(--ease), border-color .15s ease;
}
.lib-card:hover{ border-color: rgba(200,155,74,0.4); }
.lib-card.dragging{ opacity: 0.45; cursor: grabbing; }
.lib-card.drop-target{ border-top: 2px solid var(--brass-bright); }
.lib-card.type-doc{ border-left-color: var(--k-meet); }
.lib-card.type-link{ border-left-color: var(--moss-soft); }
.lib-card.type-set{ border-left-color: #C4835F; }
.lib-grip{ color: var(--cream-dim); flex: none; padding-top: 2px; cursor: grab; }
.lib-type{
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 100px; flex: none;
  color: var(--brass-bright); background: var(--k-admin-bg); border: 1px solid var(--k-admin-line);
}
.lib-type.doc{ color: var(--k-meet); background: var(--k-meet-bg); border-color: var(--k-meet-line); }
.lib-type.link{ color: var(--moss-soft); background: var(--k-own-bg); border-color: var(--k-own-line); }
.lib-type.set{ color: #E0A87C; background: rgba(196,131,95,0.12); border-color: rgba(196,131,95,0.4); }

/* ---------------------------------------------------------------------- */
/* Filter / sort chips — explicit, high-contrast, never inherit browser UI */
/* ---------------------------------------------------------------------- */
.kt-toolbar button,
button.fh-filter,
button.kt-sort,
button.lib-filter{
  -webkit-appearance: none;
  appearance: none;
  background-color: #1B2A22;              /* solid, not translucent */
  color: #F3ECDC;                          /* readable cream */
  border: 1px solid rgba(243,236,220,0.22);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kt-toolbar button:hover,
button.fh-filter:hover,
button.kt-sort:hover,
button.lib-filter:hover{
  background-color: #24362C;
  color: #FFF7E6;
  border-color: rgba(200,155,74,0.55);
}
button.fh-filter.on,
button.kt-sort.on,
button.lib-filter.on,
.kt-toolbar button.on{
  background-color: var(--brass);          /* brass fill */
  color: #0B1512;                          /* dark text on brass — high contrast */
  border-color: var(--brass-bright);
  box-shadow: 0 0 12px rgba(200,155,74,0.28);
}
/* the "Set default" ghost button in the sort group keeps its own quieter look */
.kt-toolbar .btn-ghost{
  background-color: transparent;
  color: var(--cream-dim);
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: 0;
}
.kt-toolbar .btn-ghost:hover{ background-color: rgba(243,236,220,0.07); color: var(--cream); }

/* Resubmission badge + review history */
.resub-pill{
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--moss-soft); background: var(--k-own-bg); border: 1px solid var(--k-own-line);
  padding: 2px 7px; border-radius: 100px; flex: none;
}
.review-history{ margin-top: 10px; }
.review-history summary{
  cursor: pointer; font-size: 11.5px; color: var(--cream-dim); font-weight: 700;
  list-style: none; display: inline-flex; align-items: center; gap: 5px; user-select: none;
}
.review-history summary::-webkit-details-marker{ display: none; }
.review-history summary::before{ content: '▸'; font-size: 9px; transition: transform .15s ease; }
.review-history[open] summary::before{ transform: rotate(90deg); }
.review-history-item{
  border-left: 2px solid var(--line-dark); padding: 8px 0 8px 12px; margin: 8px 0 0 4px;
}
.review-history-item .rh-meta{ font-family: var(--font-mono); font-size: 10px; color: var(--cream-dim); margin-top: 4px; }
.review-history-item .rh-note{ font-size: 12.5px; margin-top: 5px; line-height: 1.5; color: var(--cream); }