/* Vezir · The Seal. Brand layer shared by the case-study plates, the landing page and the product frames.
   Registry paper, ink, one vermilion press. Vermilion belongs only to authorisation. */
.seal {
  --paper: #EFF2F3; --fold: #DEE4E7; --ink: #16181D; --pencil: #8E9096; --seal: #DD3420;
  --graphite: #5B5F66;            /* body text on paper that must stay readable; a darker pencil */
  --serif: "ITC Garamond", Garamond, "Times New Roman", serif;
  --sans: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1);
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; font-feature-settings: "kern";
}
.seal *, .seal *::before, .seal *::after { box-sizing: border-box; }
.seal button { font: inherit; color: inherit; text-transform: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.seal button:focus:not(:focus-visible) { outline: 0; }
.seal input:focus-visible, .seal textarea:focus-visible { outline: 0; }

/* Type roles */
.seal .disp { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; font-style: normal; }
.seal .disp em, .seal em.sc { font-style: italic; }
.seal .lbl { font: 500 10px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.seal .lbl.ink { color: var(--ink); }
.seal .lbl.faint { color: var(--pencil); }   /* pale pencil only for incidental metadata: numbers, references */

/* Crowns. Two crowns, two meanings: crisp ink signs and the logo; the impression only where something was authorised. */
.seal .crown { display: inline-block; aspect-ratio: 82.9 / 67; line-height: 0; }
.seal .crown svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.seal .impr { position: relative; display: inline-block; aspect-ratio: 82.9 / 67; line-height: 0; pointer-events: none; }
.seal .impr svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal .impr .imp { mix-blend-mode: multiply; }
.seal .impr .ink { fill: var(--seal); transform-box: fill-box; transform-origin: 50% 50%; transition: fill .6s var(--out); }
.seal .impr .shadow { fill: var(--ink); opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
.seal .impr[data-state="pending"] .imp { opacity: 0; }
.seal .impr.drained .ink { fill: var(--pencil); }

/* Logo lockup */
.seal .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.seal .logo .crown { width: 22px; transform: translateY(-1px); }
.seal .logo b { font: 300 26px/1 var(--serif); letter-spacing: -.01em; }

/* Pills: filled, never outlined */
.seal .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: 0; white-space: nowrap; transition: background-color .25s var(--out), transform .25s var(--out); }
.seal .pill svg { width: 14px; height: 14px; flex: none; }
.seal .pill.ink { background: var(--ink); color: var(--paper); }
.seal .pill.ink:hover { background: #2A2D33; }
.seal .pill.fold { background: var(--fold); color: var(--ink); }
.seal .pill.fold:hover { background: #D1D9DD; }
.seal .pill.paper { background: var(--paper); color: var(--ink); }   /* the same pill on a fold ground */
.seal .pill.paper:hover { background: #fff; }
.seal .pill.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.seal .pill:active { transform: scale(.97); }

/* Mandate foot: who authorised, the scope, then the crown */
.seal .foot { display: flex; align-items: center; gap: 10px; font: 400 13px/20px var(--sans); color: var(--graphite); }
.seal .foot .crown { width: 16px; color: var(--ink); flex: none; }

/* Hold to approve: a ring of progress drawn as a fill (conic), never a stroke */
.seal .holdbtn { --p: 0; position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.seal .holdbtn .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ink) calc(var(--p) * 360deg), var(--fold) 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.seal .holdbtn .disc { position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .35s var(--out), background-color .25s var(--out); }
.seal .holdbtn .disc .crown { width: 42%; }
.seal .holdbtn:hover .disc { background: #2A2D33; }
.seal .holdbtn.down .disc { transform: scale(.92); transition-duration: .12s; }
.seal .holdbtn[disabled] { cursor: default; }

/* Execution status: separate from the approval */
.seal .status { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--fold); font: 500 12px/1 var(--sans); color: var(--ink); white-space: nowrap; position: relative; overflow: hidden; }
.seal .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--pencil); flex: none; }
.seal .status.live i { background: var(--ink); }
.seal .status.live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 1.3s linear infinite; }
.seal .status.done i { background: var(--ink); }
@keyframes sweep { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .seal .status.live::after { animation: none; display: none; }
  .seal .impr .ink { transition: none; }
}