/* chartit.nexuslanguages.com

   A tool, not a document. Two columns where there is room, one where there is not, and the
   only thing that moves is the light under the tab you took — the same behaviour as make.,
   because these are two rooms in one building.

   Every colour is the account's theme. This file names none of its own: everything painted
   is `color-mix` against a theme variable, and the single literal below is a specular
   highlight rather than a palette entry. That is a rule for the whole project, and
   tests/chartit.test.mjs asserts the literal count is exactly one. */

/* `hidden` has to win.

   The browser's own `[hidden]{display:none}` is a user-agent rule, so any author rule that
   sets `display` beats it on the cascade. Measured in scripts/chartit-proof.mjs: `.ci-gate`
   sets `display:grid` and `.ci-tabs` sets `display:flex`, so the tab row showed while the
   vault was locked and the passphrase card stayed on top of the app after it was unlocked.
   Both are hidden by setting `hidden` in chartit.js, and both ignored it. */
.ci-body [hidden]{display:none!important}

.ci-body{background:var(--bg);color:var(--text);margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}

/* --- glass ------------------------------------------------------------------------------
   Sticky, not fixed. Blur on fixed chrome re-composites the whole document every frame,
   which is the measurement written down in make.css: 60fps to 7. */
.ci-body .nx-glass{
  position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 74%,transparent),color-mix(in srgb,var(--panel-2) 56%,transparent));
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid color-mix(in srgb,var(--text) 9%,transparent);
  box-shadow:var(--nx-e3,0 12px 28px color-mix(in srgb,var(--text) 12%,transparent)),var(--nx-edge,0 0 0 1px color-mix(in srgb,var(--text) 5%,transparent)),
    inset 0 -1px 0 color-mix(in srgb,var(--text) 11%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent);
}
.ci-body .nx-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  /* The one literal in this file, and it is not a palette colour: a specular highlight on
     glass is white light, which is why public/make.css carries the same line. Everything
     that is actually *painted* comes from the account's theme variables. */
  background:linear-gradient(180deg,color-mix(in srgb,#fff 24%,transparent),transparent 38%);
  /* The mask is a mask, not a colour: the keyword below is read as "fully opaque" in the
     alpha channel and nothing is ever painted with it. */
  mask:linear-gradient(black,transparent 55%);opacity:.5;
}
html.theme-soft-dark .ci-body .nx-glass::before,html.theme-nocturne .ci-body .nx-glass::before,html.theme-pitch-black .ci-body .nx-glass::before{opacity:.28}

/* --- bar --------------------------------------------------------------------------------- */
.ci-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:9px 14px;border-width:0 0 1px}
.ci-bar .brand-mark{width:30px;height:30px;flex:0 0 30px;font-size:14px;border-radius:9px}
.ci-name{font-size:15px;font-weight:750;letter-spacing:-.02em;white-space:nowrap}
.ci-bar-end{display:flex;align-items:center;gap:7px;margin-left:auto}
.ci-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
.ci-icon:hover{color:var(--accent-text,var(--accent));border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* The lock state is chrome that has to be readable at a glance, so it is a dot plus a word
   rather than a dot alone — colour is never the only carrier of meaning in this project. */
.ci-lock{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}
.ci-lock-dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--danger) 82%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
.ci-lock.open .ci-lock-dot{background:color-mix(in srgb,var(--success) 82%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)}
.ci-lock:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* --- tabs -------------------------------------------------------------------------------- */
.ci-tabs{position:sticky;top:49px;z-index:39;display:flex;gap:2px;padding:0 10px;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.ci-tabs::-webkit-scrollbar{display:none}
.ci-tab{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:650;padding:10px 14px;border-radius:10px 10px 0 0;cursor:pointer;position:relative;white-space:nowrap;flex:0 0 auto}
.ci-tab:hover{color:var(--text)}
.ci-tab.active{color:var(--accent-text,var(--accent))}
.ci-tab.active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent-2) 55%,transparent);animation:ci-slide .5s cubic-bezier(.22,.61,.36,1)}
@keyframes ci-slide{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}

