/* Ackren web application.

   The design system is Aleten's, as shipped. Every token below is transcribed
   from /Users/blade/Desktop/Aleten/public/assets/aleten.css, which the brand
   guidelines name as the single source of truth: where the guidelines and the
   stylesheet disagree, the stylesheet wins.

   The v0.1 draft system (cool blue-grey ink, monospace body, uppercase
   letterspaced buttons) is superseded and appears nowhere here.

   Rules that bind every screen in this file:
     radius 0 everywhere, no blur, no gradient, no translucency
     the only box-shadow permitted is 0 0 0 1px used as a hairline
     one focus ring: 2px accent, offset 3px
     body copy is the grotesque at 16px; mono is the label and data voice
     proof red touches layout at most once per page and is never a button,
       a hover, or a background
     never colour alone: every coloured state carries a glyph or a text label
     logical properties only, so right-to-left stays a configuration
*/

/* ══════════════════════════════════════════════════════════════
   Tokens
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#faf9f6;
  --bg-alt:#f2f0ea;
  --surface:#ffffff;
  --ink:#12110f;
  --ink-2:#3d3a35;
  --muted:#6f6b63;
  --line:#e2ded4;
  --line-strong:#cdc7b9;
  --accent:#c4562b;
  --accent-ink:#a5451f;
  --accent-wash:#f6e9e1;
  --proof:#a3282a;          /* reserved: failure states and stated limits only */
  --grain:.03;

  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --t:110ms;
  --e:linear;
  --snap:cubic-bezier(.2,0,0,1);

  --side:274px;
  --measure:72ch;
}
:root[data-theme="dark"]{
  --bg:#0e0d0c;
  --bg-alt:#161513;
  --surface:#171614;
  --ink:#f4f2ec;
  --ink-2:#d3cfc6;
  --muted:#9b968c;
  --line:#292724;
  --line-strong:#3a3733;
  --accent:#e8794c;
  --accent-ink:#f0906a;
  --accent-wash:#241a15;
  --proof:#e0645c;
  --grain:.05;
}

/* ══════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;
  min-block-size:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* Paper, not glass. The one sanctioned texture, at its exact parameters:
   fractalNoise, 140px tile, baseFrequency .85, multiply in light and screen
   in dark, at the threshold of visibility. */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen}

img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:200;
      background:var(--ink);color:var(--bg);padding:12px 18px}
.skip:focus{inset-inline-start:12px;inset-block-start:12px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════
   Shared type
   ══════════════════════════════════════════════════════════════ */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.eyebrow::before{content:"";inline-size:18px;block-size:1px;background:var(--accent);flex:none}

.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
       color:var(--muted)}
.lede{font-size:17px;line-height:1.6;color:var(--muted);max-inline-size:62ch}
.note{font-size:14px;line-height:1.55;color:var(--muted);max-inline-size:56ch}
.data{font-family:var(--mono);font-size:12px;color:var(--muted)}
.basis{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
       color:var(--muted)}
.serif{font-family:var(--serif)}

/* struck, never deleted: a superseded figure stays on the page */
.struck{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.struck s{color:var(--proof);text-decoration-line:line-through;
          text-decoration-color:var(--proof);text-decoration-thickness:1px}

/* The reserved limit rule. Once per view, never decorative. */
.limitbox{border-inline-start:2px solid var(--proof);padding:4px 0 4px 18px}
.limitbox h2,.limitbox h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-block-end:6px}
.limitbox p{font-size:14px;color:var(--ink-2);line-height:1.6;max-inline-size:64ch}
.limitbox p+p{margin-block-start:8px}

