/* Echo's app. Colours, type and spacing are Mainframe's (--citadl-*), from
   citadl-tokens.css; nothing here is a colour of its own. */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:var(--citadl-font-size-body-large,15px)/1.46 var(--citadl-font-sans,system-ui,sans-serif);
  background:hsl(var(--citadl-background));color:hsl(var(--citadl-foreground));-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:hsl(var(--citadl-accent))}
:focus-visible{outline:2px solid hsl(var(--citadl-accent));outline-offset:1px}
.boot{padding:40px;color:hsl(var(--citadl-muted-foreground))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- sign in ---- */
.signin{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:min(420px,100%);border:1px solid hsl(var(--citadl-border));border-radius:var(--citadl-radius-control);padding:28px;background:hsl(var(--citadl-muted))}
.brand{font-family:var(--citadl-font-display);letter-spacing:var(--citadl-letter-spacing-display);text-transform:uppercase;font-size:22px;margin:0 0 4px}
.card p{color:hsl(var(--citadl-muted-foreground));margin:0 0 18px}
.card label{display:block;font-size:var(--citadl-font-size-label);letter-spacing:var(--citadl-letter-spacing-label);text-transform:uppercase;color:hsl(var(--citadl-muted-foreground));margin-bottom:6px}
.card input{width:100%;font:inherit;padding:10px 12px;background:hsl(var(--citadl-background));color:inherit;border:1px solid hsl(var(--citadl-border));border-radius:var(--citadl-radius-control)}
.btn{background:hsl(var(--citadl-accent));color:#000;border:0;border-radius:var(--citadl-radius-control);padding:9px 16px;font-weight:600}
.btn.ghost{background:transparent;color:inherit;border:1px solid hsl(var(--citadl-border))}
.card .btn{margin-top:14px;width:100%}
.oneid{font-family:var(--citadl-font-display);letter-spacing:var(--citadl-letter-spacing-display);text-transform:uppercase;font-size:var(--citadl-font-size-label);color:hsl(var(--citadl-muted-foreground));margin-bottom:14px}
.oneid b{color:hsl(var(--citadl-accent));font-size:15px;letter-spacing:.12em}
.card .fine{font-size:12px;margin:14px 0 0}
.persona{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.persona .btn{margin:0;text-align:left}
.err{color:hsl(var(--citadl-destructive));margin-top:12px;min-height:1.2em}

/* ---- the app ---- */
.shell{display:grid;grid-template-columns:272px minmax(0,1fr);height:100dvh}
.shell.thread{grid-template-columns:272px minmax(0,1fr) 400px}
.side{background:hsl(var(--citadl-muted));border-right:1px solid hsl(var(--citadl-border));display:flex;flex-direction:column;min-height:0}
.ws{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid hsl(var(--citadl-border));font-weight:700}
.ws button{background:none;border:0;font-weight:700;text-align:left;padding:0;display:flex;gap:6px;align-items:center;min-width:0}
.ws .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{overflow:auto;flex:1;padding:8px 0}
.nav .group{padding:6px 14px 2px;display:flex;justify-content:space-between;align-items:center;color:hsl(var(--citadl-muted-foreground));font-size:var(--citadl-font-size-label);letter-spacing:var(--citadl-letter-spacing-label);text-transform:uppercase}
.nav .group button{background:none;border:0;color:inherit;padding:0 4px;font-size:16px}
.item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:0;padding:5px 14px;color:hsl(var(--citadl-muted-foreground));min-height:30px}
.item:hover{background:hsl(var(--citadl-border) / .5);color:hsl(var(--citadl-foreground))}
.item.on{background:hsl(var(--citadl-accent) / .18);color:hsl(var(--citadl-foreground))}
.item.unread{color:hsl(var(--citadl-foreground));font-weight:700}
.item .hash{width:1.1em;text-align:center;opacity:.7}
.item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{background:hsl(var(--citadl-accent));color:#000;border-radius:99px;min-width:20px;padding:0 6px;font-size:12px;font-weight:700;text-align:center}
.me{border-top:1px solid hsl(var(--citadl-border));padding:10px 14px;display:flex;gap:10px;align-items:center}
.av{width:36px;height:36px;border-radius:4px;display:grid;place-items:center;font-weight:700;background:hsl(var(--citadl-border));text-transform:uppercase;flex:none}
.av.sm{width:26px;height:26px;font-size:12px}
.me .who{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me small{display:block;color:hsl(var(--citadl-muted-foreground))}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid hsl(var(--citadl-border))}
.top .burger{display:none;background:none;border:0;font-size:20px}
.search{flex:1;max-width:560px;margin:0 auto}
.search input{width:100%;font:inherit;padding:7px 12px;background:hsl(var(--citadl-muted));color:inherit;border:1px solid hsl(var(--citadl-border));border-radius:var(--citadl-radius-control)}
.chhead{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid hsl(var(--citadl-border))}
.chhead h1{font-size:18px;margin:0;font-weight:700}
.chhead .topic{color:hsl(var(--citadl-muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chhead .tools{display:flex;gap:6px}
.pill{background:transparent;border:1px solid hsl(var(--citadl-border));border-radius:99px;padding:3px 12px;font-size:13px;color:hsl(var(--citadl-muted-foreground))}
.pill:hover{color:hsl(var(--citadl-foreground))}

.list{flex:1;overflow:auto;padding:12px 0;min-height:0}
.day{display:flex;align-items:center;gap:12px;margin:14px 20px 6px;color:hsl(var(--citadl-muted-foreground));font-size:13px;font-weight:600}
.day::before,.day::after{content:"";flex:1;border-top:1px solid hsl(var(--citadl-border))}
.newline{display:flex;align-items:center;gap:10px;margin:10px 20px;color:hsl(var(--citadl-accent));font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.newline::before{content:"";flex:1;border-top:1px solid hsl(var(--citadl-accent))}
.msg{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:4px 20px}
.msg.cont{padding-top:0}
.msg.cont .av{visibility:hidden;height:0}
.msg:hover{background:hsl(var(--citadl-muted) / .6)}
.msg.flash{background:hsl(var(--citadl-accent) / .15)}
.msg header{display:flex;gap:8px;align-items:baseline}
.msg .who{font-weight:700}
.msg time,.msg .edited{color:hsl(var(--citadl-muted-foreground));font-size:12px}
.msg .body{overflow-wrap:anywhere}
.body p{margin:.15em 0}
.body pre{overflow:auto;background:hsl(var(--citadl-muted));border:1px solid hsl(var(--citadl-border));padding:8px;border-radius:var(--citadl-radius-control)}
.body code{font-family:var(--citadl-font-mono);font-size:.92em}
.body :not(pre)>code{background:hsl(var(--citadl-muted));padding:1px 4px;border-radius:3px}
.body blockquote{margin:.3em 0;padding-left:10px;border-left:3px solid hsl(var(--citadl-border));color:hsl(var(--citadl-muted-foreground))}
.body table{border-collapse:collapse;margin:.3em 0}.body td,.body th{border:1px solid hsl(var(--citadl-border));padding:3px 8px}
.body img{max-width:100%}
.files img{display:block;max-width:min(360px,100%);max-height:260px;margin-top:6px;border-radius:6px;border:1px solid hsl(var(--citadl-border))}
.files a.file{display:inline-block;margin-top:6px;padding:4px 10px;border:1px solid hsl(var(--citadl-border));border-radius:6px}
.rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
.chip{border:1px solid hsl(var(--citadl-border));background:hsl(var(--citadl-muted));border-radius:99px;padding:1px 9px;font-size:13px}
.chip.mine{border-color:hsl(var(--citadl-accent));background:hsl(var(--citadl-accent) / .15)}
.threadlink{background:none;border:0;padding:2px 0;color:hsl(var(--citadl-accent));font-size:13px;font-weight:600}
.tb{position:absolute;right:20px;top:-14px;display:none;background:hsl(var(--citadl-background));border:1px solid hsl(var(--citadl-border));border-radius:6px;padding:2px}
.msg:hover .tb,.msg:focus-within .tb{display:flex}
.tb button{background:none;border:0;padding:3px 7px;border-radius:4px;font-size:15px}
.tb button:hover{background:hsl(var(--citadl-muted))}
.picker{position:absolute;right:20px;top:14px;z-index:5;background:hsl(var(--citadl-background));border:1px solid hsl(var(--citadl-border));border-radius:8px;padding:4px;display:flex;gap:2px}
.picker button{background:none;border:0;font-size:20px;padding:4px 6px;border-radius:4px}
.picker button:hover{background:hsl(var(--citadl-muted))}
.editbox{width:100%;font:inherit;color:inherit;background:hsl(var(--citadl-background));border:1px solid hsl(var(--citadl-border));border-radius:var(--citadl-radius-control);padding:8px}
.empty{padding:40px 20px;color:hsl(var(--citadl-muted-foreground))}

.composer{padding:0 20px 18px;position:relative}
.box{border:1px solid hsl(var(--citadl-border));border-radius:8px;background:hsl(var(--citadl-muted))}
.box:focus-within{border-color:hsl(var(--citadl-accent))}
.box textarea{width:100%;font:inherit;color:inherit;background:transparent;border:0;resize:none;padding:10px 12px;min-height:44px;max-height:240px;outline:none}
.box .row{display:flex;justify-content:space-between;padding:4px 8px 6px}
.box .row button{background:none;border:0;padding:4px 8px;border-radius:4px}
.box .row .send{background:hsl(var(--citadl-accent));color:#000;font-weight:700}
.box .row .send[disabled]{opacity:.4}
.pending{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px 0}
.pending span{border:1px solid hsl(var(--citadl-border));border-radius:6px;padding:2px 8px;font-size:13px}
.ac{position:absolute;left:20px;bottom:76px;background:hsl(var(--citadl-background));border:1px solid hsl(var(--citadl-border));border-radius:8px;min-width:220px;z-index:6;overflow:hidden}
.ac button{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 12px}
.ac button.on{background:hsl(var(--citadl-accent) / .2)}
.hint{padding:4px 20px 8px;color:hsl(var(--citadl-muted-foreground));font-size:12px;min-height:1.4em}

.tpanel{border-left:1px solid hsl(var(--citadl-border));display:flex;flex-direction:column;min-height:0;min-width:0;background:hsl(var(--citadl-background))}
.tpanel .thead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid hsl(var(--citadl-border));font-weight:700}
.tpanel .thead button{background:none;border:0;font-size:18px}

.results h2,.page h2{font-size:18px;margin:16px 20px 8px}
.res{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid hsl(var(--citadl-border));padding:10px 20px}
.res:hover{background:hsl(var(--citadl-muted))}
.res small{color:hsl(var(--citadl-muted-foreground))}
mark{background:hsl(var(--citadl-accent) / .35);color:inherit;border-radius:2px}

.scrim{position:fixed;inset:0;background:rgb(0 0 0 / .55);display:grid;place-items:center;z-index:20;padding:16px}
.modal{width:min(520px,100%);max-height:86dvh;overflow:auto;background:hsl(var(--citadl-background));border:1px solid hsl(var(--citadl-border));border-radius:10px;padding:20px}
.modal h3{margin:0 0 12px}
.modal input[type=text],.modal textarea{width:100%;font:inherit;color:inherit;background:hsl(var(--citadl-muted));border:1px solid hsl(var(--citadl-border));border-radius:var(--citadl-radius-control);padding:8px 10px;margin:4px 0 10px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.rowi{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid hsl(var(--citadl-border))}
.rowi .grow{flex:1;min-width:0}
.rowi small{color:hsl(var(--citadl-muted-foreground));display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:hsl(var(--citadl-foreground));color:hsl(var(--citadl-background));padding:8px 16px;border-radius:99px;z-index:30}

@media (max-width:760px){
  .shell,.shell.thread{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 20% 0 0;z-index:15;transform:translateX(-102%);transition:transform .2s;width:80%;max-width:320px}
  .shell.nav-open .side{transform:none}
  .shell.nav-open::after{content:"";position:fixed;inset:0 0 0 80%;background:rgb(0 0 0 / .5);z-index:14}
  .top .burger{display:block;min-width:44px;min-height:44px}
  .shell.thread .main{display:none}
  .shell.thread .tpanel{display:flex;border-left:0}
  .tb{display:none;top:-18px;right:12px}
  .msg.active .tb{display:flex}
  .chhead{padding:8px 12px;gap:8px}.chhead .topic{display:none}.chhead h1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
  .chhead .tools{flex:none}
  .box textarea{font-size:16px}
  .item,.tb button,.chip,.pill{min-height:40px}
  .composer{padding:0 10px max(10px,env(safe-area-inset-bottom))}
  .msg{padding:4px 12px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* The shared CITADL gate (sign-in), in Mainframe terms: tokens only, the dark
 * ground (the .dark class on the gate re-declares the tokens), the display
 * face for words, mono only for the code's digits, the one 2px radius, and
 * destructive for a rejected sign-in. */
.gate{min-height:100vh;display:grid;place-items:center;padding:var(--citadl-space-section);background:hsl(var(--citadl-background));color:hsl(var(--citadl-foreground));font-family:var(--citadl-font-display)}
.gate-in{width:min(300px,100%);text-align:center}
.gate .mark{letter-spacing:var(--citadl-letter-spacing-display);text-transform:uppercase;font-size:var(--citadl-font-size-body-large);color:hsl(var(--citadl-muted-foreground))}
.gate .mark b{color:hsl(var(--citadl-accent));letter-spacing:var(--citadl-letter-spacing-display)}
.gate .prod{font-size:var(--citadl-font-size-label);letter-spacing:var(--citadl-letter-spacing-display);text-transform:uppercase;color:hsl(var(--citadl-muted-foreground));margin:var(--citadl-space-cell) 0 var(--citadl-space-page)}
.gate form{display:flex;border-bottom:var(--citadl-hairline) solid hsl(var(--citadl-border))}
.gate form[hidden]{display:none}
.gate form:focus-within{border-color:hsl(var(--citadl-accent))}
.gate input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:inherit;font:inherit;font-size:var(--citadl-font-size-body-large);letter-spacing:var(--citadl-letter-spacing-label);padding:var(--citadl-space-stack) var(--citadl-space-tight);text-align:center;border-radius:var(--citadl-radius-control)}
.gate input::placeholder{color:hsl(var(--citadl-muted-foreground))}
.gate #cd{font-family:var(--citadl-font-mono);letter-spacing:.4em}
.gate .go{background:none;border:0;color:hsl(var(--citadl-muted-foreground));font:inherit;font-size:var(--citadl-font-size-title);cursor:pointer;padding:0 var(--citadl-space-cell);border-radius:var(--citadl-radius-control)}
.gate .go:hover,.gate .go:focus-visible{color:hsl(var(--citadl-accent));outline:0}
.gate .err{color:hsl(var(--citadl-destructive));margin-top:var(--citadl-space-panel);min-height:1.2em;font-size:var(--citadl-font-size-label);letter-spacing:var(--citadl-letter-spacing-display);text-transform:uppercase}