/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Character float animation */
@keyframes tk-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  [style*="tk-float"] { animation: none !important; }
}

/* Proclamation banner sheen sweep */
@keyframes tk-sheen {
  0%          { transform: translateX(-120%); }
  60%,100%    { transform: translateX(320%); }
}

/* Wax seal glow pulse */
@keyframes tk-sealpulse {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.4), 0 0 0 0 rgba(202,164,65,.5); }
  50%     { box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.4), 0 0 0 7px rgba(202,164,65,0); }
}

/* Search clear button: hidden when input is empty, shown when it has content */
[data-tab-search-target="clearBtn"],
[data-search-field-target="clearBtn"] { display: none; }
input:not(:placeholder-shown) + [data-tab-search-target="clearBtn"],
input:not(:placeholder-shown) + [data-search-field-target="clearBtn"] { display: flex; }

/* Rank ceremony entrance animation */
.ceremony-enter {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.ceremony-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mastery filter pills */
.mastery-pill {
  font: 500 13px/1 'EB Garamond', serif;
  color: #4a3c26;
  background: #efe2c0;
  border: 1.5px solid #c4ab73;
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
}
.mastery-pill.active {
  font: 600 13px/1 'Cinzel', serif;
  color: #fff;
  background: #3a5a3c;
  border-color: #233c25;
}

/* Petition urgency toggle */
.urgency-btn {
  flex: 1;
  display: block;
  text-align: center;
  font: 500 13px/1 'EB Garamond', serif;
  color: #6b5d44;
  background: #f1e6c8;
  border: 1.5px solid #c4ab73;
  border-radius: 2px;
  padding: 11px 4px;
  cursor: pointer;
}
.urgency-btn:has(input:checked) {
  font-weight: 600;
  color: #fff;
  background: #3a5a3c;
  border-color: #233c25;
}
.urgency-btn input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Petition field inputs */
.petition-input {
  width: 100%;
  background: #fffdf6;
  border: 1.5px solid #4a3c26;
  border-radius: 2px;
  padding: 11px 13px;
  font: 500 16px/1.2 'EB Garamond', serif;
  color: #241f17;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  outline: none;
}
.petition-input::placeholder { color: #b0a080; font-style: italic; }
.petition-label {
  display: block;
  font: 600 11px/1 'Libre Franklin', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9a7d2e;
  margin-bottom: 8px;
}

/* ── Scriptorium design tokens ─────────────────────────────────── */
:root {
  --tk-parchment: #f2e7cb;        /* page background */
  --tk-parchment-light: #f8f0d8;  /* cards */
  --tk-parchment-pale: #faf3df;   /* menus, proclamations */
  --tk-parchment-warm: #f7efd9;   /* banners, panel headers */
  --tk-forest: #2b3f2d;
  --tk-forest-btn: #3a5a3c;
  --tk-forest-border: #233c25;
  --tk-gold: #c9a84a;
  --tk-gold-dark: #9a7d2e;
  --tk-gold-deep: #b8902f;
  --tk-gold-border: #c4ab73;
  --tk-wax: #7d2820;
  --tk-wax-bright: #a8442f;
  --tk-ink: #241f17;
  --tk-ink-soft: #3a3024;
  --tk-brown: #6b5d44;
  --tk-muted: #6f6857;
  --tk-font-display: 'Cinzel', serif;
  --tk-font-body: 'EB Garamond', serif;
  --tk-font-ui: 'Libre Franklin', sans-serif;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.tk-btn {
  display: inline-block;
  font: 600 15px/1 var(--tk-font-display);
  border-radius: 3px;
  padding: 12px 22px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.tk-btn.sm { font-size: 13px; padding: 9px 16px; }
.tk-btn.lg { font-size: 17px; padding: 14px 28px; }
.tk-btn-green {
  color: #fff;
  background: var(--tk-forest-btn);
  border: 1.5px solid var(--tk-forest-border);
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.tk-btn-green:hover { background: #446a47; }
.tk-btn-gold {
  color: #1f2e21;
  background: linear-gradient(180deg,#e3c878,#caa441);
  border: 1.5px solid #8a6f24;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.tk-btn-gold:hover { filter: brightness(1.05); }
.tk-btn-outline {
  color: #4a3c26;
  background: transparent;
  border: 1.5px solid var(--tk-gold-deep);
}
.tk-btn-outline:hover { background: rgba(184,144,47,.1); }

/* ── Admin form fields ─────────────────────────────────────────── */
.tk-label {
  display: block;
  font: 600 12px/1 var(--tk-font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tk-brown);
  margin-bottom: 6px;
}
.tk-input {
  width: 100%;
  border: 1.5px solid var(--tk-gold-border);
  border-radius: 3px;
  padding: 9px 12px;
  background: #fdf8ee;
  font: 400 14px/1.4 var(--tk-font-ui);
  color: var(--tk-ink);
}
.tk-input-mono { font: 400 13px/1.7 'Courier New', monospace; }

/* ── Surfaces ──────────────────────────────────────────────────── */
.tk-card {
  background: var(--tk-parchment-light);
  border: 1.5px solid #2a2218;
  border-radius: 2px;
  box-shadow: 3px 4px 0 rgba(42,34,24,.13);
}
.tk-menu {
  background: var(--tk-parchment-pale);
  border: 1.5px solid #2a2218;
  border-radius: 3px;
  box-shadow: 0 16px 34px rgba(20,14,6,.34);
  overflow: hidden;
}

/* ── Wax seal (size via inline width/height/font-size) ─────────── */
.tk-seal {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ba5042, var(--tk-wax) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eccfa6;
  font-family: var(--tk-font-display);
  font-weight: 700;
}

/* ── Badges & pills ────────────────────────────────────────────── */
.tk-badge-new {
  font: 600 9px/1 var(--tk-font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tk-wax-bright);
  border-radius: 9px;
  padding: 3px 7px;
}
.tk-pill-new {
  font: 600 9px/1 var(--tk-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1c2226;
  background: #9bbf8e;
  border-radius: 3px;
  padding: 2px 5px;
}

/* ── Navigation ──────────────────────────────────────────────── */
.tk-nav-link { font: 500 15px/1 var(--tk-font-display); color: var(--tk-muted); text-decoration: none; }
.tk-nav-link.active { color: var(--tk-forest); font-weight: 600; border-bottom: 2px solid var(--tk-gold); padding-bottom: 5px; }
.tk-nav-locked { font: 500 15px/1 var(--tk-font-display); color: #b8a98a; cursor: default; }
.tk-nav-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tk-menu-header { padding: 11px 16px 7px; font: 600 10px/1 var(--tk-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tk-gold-dark); background: var(--tk-parchment-warm); border-bottom: 1.5px solid #e4d6b2; }
.tk-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; text-decoration: none; }
.tk-menu-item:hover, .tk-menu-item.current { background: #f1e6c8; }
.tk-menu-row { display: block; padding: 10px 16px; font: 500 14px/1 var(--tk-font-ui); color: var(--tk-ink-soft); text-decoration: none; }
.tk-menu-row:hover { background: #f1e6c8; }
.tk-menu-divider { height: 1px; background: #e4d6b2; margin: 5px 0; }
.tk-drawer-link { display: block; font: 500 15px/1 var(--tk-font-display); color: var(--tk-ink-soft); padding: 12px 6px; text-decoration: none; }
.tk-drawer-link.active { border-left: 3px solid var(--tk-gold); background: var(--tk-parchment-light); }
.tk-drawer-row { display: block; font: 500 15px/1 var(--tk-font-ui); color: var(--tk-ink-soft); padding: 10px 6px; text-decoration: none; }
.tk-drawer-label { font: 600 10px/1 var(--tk-font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tk-gold-dark); padding: 16px 6px 8px; }

/* ── Typography ──────────────────────────────────────────────── */
.tk-kicker { font: 600 11px/1 var(--tk-font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--tk-gold-dark); }
.tk-subtitle { font: italic 400 16px/1.3 var(--tk-font-body); color: var(--tk-brown); }

/* Nav search pill (was a form_with style: attr that Rails silently dropped) */
.tk-nav-search { background: #fbf5e3; border: 1.5px solid #cba46a; width: 210px; }