.chip{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
      padding:4px 8px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.chip-new{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}

/* ══════════════════════════════════════════════════════════════
   Buttons. Sentence case, weight 500, square. Primary is an ink fill that
   turns accent on hover; ghost is a strong hairline that turns ink.
   ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t) var(--e),border-color var(--t) var(--e),color var(--t) var(--e);
}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn:disabled{border-color:var(--line);background:var(--bg-alt);color:var(--muted);cursor:not-allowed}
.btn-primary:disabled{background:var(--bg-alt);color:var(--muted);border-color:var(--line)}
.btn-sm{padding:8px 14px;font-size:13.5px}

/* A quiet text action. Underline on hover only, never a colour swap to proof. */
.btn-text{font-size:14px;color:var(--ink-2);text-decoration:none;
          border-block-end:1px solid var(--line-strong);padding-block-end:1px;
          transition:color var(--t) var(--e),border-color var(--t) var(--e)}
.btn-text:hover{color:var(--accent);border-color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   Fields. Labels above, never a placeholder standing in for a label.
   ══════════════════════════════════════════════════════════════ */
.fld{display:flex;flex-direction:column;gap:6px;margin-block-end:16px}
.fld>label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.fld .hint{font-size:12.5px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{
  inline-size:100%;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:11px 12px;
  font-size:15px;
  font-family:inherit;
  transition:border-color var(--t) var(--e);
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-2)}
input[aria-invalid="true"]{border-color:var(--proof)}
textarea{resize:none;line-height:1.55}
select{appearance:none;padding-inline-end:32px;
       background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
       background-size:7px 1px,1px 7px;background-repeat:no-repeat;
       background-position:calc(100% - 16px) 55%,calc(100% - 13px) 55%}

fieldset{border:0;padding:0;margin:0}
legend{padding:0}
.radios{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block-start:8px}
.radios label,.checkline{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;
                         line-height:1.5;cursor:pointer}
.radios input,.checkline input{margin:3px 0 0;accent-color:var(--accent);flex:none}

/* Typed error and status states. Inline and persistent: a timed disappearance
   is incompatible with a disclosure obligation, so there are no toasts here. */
.err{font-size:13.5px;color:var(--proof);display:flex;gap:8px;align-items:flex-start;
     line-height:1.5}
.err::before{content:"⊣";font-family:var(--mono);flex:none}
.ok{font-size:13.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.ok::before{content:"⊢";font-family:var(--mono);color:var(--muted);flex:none}
[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════
   The mark
   ══════════════════════════════════════════════════════════════ */
.mark{inline-size:60px;block-size:48px;color:var(--ink)}
.mark rect{fill:currentColor}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark .wm{font-size:19px;font-weight:600;letter-spacing:-.03em}
.wordmark .mark{inline-size:30px;block-size:24px}

/* ══════════════════════════════════════════════════════════════
   Sign-in view
   ══════════════════════════════════════════════════════════════ */
.auth{min-block-size:100dvh;display:flex;flex-direction:column;align-items:center;
      justify-content:center;padding:48px 24px}
.auth-card{inline-size:100%;max-inline-size:400px}
.auth-card .mark{margin-block-end:24px}
.auth h1{font-size:26px;font-weight:600;letter-spacing:-.028em;margin-block-end:8px}
.auth .sub{font-size:14.5px;color:var(--muted);margin-block-end:28px;max-inline-size:46ch}
.auth form{margin-block-start:4px}
.auth .btn{inline-size:100%}
.auth .alt{margin-block-start:20px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}
.auth .authfoot{margin-block-start:40px;padding-block-start:20px;border-block-start:1px solid var(--line);
                display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font-size:13px;
                color:var(--muted)}

/* The language control sits in the sign-in footer, because someone who
   cannot read the page cannot reach the settings dialog behind it.
   Endonyms, never flags: a flag is a country, not a language. */
.langsel select{inline-size:auto;padding:6px 28px 6px 10px;font-size:13px;
                background-color:var(--bg);border-color:var(--line)}

/* "or" divider: a hairline with a mono label sitting in it */
.orline{display:flex;align-items:center;gap:14px;margin-block:20px;color:var(--muted)}
.orline::before,.orline::after{content:"";flex:1;block-size:1px;background:var(--line)}
.orline span{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}

/* Google mark sits at its own brand colours by permission; it is an external
   identity, not part of this palette. */
.gbtn{inline-size:100%;justify-content:center}
.gbtn svg{inline-size:17px;block-size:17px;flex:none}

/* ══════════════════════════════════════════════════════════════
   Application shell
   ══════════════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:var(--side) 1fr;block-size:100dvh;overflow:hidden}

.side{
  display:flex;flex-direction:column;min-block-size:0;
  background:var(--bg-alt);
  border-inline-end:1px solid var(--line);
}
.side-head{padding:16px;border-block-end:1px solid var(--line);display:flex;
           flex-direction:column;gap:14px}
.side-head .wordmark{color:var(--ink);text-decoration:none}
.side-scroll{flex:1;overflow-y:auto;min-block-size:0;padding:12px 0}
.side-foot{border-block-start:1px solid var(--line);padding:12px 16px;display:flex;
           flex-direction:column;gap:8px}
.side-foot .who{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.side-foot .acts{display:flex;flex-wrap:wrap;gap:6px 14px}
.buildline{font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow-wrap:anywhere}

.convgroup{padding-inline:16px;margin-block:14px 6px}
.conv{position:relative;display:flex;align-items:stretch}
.conv>a{
  flex:1;min-inline-size:0;display:block;padding:9px 16px;text-decoration:none;
  font-size:14px;line-height:1.4;color:var(--ink-2);
  transition:background var(--t) var(--e),color var(--t) var(--e);
}
.conv>a:hover{background:var(--surface);color:var(--ink)}
.conv>a[aria-current="page"]{background:var(--surface);color:var(--ink);
                             box-shadow:inset 2px 0 0 0 var(--accent)}
.conv .ct{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .cm{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
          text-transform:uppercase;color:var(--muted);margin-block-start:2px}
.conv .more{inline-size:36px;flex:none;color:var(--muted);font-size:15px;line-height:1}
.conv .more:hover{color:var(--ink)}
.conv .rename{margin:5px 12px;inline-size:calc(100% - 24px)}

.menu{position:absolute;inset-block-start:100%;inset-inline-end:8px;z-index:20;
      background:var(--surface);border:1px solid var(--line-strong);min-inline-size:170px;padding:4px 0}
.menu button{display:block;inline-size:100%;text-align:start;padding:9px 14px;font-size:14px}
.menu button:hover{background:var(--bg-alt)}

.empty{padding:16px;font-size:13.5px;color:var(--muted)}

/* ── thread ─────────────────────────────────────────────────── */
.thread{display:flex;flex-direction:column;min-block-size:0;min-inline-size:0;background:var(--bg)}
.threadbar{
  display:flex;align-items:center;gap:12px;padding:12px 24px;
  border-block-end:1px solid var(--line);min-block-size:56px;
}
.threadbar h1{font-size:15px;font-weight:600;letter-spacing:-.015em;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.threadbar .spacer{margin-inline-start:auto}
.side-toggle{display:none}

.turns{flex:1;overflow-y:auto;min-block-size:0;padding:28px 24px 8px;scroll-padding-block-end:24px}
.turns-inner{max-inline-size:var(--measure);margin-inline:auto}

/* The transcript reads as a record, not as a messaging app: rows separated by
   hairlines, the speaker named in the mono label voice. No bubbles, no
   avatars, no tails. */
.turn{padding-block:18px;border-block-start:1px solid var(--line)}
.turn:first-child{border-block-start:0}
.turn .who{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--muted);margin-block-end:6px}
.turn .said{font-size:16px;line-height:1.62;overflow-wrap:anywhere;white-space:pre-wrap}
.turn.you .said{color:var(--ink-2)}

/* Quoted spans are marked because those words are the person's own coming
   back. This is a safety property, not decoration: docs/safety.md section 1. */
.turn .said .q{background:var(--ink);color:var(--bg);padding-inline:4px}

.turn .meta{margin-block-start:8px;font-family:var(--mono);font-size:10.5px;
            letter-spacing:.06em;color:var(--muted);display:flex;flex-wrap:wrap;
            gap:4px 14px;align-items:baseline}
.turn .meta .flag{color:var(--proof)}
.turn .meta .led{color:var(--ink-2)}
.turn .pending{font-family:var(--mono);font-size:11px;color:var(--muted);margin-block-start:8px}
.turn .undelivered{margin-block-start:8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* A system notice: state reset, delivery failure, account state. Stays until
   the situation changes. */
.notice{border-inline-start:2px solid var(--proof);padding:8px 0 8px 16px;margin-block:16px;
        font-size:14px;color:var(--ink-2);line-height:1.55;max-inline-size:64ch}
.notice .nh{font-weight:600;color:var(--ink);display:block;margin-block-end:2px}

/* ── the thinking panel ─────────────────────────────────────── */
.think{margin-block-start:12px;border:1px solid var(--line)}
.think>summary{padding:8px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
               text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none;
               display:flex;align-items:center;gap:8px;background:var(--bg-alt)}
.think>summary::-webkit-details-marker{display:none}
.think>summary::before{content:"+";font-family:var(--mono);color:var(--accent)}
.think[open]>summary::before{content:"−"}
.think .body{padding:14px 16px;background:var(--surface);border-block-start:1px solid var(--line);
             font-size:14px;line-height:1.58}
.think h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
          color:var(--muted);margin-block:14px 6px;font-weight:400}
.think h4:first-child{margin-block-start:0}
.think ul{display:flex;flex-direction:column;gap:6px}
.think li{display:flex;gap:9px;align-items:flex-start}
.think .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
           border:1px solid var(--line-strong);color:var(--muted);padding:1px 6px;flex:none;
           margin-block-start:2px}
.think .st.rev{border-color:var(--proof);color:var(--proof)}
.think .st.flag{border-color:var(--proof);color:var(--proof)}
.think .gloss{color:var(--muted);font-size:13.5px}
.think pre{margin-block-start:8px;padding:12px;background:var(--bg-alt);border:1px solid var(--line);
           overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.6;
           white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:340px;overflow-y:auto}

/* ── composer ───────────────────────────────────────────────── */
.composer-wrap{border-block-start:1px solid var(--line);padding:16px 24px 20px;background:var(--bg)}
.composer-inner{max-inline-size:var(--measure);margin-inline:auto}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;max-block-size:180px;overflow-y:auto}
.composer .btn{flex:none}
.composer-note{margin-block-start:8px;font-size:12px;color:var(--muted);line-height:1.5}

/* ── first run ──────────────────────────────────────────────── */
.firstrun{max-inline-size:var(--measure);margin-inline:auto;padding-block:8px 20px}
.firstrun h2{font-size:22px;font-weight:600;letter-spacing:-.025em;margin-block-end:10px}
.firstrun .limitbox{margin-block-start:20px}
.channelpick{margin-block-start:24px;padding-block-start:20px;border-block-start:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════
   Dialogs
   ══════════════════════════════════════════════════════════════ */
dialog{
  border:1px solid var(--ink);border-radius:0;padding:0;
  background:var(--bg);color:var(--ink);
  inline-size:min(560px,calc(100vw - 32px));
  max-block-size:min(760px,calc(100dvh - 32px));
}
dialog::backdrop{background:rgb(18 17 15 / .42)}
:root[data-theme="dark"] dialog::backdrop{background:rgb(0 0 0 / .6)}
.dlg{display:flex;flex-direction:column;max-block-size:inherit}
.dlg-head{display:flex;align-items:center;gap:16px;padding:18px 24px;
          border-block-end:1px solid var(--line)}
.dlg-head h2{font-size:20px;font-weight:600;letter-spacing:-.025em}
.dlg-head .close{margin-inline-start:auto;inline-size:34px;block-size:34px;font-size:19px;
                 line-height:1;color:var(--muted)}
.dlg-head .close:hover{color:var(--ink)}
.dlg-body{overflow-y:auto;padding:4px 24px 24px}
.dlg-foot{border-block-start:1px solid var(--line);padding:16px 24px;display:flex;
          flex-wrap:wrap;gap:10px;justify-content:flex-end}

.sect{padding-block:22px;border-block-end:1px solid var(--line)}
.sect:last-child{border-block-end:0}
.sect-h{display:flex;align-items:baseline;gap:10px;margin-block-end:14px}
.sect-h .sig{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--bg);
             background:var(--ink);padding:2px 6px;flex:none}
.sect-h h3{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.13em;
           text-transform:uppercase}
.sect .row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;
           margin-block-end:14px}
.sect .row .fld{flex:1;min-inline-size:200px;margin-block-end:0}
.sect .why{font-size:13px;color:var(--muted);line-height:1.55;margin-block-start:6px;
           max-inline-size:60ch}
.kv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;margin-block-end:10px}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
       color:var(--muted);inline-size:100%}
