/* Notice Period — shared tokens and components (concept demo) */
:root {
  --paper: #f3f4ee;
  --paper-2: #e9ebe2;
  --card: #ffffff;
  --ink: #131a33;
  --ink-2: #454c68;
  --ink-3: #666d88;
  --line: rgba(19, 26, 51, 0.12);
  --line-2: rgba(19, 26, 51, 0.07);
  --blue: #2440e6;
  --blue-deep: #1629a8;
  --blue-soft: #e3e8ff;
  --hi: #eef24b;
  --hi-soft: #f8f9c4;
  --stamp: #d93d27;
  --stamp-soft: #fde5df;
  --green: #0e7c59;
  --green-soft: #d9f2e6;
  --amber: #9a6200;
  --amber-soft: #fdecc4;

  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --typed: "Courier Prime", "Courier New", monospace;
  --hand: "Caveat", "Bradley Hand", cursive;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --shadow-1: 0 1px 2px rgba(19, 26, 51, 0.06), 0 2px 8px rgba(19, 26, 51, 0.05);
  --shadow-2: 0 2px 4px rgba(19, 26, 51, 0.05), 0 12px 32px -8px rgba(19, 26, 51, 0.16);
  --shadow-paper: 0 1px 1px rgba(19, 26, 51, 0.08), 0 18px 40px -18px rgba(19, 26, 51, 0.35);

  --note-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--hi); color: var(--ink); }

.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 12px;
  font-weight: 650; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 0 var(--blue-deep), 0 8px 20px -8px rgba(36, 64, 230, 0.7); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-soft { background: var(--blue-soft); color: var(--blue-deep); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #1c36d6; }
  .btn-ink:hover { background: #1e2748; }
  .btn-ghost:hover { background: rgba(19, 26, 51, 0.05); }
  .btn-soft:hover { background: #d5dcff; }
}

/* Highlighter stroke */
.hl { background: linear-gradient(transparent 12%, var(--hi) 12%, var(--hi) 88%, transparent 88%); padding: 0 0.12em; margin: 0 -0.12em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Rubber stamp */
.stamp {
  display: inline-block;
  font-family: var(--display); font-variation-settings: "wdth" 78; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.05; text-align: center;
  color: var(--stamp);
  border: 3px solid currentColor; border-radius: 8px;
  padding: 8px 14px 7px;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 100%);
          mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 100%);
}
.stamp small { display: block; font-size: 0.5em; letter-spacing: 0.1em; font-weight: 700; margin-top: 2px; }
.stamp.green { color: var(--green); }
.stamp.blue { color: var(--blue); }
.stamp.thunk { animation: thunk 420ms var(--ease-out) both; }
@keyframes thunk {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.9); }
  55% { opacity: 1; transform: rotate(-7deg) scale(0.96); }
  100% { opacity: 0.9; transform: rotate(-7deg) scale(1); }
}

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.bad { background: var(--stamp-soft); color: #a92a17; }
.chip.info { background: var(--blue-soft); color: var(--blue-deep); }
.chip.plain::before { display: none; }

.sample-tag { display: inline-block; font-size: 12px; font-weight: 650; color: var(--ink-2); background: var(--paper-2); border-radius: 6px; padding: 2px 8px; }

/* Fixed concept-demo note */
.demo-note {
  position: fixed; z-index: 90; left: 16px; bottom: 16px;
  font-size: 12px; line-height: 1.3; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px;
  box-shadow: var(--shadow-1);
}
.demo-note a { color: var(--ink); font-weight: 650; text-underline-offset: 2px; }
@media (max-width: 760px) {
  :root { --note-h: 26px; }
  .demo-note {
    left: 0; right: 0; top: 0; bottom: auto; height: var(--note-h);
    border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
    display: block; text-align: center; line-height: var(--note-h); overflow: hidden;
    font-size: 11px; padding: 0 8px; white-space: nowrap; box-shadow: none;
    background: rgba(243, 244, 238, 0.94);
  }
  body { padding-top: var(--note-h); }
}
html.embedded .demo-note { display: none; }
html.embedded { --note-h: 0px; }
html.embedded body { padding-top: 0; }

/* Toast */
.toast-wrap { position: fixed; z-index: 120; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast {
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 550; padding: 11px 16px; border-radius: 12px;
  box-shadow: var(--shadow-2); max-width: 420px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.toast.on { opacity: 1; transform: translateY(0); }

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