/* --- layout ------------------------------------------------------------------------------
   `margin:0` is load-bearing. styles.css gives every <main> `max-width:1600px;margin:0 auto`,
   and an auto margin on the cross axis of a column flex container cancels `stretch` — so the
   app shrank to its own content width. Measured at 1440px: #ci-main was 593px wide with
   424px of empty margin on each side, and the Security cards stacked in one narrow column in
   the middle of an empty window. */
.ci-main{flex:1;padding:14px 12px 60px;min-width:0;width:100%;max-width:none;margin:0;box-sizing:border-box}
.ci-panel{min-width:0}
.ci-split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px;align-items:start}
.ci-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;align-items:start}
.ci-card{border-radius:15px;padding:14px;display:grid;gap:10px;min-width:0}
.ci-card h2{margin:0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:750}
.ci-row{display:flex;gap:8px;flex-wrap:wrap;align-items:end;min-width:0}
.ci-grow{flex:1 1 130px;min-width:0}
.ci-grow2{flex:2 1 200px;min-width:0}
.ci-filters{margin-bottom:12px}

/* --- controls ---------------------------------------------------------------------------- */
.ci-field,.ci-field-label{display:grid;gap:4px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:750;min-width:0}
.ci-field>input,.ci-field>select,.ci-field>textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;letter-spacing:normal;text-transform:none;font-weight:400;
  color:var(--text);background:color-mix(in srgb,var(--panel) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:9px;padding:8px 10px;
}
.ci-field>textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6}
.ci-field>input:focus-visible,.ci-field>select:focus-visible,.ci-field>textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ci-search,.ci-select{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--text);background:color-mix(in srgb,var(--panel) 60%,transparent);border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:9px;padding:8px 10px;min-width:0}
.ci-btn{flex:0 0 auto;font:inherit;font-size:12.5px;font-weight:650;padding:8px 13px;border-radius:9px;cursor:pointer;white-space:nowrap;
  color:var(--text);background:transparent;border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.ci-btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent-text,var(--accent))}
.ci-btn.primary{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent-text,var(--accent))}
.ci-btn.danger:hover{border-color:color-mix(in srgb,var(--danger) 60%,transparent);color:var(--danger)}
/* Which of the two vaults this is, said once, at the top of the card that explains it. */
.ci-vault-kind{margin:0 0 8px;font-weight:700;color:var(--accent-text,var(--accent))}
.ci-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px}
.ci-toggle input{width:18px;height:18px;accent-color:var(--accent)}