.kv dd{margin:0;overflow-wrap:anywhere}
.secretbox{font-family:var(--mono);font-size:14px;letter-spacing:.08em;background:var(--bg-alt);
           border:1px solid var(--line);padding:12px;overflow-wrap:anywhere;user-select:all}

/* ══════════════════════════════════════════════════════════════
   Responsive: below 860px the sidebar is off-canvas.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{
    position:fixed;inset-block:0;inset-inline-start:0;z-index:60;inline-size:min(86vw,320px);
    transform:translateX(-100%);transition:transform 140ms var(--snap);
  }
  .side[data-open="true"]{transform:translateX(0)}
  .side-toggle{display:inline-flex}
  .scrim{position:fixed;inset:0;z-index:55;background:rgb(18 17 15 / .38)}
  .turns,.composer-wrap{padding-inline:16px}
}
@media (pointer:coarse){
  .btn{min-block-size:44px}
  .conv>a{padding-block:12px}
  .conv .more{inline-size:44px}
  .menu button{min-block-size:44px}
  .dlg-head .close{inline-size:44px;block-size:44px}
}

/* The assembled state is always the end state, so sequences are cancelled
   outright rather than shortened. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}

@media print{
  .side,.composer-wrap,.threadbar,.skip,dialog{display:none!important}
  body{background:#fff;color:#000}
  body::after{display:none}
  .app{display:block;block-size:auto;overflow:visible}
  .turns{overflow:visible;padding:0}
  /* inverted marking does not survive a printer; a border carries it instead */
  .turn .said .q{background:none;color:#000;border:1px solid #000;padding-inline:3px}
  .think{break-inside:avoid}
}