/* =========================================================
   app-ui.css — logged-in area, same design language as site.css
   Loaded after site.css. Assumes its :root variables.
   ========================================================= */

/* ---------- app shell ---------- */
.appmain{padding:2.75rem 0 5rem}
.appmain .wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}

.pagehead{margin-bottom:2.25rem}
.pagehead h1{
  font-family:"Newsreader",serif;font-weight:300;
  font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin:.5rem 0 .4rem;
}
.pagehead h1 em{font-style:italic;color:var(--orange)}
.pagehead p{color:var(--slate);max-width:var(--measure)}
.pagehead-row{display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.pagehead-row .grow{flex:1 1 20rem;min-width:0}

.backlink{
  display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1.4rem;
  text-decoration:none;color:var(--slate);font-size:.9rem;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.backlink:hover{color:var(--ink);border-bottom-color:var(--orange)}

/* ---------- welcome band ---------- */
.welcome{
  background:var(--ink);color:var(--paper);padding:2rem 2.1rem;
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem;
}
.welcome h2{
  font-family:"Newsreader",serif;font-weight:400;color:var(--white);
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:0 0 .3rem;letter-spacing:-.01em;
}
.welcome .meta{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8E9089;
}
.welcome .grow{flex:1 1 18rem;min-width:0}
.welcome .btn{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.welcome .btn:hover,.welcome .btn:focus-visible{background:var(--white);border-color:var(--white)}

/* ---------- stat tiles ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:2.5rem;
}
.stat{background:var(--white);padding:1.35rem 1.4rem 1.5rem}
.stat .k{
  font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);
}
.stat .v{
  font-family:"Newsreader",serif;font-weight:300;font-size:2.5rem;line-height:1;
  letter-spacing:-.02em;margin-top:.55rem;
}
.stat .v.sm{font-size:1.5rem;line-height:1.2;padding-top:.4rem}
.stat a{color:inherit;text-decoration:none}

/* ---------- generic card / panel ---------- */
.panel{background:var(--white);border:1px solid var(--rule);margin-bottom:1.6rem}
.panel-head{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--rule);
}
.panel-head h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.2rem;margin:0}
.panel-head .more{margin-left:auto;font-size:.86rem;color:var(--slate);text-decoration:none;border-bottom:1px solid transparent}
.panel-head .more:hover{color:var(--ink);border-bottom-color:var(--orange)}
.panel-body{padding:1.4rem}
.panel-body.flush{padding:0}

/* ---------- action cards ---------- */
.actions-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:2.5rem;
}
.action{
  background:var(--white);padding:1.5rem 1.4rem 1.6rem;text-decoration:none;color:inherit;
  display:block;transition:background .16s ease;
}
.action:hover,.action:focus-visible{background:#F7F7F5}
.action h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.18rem;margin:.5rem 0 .45rem}
.action p{font-size:.92rem;color:var(--slate)}
.action .go{
  display:inline-block;margin-top:.9rem;font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
}
.action.feature{background:var(--ink);color:var(--paper)}
.action.feature:hover{background:#1E2125}
.action.feature h3{color:var(--white)}
.action.feature p{color:#B9BBB6}

/* ---------- lists / rows ---------- */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;gap:1rem;padding:.95rem 1.4rem;border-top:1px solid var(--rule)}
.rows li:first-child{border-top:0}
.rows .t{font-weight:500;font-size:.95rem}
.rows .s{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:.2rem}
.rows .grow{flex:1 1 auto;min-width:0}
.rows a.t{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.rows a.t:hover{border-bottom-color:var(--orange)}

/* ---------- data table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th{
  text-align:left;font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  padding:.7rem 1.4rem;border-bottom:1px solid var(--rule);white-space:nowrap;
}
.tbl td{padding:.9rem 1.4rem;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#F7F7F5}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.tbl a:hover{border-bottom-color:var(--orange)}

/* ---------- badges ---------- */
.badge-tag{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .5rem;
  border:1px solid var(--rule);color:var(--slate);white-space:nowrap;
}
.badge-tag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.badge-tag.warn{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.badge-tag.ok{border-color:var(--ink);color:var(--ink)}

/* ---------- empty state ---------- */
.empty{padding:3.5rem 1.5rem;text-align:center;border:1px dashed var(--rule);background:var(--white)}
.empty h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.25rem;margin-bottom:.4rem}
.empty p{color:var(--slate);font-size:.94rem;max-width:26rem;margin:0 auto 1.3rem}

/* ---------- toolbar / filters ---------- */
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.6rem}
.toolbar .field{margin:0}
.toolbar .grow{flex:1 1 16rem;min-width:0}

/* ---------- button sizes ---------- */
.btn-sm{font-size:.82rem;padding:.5rem .9rem}
.btn-danger{background:#B3261E;border-color:#B3261E;color:var(--white)}
.btn-danger:hover,.btn-danger:focus-visible{background:#8C1D18;border-color:#8C1D18}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.btnrow .right{margin-left:auto}

/* ---------- preview frame (documents) ---------- */
.preview-frame{border:1px solid var(--rule);background:var(--white);overflow:hidden}
.preview-frame iframe{display:block;width:100%;border:0}
.preview-note{
  padding:2.5rem 1.5rem;text-align:center;background:var(--white);border:1px solid var(--rule);
}
.preview-note p{color:var(--slate);font-size:.93rem;margin-bottom:1.1rem}

/* ---------- chat (AI wills) ---------- */
.chat{border:1px solid var(--rule);background:var(--white);display:flex;flex-direction:column;height:min(70vh,42rem)}
.chat-log{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem}
.msg{max-width:min(46ch,80%);padding:.8rem 1rem;font-size:.95rem;line-height:1.6}
.msg.them{background:#F2F2EF;border-left:2px solid var(--rule);align-self:flex-start}
.msg.me{background:var(--ink);color:var(--paper);align-self:flex-end}
.msg .who{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.35rem;
}
.msg.me .who{color:#8E9089}
.chat-input{border-top:1px solid var(--rule);padding:1rem 1.2rem;display:flex;gap:.75rem;align-items:flex-end}
.chat-input textarea{
  flex:1;resize:none;border:1px solid var(--rule);background:var(--white);
  padding:.65rem .85rem;font:inherit;font-size:.95rem;max-height:9rem;overflow-y:auto;
}
.chat-input textarea:focus{outline:none;border-color:var(--orange)}

/* ---------- responsive ---------- */
@media(max-width:48rem){
  .welcome{padding:1.5rem 1.4rem}
  .tbl th,.tbl td{padding:.75rem .9rem}
  .rows li{padding:.85rem 1rem}
  .panel-head,.panel-body{padding-left:1rem;padding-right:1rem}
}

/* ---------- app masthead extras ---------- */
.masthead-wrap{display:flex;align-items:center;gap:2rem;height:76px}
.notifbell{position:relative;display:inline-block}
.notifdot{
  position:absolute;top:-.45rem;right:-.7rem;min-width:1.05rem;height:1.05rem;
  background:var(--orange);color:var(--ink);border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;line-height:1.05rem;
  text-align:center;padding:0 .25rem;
}
.notifdot[hidden]{display:none}

.usermenu{position:relative}
.usermenu-trigger{display:inline-flex;align-items:center;gap:.35rem}
.usermenu-panel{
  position:absolute;right:0;top:calc(100% + .6rem);z-index:60;min-width:11rem;
  background:var(--white);border:1px solid var(--rule);
  box-shadow:0 8px 28px rgba(21,23,26,.10);
}
.usermenu-panel a,.usermenu-panel button{
  display:block;width:100%;text-align:left;padding:.6rem .9rem;font:inherit;font-size:.9rem;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
}
.usermenu-panel a:hover,.usermenu-panel button:hover{background:#F7F7F5}
.usermenu-panel button.danger{color:#B3261E;border-top:1px solid var(--rule)}
[x-cloak]{display:none !important}
.hidden{display:none}

/* header slot (legacy pages that pass a header) */
.apphead-slot{border-bottom:1px solid var(--rule);background:var(--white);padding:1.6rem 0}
.apphead-slot > *{max-width:72rem;margin:0 auto;padding:0 1.5rem}

/* ---------- app footer ---------- */
.appfoot{border-top:1px solid var(--rule);padding:2.5rem 0 3rem;margin-top:4rem}
.appfoot .wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.appfoot .brand{display:inline-flex;align-items:flex-end;gap:.6rem;text-decoration:none;margin-bottom:.9rem}
.appfoot .regs{font-size:.8rem;color:var(--slate);max-width:46rem;line-height:1.6}
.appfoot .footlinks{margin-top:1rem;display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.86rem}
.appfoot .footlinks a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.appfoot .footlinks a:hover{color:var(--ink);border-bottom-color:var(--orange)}

@media(max-width:60rem){
  .masthead-wrap{height:auto;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem;gap:1rem}
  .masthead-wrap .nav{order:3;width:100%;gap:1.1rem;flex-wrap:wrap;font-size:.88rem}
  .brandblock{margin-right:auto}
  .powered{display:none}
}

/* ---------- dropzone ---------- */
.dropzone{border:1px dashed var(--rule);background:var(--white);padding:2.25rem 1.5rem;text-align:center;transition:border-color .16s ease,background .16s ease}
.dropzone.over{border-color:var(--orange);background:#FBF6F2}
.dz-label{display:block;cursor:pointer;font-size:.95rem;color:var(--slate);text-transform:none;letter-spacing:0;margin:0}
.dz-label strong{color:var(--orange);font-weight:500}
.dz-hint{display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:.5rem}
.dz-file{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.93rem;font-weight:500}

/* ---------- chips (category filter) ---------- */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;
  background:var(--white);border:1px solid var(--rule);text-decoration:none;color:var(--slate);
  font-size:.88rem;white-space:nowrap;transition:background .16s ease,color .16s ease;
}
.chip:hover{color:var(--ink);border-color:var(--slate)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .ct{font-family:"IBM Plex Mono",monospace;font-size:.66rem;opacity:.7}

/* ---------- slide-over panel ---------- */
.slideover{position:fixed;inset:0;z-index:70}
.slideover-scrim{position:absolute;inset:0;background:rgba(21,23,26,.45)}
.slideover-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(30rem,100%);
  background:var(--paper);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(21,23,26,.14);
}
.slideover-head{
  display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;
  border-bottom:1px solid var(--rule);background:var(--paper);
}
.slideover-head h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.25rem;margin:0;flex:1}
.slideover-form{display:flex;flex-direction:column;flex:1;min-height:0}
.slideover-body{flex:1;overflow-y:auto;padding:1.4rem 1.5rem}
.slideover-foot{
  display:flex;gap:.7rem;padding:1.1rem 1.5rem;border-top:1px solid var(--rule);background:var(--paper);
}
.slideover-foot .btn{flex:1;text-align:center;cursor:pointer;font:inherit;font-size:.92rem}

/* ---------- modal ---------- */
.modalwrap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.modalbox{
  position:relative;background:var(--paper);border:1px solid var(--rule);
  width:min(26rem,100%);padding:1.6rem 1.7rem 1.7rem;box-shadow:0 20px 60px rgba(21,23,26,.22);
}
.modalbox h3{font-family:"Newsreader",serif;font-weight:500;font-size:1.35rem;margin-bottom:1.2rem}

/* ---------- password strength meter ---------- */
.pwmeter{display:flex;gap:.25rem;margin-top:.6rem}
.pwbar{flex:1;height:2px;background:var(--rule);transition:background .18s ease}
.pwbar.lv1{background:#B3261E}
.pwbar.lv2{background:#C2600F}
.pwbar.lv3{background:var(--orange)}
.pwbar.lv4{background:#2E6B3E}

/* ---------- site detection hint ---------- */
.sitedetect{display:flex;align-items:center;gap:.55rem;margin:-.6rem 0 1.15rem;font-size:.82rem;color:var(--slate)}
.sitedetect.hidden{display:none}
.siteicon{
  display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;
  background:var(--orange);color:var(--ink);font-size:.72rem;font-weight:500;
}

/* ---------- icon picker ---------- */
.iconpick{display:flex;gap:.35rem;flex-wrap:wrap}
.iconbtn{
  width:2.4rem;height:2.4rem;border:1px solid var(--rule);background:var(--white);
  font-size:1.1rem;cursor:pointer;line-height:1;
}
.iconbtn:hover{border-color:var(--slate)}
.iconbtn.on{border-color:var(--orange);border-width:2px;background:#FBF6F2}

/* ---------- toast ---------- */
.toast{
  position:fixed;top:1.2rem;right:1.2rem;z-index:90;
  background:var(--ink);color:var(--paper);padding:.85rem 1.15rem;font-size:.9rem;
  box-shadow:0 10px 30px rgba(21,23,26,.2);
}

/* ---------- secret reveal (vault show) ---------- */
.secret{
  display:flex;align-items:center;gap:.75rem;background:#F2F2EF;
  border:1px solid var(--rule);padding:.7rem .9rem;
}
.secret code{
  flex:1;font-family:"IBM Plex Mono",monospace;font-size:.92rem;
  word-break:break-all;color:var(--ink);
}
.dl{margin:0}
.dl .row{display:flex;gap:1.5rem;padding:.85rem 0;border-top:1px solid var(--rule)}
.dl .row:first-child{border-top:0}
.dl dt{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);flex:0 0 9rem;padding-top:.3rem;
}
.dl dd{flex:1;min-width:0;font-size:.95rem}

@media(max-width:36rem){
  .dl .row{flex-direction:column;gap:.35rem}
  .dl dt{flex:none}
}

/* ---------- full-height bare layout (AI will chat) ---------- */
html.fullh,body.fullh{height:100%}
body.barebody{display:flex;flex-direction:column;min-height:100%}
.shrink0{flex:none}
.barmain{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.barflash{padding:.7rem 1.5rem;font-size:.9rem;background:var(--white);border-bottom:1px solid var(--rule);border-left:2px solid var(--orange)}
.barflash.err{border-left-color:#B3261E}

/* =========================================================
   AI will chat — scoped retheme.
   The Livewire component's markup and Alpine/wire bindings are
   left untouched; these rules only remap its Tailwind utility
   classes onto the design palette, scoped to .willchat.
   ========================================================= */
.willchat{font-family:"IBM Plex Sans",system-ui,sans-serif}

/* surfaces */
.willchat .bg-white{background:var(--white) !important}
.willchat .bg-gray-50,
.willchat .bg-stone-100{background:var(--paper) !important}
.willchat .bg-gray-900,
.willchat .bg-gray-950\/80{background:var(--ink) !important}
.willchat .bg-orange-600{background:var(--orange) !important;color:var(--ink) !important}
.willchat .bg-orange-100,
.willchat .bg-orange-50{background:#FBF1EA !important}
.willchat .bg-green-600,
.willchat .bg-green-500{background:#2E6B3E !important}
.willchat .bg-yellow-50{background:#FBF6E9 !important}
.willchat .bg-gray-200,
.willchat .bg-gray-300,
.willchat .bg-gray-400{background:var(--rule) !important}
.willchat .bg-blue-400,
.willchat .bg-blue-500{background:var(--orange) !important}

/* borders */
.willchat .border-gray-200,
.willchat .border-gray-100,
.willchat .border-stone-200{border-color:var(--rule) !important}
.willchat .border-orange-100{border-color:#E9D6C6 !important}
.willchat .border-yellow-200{border-color:#E5D9B6 !important}

/* text */
.willchat .text-gray-900,
.willchat .text-gray-800{color:var(--ink) !important}
.willchat .text-gray-700,
.willchat .text-gray-600,
.willchat .text-gray-500,
.willchat .text-gray-400,
.willchat .text-gray-300{color:var(--slate) !important}
.willchat .text-orange-600,
.willchat .text-orange-700,
.willchat .text-orange-400{color:var(--orange) !important}
.willchat .text-yellow-800,
.willchat .text-yellow-700,
.willchat .text-yellow-600{color:#7A6320 !important}
.willchat .text-green-500{color:#2E6B3E !important}

/* squared corners + flatter surfaces, matching the rest of the app */
.willchat .rounded-lg,
.willchat .rounded-xl,
.willchat .rounded-2xl,
.willchat .rounded-md{border-radius:2px !important}
.willchat .shadow,
.willchat .shadow-md,
.willchat .shadow-lg,
.willchat .shadow-xl{box-shadow:none !important}

/* headings inside the chat pick up the serif */
.willchat h1,.willchat h2,.willchat h3{
  font-family:"Newsreader",serif;font-weight:500;letter-spacing:-.01em;
}

/* focus ring in brand orange */
.willchat .focus-within\:border-orange-400:focus-within{border-color:var(--orange) !important}
.willchat .focus-within\:ring-orange-400:focus-within{--tw-ring-color:var(--orange) !important}

/* =========================================================
   Fixes
   ========================================================= */

/* --- compact masthead for the logged-in area --- */
.masthead.compact .masthead-wrap{height:58px;gap:1.5rem}
.masthead.compact .brand .name{font-size:1.24rem}
.masthead.compact .brand .arcs{width:26px;height:15px}
.masthead.compact .powered{display:none}
.masthead.compact .nav{gap:1.35rem;font-size:.9rem}
.masthead.compact .account{font-size:.85rem;gap:.9rem;padding-left:1.1rem}
@media(max-width:60rem){
  .masthead.compact .masthead-wrap{height:auto;padding-top:.7rem;padding-bottom:.7rem}
}

/* --- AI will chat: size from the flex parent, not a hard-coded vh calc ---
   The component ships with h-[calc(100vh-4rem)], which assumes a 64px bar.
   Our masthead differs and a flash bar may also be present, so the fixed
   height overflowed the viewport: the composer fell below the fold and the
   last reply was clipped. Let it fill .barmain instead. --- */
.barmain > .willchat,
.willchat{
  height:auto !important;
  flex:1 1 auto;
  min-height:0;
  width:100%;
}

/* --- message bubbles: wrap long content instead of spilling --- */
.willchat .prose,
.willchat p,
.willchat li{overflow-wrap:anywhere;word-break:break-word}
.willchat .flex > div{min-width:0}

/* the scroll region must actually be allowed to shrink */
.willchat #chat-messages{flex:1 1 auto;min-height:0;overflow-y:auto}

/* --- preserve the composer's capsule <-> rounded-rectangle toggle ---
   The corner flattening above would have squared it in the multiline
   state only, breaking that behaviour. The composer is the element
   carrying the Alpine binding, so exempt it specifically. --- */
.willchat [x-data].rounded-2xl{border-radius:1rem !important}
.willchat [x-data].rounded-full{border-radius:9999px !important}

/* --- AI will chat: slimmer top bar ---
   Title and status were stacked with py-3, costing ~68px. Collapse them
   onto one baseline-aligned row and tighten the padding. --- */
.willchat .chattop{padding-top:.3rem !important;padding-bottom:.3rem !important}
.willchat .chattop div:has(> h1){
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.willchat .chattop div:has(> h1) > div{margin-top:0 !important}
.willchat .chattop h1{font-size:.88rem;line-height:1.3}
.willchat .chattop button{padding:.3rem !important}
.willchat .chattop svg{width:1.1rem;height:1.1rem}

/* Fallback for engines without :has() — keeps it tight even if unsupported */
@supports not selector(:has(*)){
  .willchat .chattop .mt-0\.5{margin-top:0 !important}
}