/* --- the snippet list -------------------------------------------------------------------- */
.ci-list-side{display:grid;gap:8px;min-width:0}
.ci-list-head{display:flex;gap:8px;min-width:0}
.ci-count{margin:0;font-size:11.5px;color:var(--muted)}
.ci-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(70vh,620px);overflow:auto;min-width:0}
.ci-item{display:grid;gap:2px;width:100%;box-sizing:border-box;text-align:left;padding:9px 11px;border:1px solid color-mix(in srgb,var(--line) 50%,transparent);border-left-width:3px;border-radius:11px;background:transparent;color:var(--text);font:inherit;cursor:pointer;min-width:0}
.ci-item:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ci-item.on{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ci-item b{font-size:13px;font-weight:700;overflow-wrap:anywhere}
.ci-item .ci-abbr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--accent-text,var(--accent));overflow-wrap:anywhere}
.ci-item small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- the editor -------------------------------------------------------------------------- */
.ci-editor{border-radius:15px;padding:14px;display:grid;gap:10px;min-width:0}
.ci-tokens{display:flex;gap:6px;flex-wrap:wrap}
.ci-token{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;padding:5px 9px;border-radius:8px;cursor:pointer;
  color:var(--muted);background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.ci-token:hover{color:var(--accent-text,var(--accent));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ci-test{align-items:stretch}
.ci-test-out{flex:2 1 200px;display:grid;gap:4px;min-width:0}
.ci-test-out pre,.ci-preview pre{margin:0;padding:9px 10px;border-radius:9px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid color-mix(in srgb,var(--line) 45%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:340px;overflow:auto;min-height:44px}
.ci-actions{padding-top:2px}

/* --- templates ---------------------------------------------------------------------------- */
/* Packs. A pack states what it is once; the citation is behind a fold, because a
   bibliography under every abbreviation is what made this read as a reading list. */
.ci-pack{border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:16px;padding:14px 16px;display:grid;gap:9px}
.ci-pack header{display:grid;gap:2px}
.ci-pack header b{font-size:15.5px;letter-spacing:-.01em}
.ci-abbrs{margin:0;display:flex;flex-wrap:wrap;gap:5px}
.ci-abbrs .ci-abbr{font-size:12px;padding:2px 7px;border-radius:7px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.ci-abbrs .ci-abbr.have{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text,var(--accent))}
.ci-pack-end{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ci-pack-src summary{cursor:pointer;font-size:12px;color:var(--muted)}
.ci-pack-src p{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.ci-field-tick{flex-direction:row;align-items:center;gap:9px}
.ci-field-tick input{width:18px;height:18px;flex:none}
.ci-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;min-width:0}
.ci-tpl{display:grid;gap:5px;align-content:start;text-align:left;padding:11px 12px;border:1px solid color-mix(in srgb,var(--line) 50%,transparent);border-radius:12px;background:transparent;color:var(--text);font:inherit;cursor:pointer;min-width:0}
.ci-tpl:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ci-tpl b{font-size:13.5px;font-weight:700}
.ci-tpl .ci-abbr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--accent-text,var(--accent))}
.ci-tpl .ci-meta{font-size:11px;color:var(--muted)}
.ci-tpl .ci-src{font-size:10.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.ci-tpl.have{border-color:color-mix(in srgb,var(--success) 45%,transparent)}

/* --- fill ---------------------------------------------------------------------------------- */
.ci-fields{border-radius:15px;padding:14px;display:grid;gap:9px;max-height:min(70vh,620px);overflow:auto;min-width:0}
.ci-preview{border-radius:15px;padding:14px;min-width:0}

/* --- facts and status ---------------------------------------------------------------------- */
.ci-fact{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--muted);border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-left:10px}
.ci-facts{margin:0;padding-left:1.1em;display:grid;gap:7px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.ci-facts b{color:var(--text)}
.ci-status{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.ci-sites{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ci-sites li{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12.5px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:9px;min-width:0}
.ci-sites span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- the gate ------------------------------------------------------------------------------- */
.ci-gate{flex:1;display:grid;place-items:center;padding:28px 14px 60px}
.ci-gate-card{width:min(26rem,100%);box-sizing:border-box;border-radius:16px;padding:20px;display:grid;gap:12px}
.ci-gate-card h2{margin:0;font-size:17px;font-weight:750}
/* The sign-in is a link, because it goes somewhere; it should not look different from the
   button beside it for that reason alone. */
.ci-gate-card a.primary-button{display:block;text-align:center;text-decoration:none}
.ci-gate-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.ci-gate-note.bad{color:var(--danger)}

/* --- the palette ------------------------------------------------------------------------------ */
.ci-palette{width:min(34rem,92vw);box-sizing:border-box;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);padding:12px}
.ci-palette::backdrop{background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(3px)}
.ci-palette input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);background:transparent;color:var(--text)}
.ci-palette ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;max-height:52vh;overflow:auto}

/* The small shared pieces, which chartit.html does not inherit from study.css. */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:9px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;padding:10px 15px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;z-index:70;max-width:min(30rem,90vw);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- small screens ------------------------------------------------------------------------------
   Measured at 360 and 390 CSS pixels: scrollWidth - clientWidth must be 0. What broke it was
   the two-column grid, 300px of list beside the editor, so the grid collapses. */
@media(max-width:860px){
  .ci-split{grid-template-columns:minmax(0,1fr)}
  .ci-main{padding:12px 10px 44px}
  .ci-list{max-height:none}
  .ci-fields{max-height:none}
}
@media(prefers-reduced-motion:reduce){
  .ci-tab.active::after{animation:none}
}