/* Ultri — shared tokens and components.
   Paper, ink, iron-gall blue for actions, editor's red only for markup. */
:root{
  --paper:#F6F6F3; --sheet:#FFFFFF; --ink:#15171C; --ink-2:#3A3D45; --graphite:#6B6E76; --faint:#9A9CA3;
  --rule:#E4E4DF; --rule-2:#D3D3CD; --wash:#EEEEE9;
  --blue:#1F3A93; --blue-ink:#FFFFFF; --blue-wash:#E7ECFA; --blue-deep:#162B70;
  --red:#C8352A; --red-wash:#FBE9E6; --green:#2E7D4F; --amber:#A86A12;
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:24px;
  --shadow-sheet:0 1px 0 rgba(21,23,28,.04),0 12px 32px -12px rgba(21,23,28,.16),0 2px 6px -2px rgba(21,23,28,.06);
  --shadow-pop:0 24px 64px -16px rgba(21,23,28,.28),0 4px 12px -4px rgba(21,23,28,.10);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111215; --sheet:#1A1B1F; --ink:#ECECE7; --ink-2:#C9CAC4; --graphite:#9A9CA2; --faint:#6E7077;
  --rule:#2A2B30; --rule-2:#383A40; --wash:#202126;
  --blue:#93A9FF; --blue-ink:#0E1430; --blue-wash:#1E2648; --blue-deep:#B9C7FF;
  --red:#FF7B6B; --red-wash:#3A1E1B; --green:#6CCB93; --amber:#E5AE55;
  --shadow-sheet:0 1px 0 rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-pop:0 24px 64px -16px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#111215; --sheet:#1A1B1F; --ink:#ECECE7; --ink-2:#C9CAC4; --graphite:#9A9CA2; --faint:#6E7077;
  --rule:#2A2B30; --rule-2:#383A40; --wash:#202126;
  --blue:#93A9FF; --blue-ink:#0E1430; --blue-wash:#1E2648; --blue-deep:#B9C7FF;
  --red:#FF7B6B; --red-wash:#3A1E1B; --green:#6CCB93; --amber:#E5AE55;
  --shadow-sheet:0 1px 0 rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-pop:0 24px 64px -16px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans)}
img,svg{display:block}
a{color:inherit}
::selection{background:var(--blue-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
button{font:inherit;color:inherit}
/* split .ins text into word spans so it can be written in, one word at a time */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- wordmark */
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.mark svg{width:22px;height:22px}
.mark span{font:500 23px/1 var(--serif);letter-spacing:-.01em;font-variation-settings:"opsz" 36}

/* ---------- buttons */
.btn{--h:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 18px;border-radius:999px;
  border:1px solid transparent;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--blue);color:var(--blue-ink)}
.btn-blue{background:var(--blue);color:var(--blue-ink)}
.btn-blue:hover{background:var(--blue-deep);color:var(--blue-ink)}
.btn-line{border-color:var(--rule-2);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-quiet{background:transparent;color:var(--graphite);padding:0 12px}
.btn-quiet:hover{color:var(--ink);background:var(--wash)}
.btn-lg{--h:52px;padding:0 26px;font-size:16px}
.btn-sm{--h:34px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- fields */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font:500 14px/1.2 var(--sans);color:var(--ink-2)}
.input{height:48px;padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r-m);background:var(--sheet);color:var(--ink);
  font:400 16px/1 var(--sans);transition:border-color .2s,box-shadow .2s;width:100%}
.input::placeholder{color:var(--faint)}
.input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
textarea.input{height:auto;padding:12px 14px;line-height:1.5;resize:vertical;min-height:96px}

/* ---------- segmented control (sliding pill) */
.seg{position:relative;display:inline-flex;padding:3px;border-radius:999px;background:var(--wash);gap:2px;flex-wrap:wrap}
.seg button{position:relative;z-index:1;height:32px;padding:0 14px;border:0;background:none;border-radius:999px;font-size:14px;color:var(--graphite);cursor:pointer;transition:color .2s}
.seg button.on{color:var(--ink)}
.seg .pill{position:absolute;z-index:0;top:3px;height:32px;border-radius:999px;background:var(--sheet);box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 1px var(--rule);transition:left .35s var(--ease-out),width .35s var(--ease-out)}

/* ---------- switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14.5px;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:40px;height:24px;border-radius:999px;background:var(--rule-2);position:relative;transition:background .25s;flex:none}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .3s var(--ease-out)}
.switch input:checked + .track{background:var(--blue)}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- markup (shared by the landing demo, auth panel and the app's change view) */
.strike{color:var(--graphite);background:linear-gradient(var(--red),var(--red)) no-repeat 0 50%/0% 2px;
  transition:background-size .6s var(--ease-out),color .4s var(--ease);-webkit-box-decoration-break:slice;box-decoration-break:slice}
.strike.on,.seen .strike{background-size:100% 2px;color:var(--faint)}
.ins{font-style:italic;color:var(--blue)}
.ins .w{display:inline-block;opacity:0;transform:translateY(.25em);filter:blur(3px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),filter .45s var(--ease-out)}
.ins.on .w,.seen .ins .w{opacity:1;transform:none;filter:none}

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