/* Muffadal Saylawala: shared component styles. Every color, size and shadow reads a token. */
:root {
  /* Motion: snappy and settled. Exponential ease-out; nothing bounces. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 160ms;   /* hover, press, focus */
  --dur-settle: 280ms;  /* panels, glass, cards lifting */
  --dur-reveal: 640ms;  /* one entrance per page: the seed field, a hero line */
  --glass-seed: rgba(247, 238, 233, 0.88);
  --glass-night: rgba(15, 44, 34, 0.84);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-quick: 0ms; --dur-settle: 0ms; --dur-reveal: 0ms; } }

html, body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
.ms, .ms * { box-sizing: border-box; }
.ms { background: var(--surface); color: var(--ink); }
.ms ::selection { background: var(--marigold-field); color: var(--on-marigold); }
.ms-serif { font-family: var(--font-display); }
.ms-fig { font-family: var(--font-figures); font-variation-settings: "wdth" 87; font-variant-numeric: tabular-nums; }
.ms-muted { color: var(--ink-muted); }

/* Shared mark and icons: the element sizes them, MS fills them */
[data-ms-mark], [data-ms-icon] { display: inline-block; width: 1.35em; height: 1.35em; flex: none; vertical-align: middle; }
[data-ms-mark] svg, [data-ms-icon] svg { display: block; width: 100%; height: 100%; }
[data-ms-icon] { width: 24px; height: 24px; }

/* Nameplate: mark + full name */
.ms-nameplate { display: inline-flex; align-items: center; gap: 0.55em; font: 700 18px/1 var(--font-text); color: var(--ink); }
.ms-nameplate [data-ms-mark] { color: var(--indigo); }

/* Golden split */
.ms-split { display: grid; grid-template-columns: 61.8fr 38.2fr; }
.ms-split-rev { display: grid; grid-template-columns: 38.2fr 61.8fr; }

/* The dot and the rule, the only ornaments */
.ms-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--marigold); }
.ms-rule { display: block; height: 6px; background: var(--indigo); width: 61.8%; }
.ms-hair { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Elevation: paper objects only */
.ms-paper { background: var(--surface); box-shadow: var(--shadow-paper); }
.ms-lift { transition: transform var(--dur-settle) var(--ease-out), box-shadow var(--dur-settle) var(--ease-out); }
.ms-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Glass: frosted panels over photographs and patterns, never over plain paper */
.ms-glass { background: var(--glass-seed); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: var(--shadow-lift); color: var(--night-ink); }
.ms-glass.night { background: var(--glass-night); border-color: rgba(243, 237, 228, 0.16); color: var(--cotton); }

/* Links, buttons, focus */
.ms a, a.ms-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--indigo); transition: text-decoration-thickness var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.ms a:hover, a.ms-link:hover { text-decoration-thickness: 2px; color: var(--indigo); }
.ms :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ms-btn { font: 600 15px/1 var(--font-text); padding: 13px 21px; border: 1.5px solid var(--indigo); background: var(--indigo); color: var(--surface); border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); }
.ms-btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.ms-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn[disabled] { background: transparent; color: var(--ink); border-color: var(--ink); opacity: .4; cursor: not-allowed; }

/* Image frame */
.ms-frame { margin: 0; }
.ms-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-frame figcaption { font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); margin-top: 13px; }
.ms-frame figcaption b { color: var(--ink); font-weight: 600; }

/* Ledger table */
.ms-ledger { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--font-text); }
.ms-ledger th { text-align: left; font: 600 14px var(--font-text); padding: 8px 13px 8px 0; border-bottom: 1.5px solid var(--ink); }
.ms-ledger td { padding: 13px 13px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ms-ledger td.k { font-family: var(--font-figures); font-variation-settings: "wdth" 87; font-size: 13px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-ledger td b { font-family: var(--font-display); font-weight: 700; }

/* Status tag: word plus shape, never color alone */
.ms-tag { display: inline-flex; gap: 6px; align-items: center; font: 600 12.5px var(--font-text); padding: 4px 8px; border: 1px solid var(--line-strong); color: var(--ink-muted); }
.ms-tag::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; }
.ms-tag.real::before { background: currentColor; }

/* Entrances: one per page, from a visible resting state */
@keyframes ms-rise { from { transform: translateY(13px); opacity: 0.001; } to { transform: none; opacity: 1; } }
.ms-rise { animation: ms-rise var(--dur-reveal) var(--ease-out) both; }

/* Fixed-size canvases (social, deck, print) scaled to the card */
.ms-stage { position: relative; overflow: hidden; width: 100%; }
.ms-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; }
canvas.ms-seed { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ms-pattern { background-repeat: repeat; }