/* Inter, the XStudio face, served from the site so every machine shows the same thing. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
/* Colour tokens copied from XStudio's sxi-theme.css (common), light and dark. Radius stays 7px by decision. */
:root {
  color-scheme: light;
  --sxi-red: #EA1C2D;
  --sxi-red-hover: #C8121F;
  --sxi-red-solid: #EA1C2D;
  --btn-red: #B91C1C;
  --btn-red-hover: #991B1B;
  --surface: #FFFFFF;
  --surface-alt: #F9FAFB;
  --surface-muted: #F3F4F6;
  --page-bg: #F3F4F6;
  --ink: #0F1419;
  --ink-2: #2B3036;
  --text-body: #374151;
  --text-muted: #6B7280;
  --text-subtle: #9CA3AF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --ok: #059669;
  --warn: #D97706;
  --danger: #B91C1C;
  --info: #2563EB;
  --purple: #6D5BA6;
  --on-solid: #FFFFFF;
  --radius: 7px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  color-scheme: dark;
  --sxi-red: #FF4453;
  --sxi-red-hover: #FF6874;
  --sxi-red-solid: #EA1C2D;
  --surface: #23282E;
  --surface-alt: #2A3037;
  --surface-muted: #323941;
  --page-bg: #1B1F24;
  --ink: #F2F4F7;
  --ink-2: #DCE0E6;
  --text-body: #C4CAD2;
  --text-muted: #939AA4;
  --text-subtle: #6D747D;
  --border: #3A424B;
  --border-strong: #4B545F;
  --ok: #34D399;
  --warn: #FBBF24;
  --danger: #F87171;
  --info: #60A5FA;
  --purple: #A594D8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-ui); font-size: 14px; color: var(--text-body); background: var(--page-bg); }
/* The Toast UI stylesheet loads after this one and names its own faces; the editor follows the site font. */
body .toastui-editor-defaultUI, body .toastui-editor-tooltip, body .ProseMirror, body .toastui-editor-contents { font-family: var(--font-ui); }

.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login__card { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; }
.login__card h1 { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.login__card label { display: grid; gap: 4px; font-size: 13px; }
.login__card .field { padding: 8px 10px; }
.login__card .btn { padding: 8px; }
.login__error { margin: 0; color: var(--danger); font-size: 13px; }
.notice__text { margin: 0; font-size: 14px; color: var(--text-body); line-height: 1.5; }

.app { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.app__body { flex: 1; min-height: 0; display: flex; }
.pane { overflow: auto; }
.pane--left { width: 280px; flex: 0 0 auto; background: var(--surface); border-right: 1px solid var(--border); }
.pane--main { flex: 1; background: var(--page-bg); }
.pane__empty { margin: 0; padding: 16px; color: var(--text-muted); }
@media (max-width: 720px) { .pane--left { width: 200px; } }

.action { display: grid; gap: 6px; }
.action .field { width: 100%; }

.folder__list, .note__list { list-style: none; margin: 0; padding: 0; }
.folder__list--root, .note__list--root { padding: 8px 0; }
.folder > details > summary { display: flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer; color: var(--ink); font-weight: 600; }
.folder > details > summary::-webkit-details-marker { display: none; }
.folder__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.folder .folder__list, .folder .note__list { padding-left: 14px; }
.note { border-radius: var(--radius); }
.note:hover, .note--open { background: var(--surface-muted); }
.note .note__link { display: block; padding: 5px 12px 2px; color: var(--text-body); text-decoration: none; }
.note__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 6px; }
.note__title { display: block; }
.note__meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.tag { display: inline-block; padding: 0 6px; border-radius: var(--radius); background: var(--surface-alt); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }

.doc { margin: 0; padding: 24px; }
.doc__title { margin: 0 0 4px; font-size: 24px; color: var(--ink); }
.doc__meta { margin: 0 0 20px; font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* The reading view is the editor's content area without the editor: same classes, same rules. */
.doc__body { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.doc__body .toastui-editor-ww-container { min-height: 200px; }
.doc__body .toastui-editor-contents { padding: 18px 25px; }

.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-body); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--btn-red); border-color: var(--btn-red); color: var(--on-solid); }
.btn--primary:hover { background: var(--btn-red-hover); border-color: var(--btn-red-hover); }
.btn--danger { color: var(--danger); }
/* The text field look: every input and select that takes text carries .field. */
.field { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-body); font: inherit; }
.doc__head { display: flex; align-items: flex-start; gap: 12px; }
.doc__head .doc__title { flex: 1; }
.doc__buttons { display: flex; gap: 8px; align-items: center; }
.doc__buttons form { margin: 0; }
.doc--edit { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.doc__form { display: contents; }
.doc__title-input, .doc__tags-input { padding: 8px 10px; color: var(--ink); }
.doc__title-input { font-size: 20px; font-weight: 700; }
.doc__editor { position: relative; flex: 1; min-height: 0; background: var(--surface); border-radius: var(--radius); }
.doc__editor .toastui-editor-defaultUI { border-radius: var(--radius); }
.pane--main:has(.doc--edit) { display: flex; flex-direction: column; }
.pane--main:has(.doc--edit) .doc--edit { width: 100%; max-width: none; flex: 1; min-height: 0; }

.folder__edit .action { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.action__row { display: flex; gap: 6px; }
/* Buttons inside a form row are the compact size. */
.action__row .btn, .row .btn, .shares__add .btn, .addmenu__form .btn, .files__add .btn { padding: 6px 10px; }
.doc__fields { display: flex; gap: 8px; }
.doc__fields .doc__tags-input { flex: 1; }
.doc__folder-select { padding: 8px 10px; }

.pane__section { padding: 12px 12px 4px; border-top: 1px solid var(--border); margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.folder__shared { margin-left: 4px; font-size: 10px; font-weight: 400; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 5px; }
.action__label { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.shares__item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.shares__access { color: var(--text-muted); font-size: 12px; }
.shares__item form { margin-left: auto; }
.shares__remove { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.shares__remove:hover { color: var(--danger); }
.shares__add { display: flex; gap: 6px; margin-top: 4px; }
.shares__add .field { flex: 1; min-width: 0; }
.doc__share { margin: -12px 0 16px; font-size: 13px; }
.doc__share > summary { cursor: pointer; color: var(--info); }
.doc__share[open] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.doc__share[open] > summary { margin-bottom: 8px; }
.doc__share .shares__add { max-width: 420px; }
.stack { display: grid; gap: 6px; }

.page { flex: 1; overflow: auto; padding: 24px; max-width: 960px; width: 100%; margin: 0 auto; }
.page__title { margin: 0 0 16px; font-size: 22px; color: var(--ink); }
.page__error { margin: 0 0 12px; color: var(--danger); font-size: 13px; }
.page__ok { margin: 0 0 12px; color: var(--ok); font-size: 13px; }
.page label { display: grid; gap: 4px; font-size: 13px; }
.page .field { padding: 7px 10px; }
.row { display: flex; gap: 6px; align-items: center; }
.row--add { margin-bottom: 16px; flex-wrap: wrap; }

/* User menu, the shape of the dev-activities one: the name opens a panel with the account
   items, a rule, then Log out. */
.usermenu { position: relative; }
.usermenu__name { list-style: none; cursor: pointer; color: var(--text-body); padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.usermenu__name::-webkit-details-marker { display: none; }
.usermenu__name::after { content: "\25BE"; margin-left: 6px; color: var(--text-muted); font-size: 11px; }
.usermenu[open] .usermenu__name { background: var(--surface-muted); }
.usermenu__panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 6px; z-index: 20; display: grid; }
.usermenu__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text-body); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.usermenu__item:hover { background: var(--surface-muted); color: var(--ink); }
.usermenu__rule { margin: 6px 4px; border: 0; border-top: 1px solid var(--border); }
.usermenu__panel form { margin: 0; display: grid; }
.usermenu__logout { color: var(--danger); }

/* Light/dark slider, the shape of XStudio's Dark mode switch. */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { position: relative; flex: 0 0 auto; width: 32px; height: 18px; border-radius: 9px; background: var(--border-strong); transition: background .15s; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: left .15s; }
.switch input:checked + .switch__track { background: var(--btn-red); }
.switch input:checked + .switch__track::after { left: 16px; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--purple); outline-offset: 1px; }
.toastui-editor-toolbar-icons.sxinotes-underline { color: var(--ink-2); }
.toastui-editor-toolbar-icons.sxinotes-underline.active { color: var(--info); }
.toastui-editor-contents .codeblock pre, .toastui-editor-contents .codeblock__ace { margin: 0; padding: 0; background: none; }

/* Folder rows: the arrow folds the tree, the name opens the folder page, the pencil edits. */
.folder__arrow { flex: 0 0 10px; color: var(--text-muted); font-size: 11px; }
.folder__arrow::before { content: "\25B8"; }
.folder > details[open] > summary > .folder__arrow::before { content: "\25BE"; }
.folder__name { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.folder__name:hover { text-decoration: underline; }
.folder--open > details > summary { background: var(--surface-muted); border-radius: var(--radius); }
.pencil { margin-left: auto; flex: 0 0 auto; display: inline-flex; padding: 2px 4px; border: 0; border-radius: var(--radius); background: none; color: var(--text-subtle); cursor: pointer; }
.pencil:hover { color: var(--ink); background: var(--surface-muted); }
.folder__edit { position: fixed; z-index: 25; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); overflow: auto; margin: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); border-radius: var(--radius); }
.colour { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.colour input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.colour--none input[type=color] { opacity: .35; }
.colour__clear { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.colour__clear:hover { color: var(--danger); }
.pane__toprow { display: flex; align-items: center; margin: 8px 12px 0; min-height: 30px; }
.pane__top { flex: 1; padding: 5px 12px; border-radius: var(--radius); color: var(--ink); font-weight: 600; text-decoration: none; }
.pane__top:hover, .pane__top--on { background: var(--surface-muted); }
.note__dot, .doc__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.doc__dot { width: 12px; height: 12px; margin-right: 8px; }

/* Search box in the top bar. */
.search { margin-left: auto; }
.search .field { width: 240px; max-width: 40vw; padding: 5px 10px; }

/* Folder page: subfolders first, then the notes as a list or as cards. */
.doc--folder .doc__head { align-items: center; }
.doc--folder .doc__head .pencil { margin-left: 0; }
.doc__folder-edit { max-width: 420px; margin: 0 0 16px; }
.viewbar { display: flex; gap: 16px; margin: 0 0 16px; }
.viewbar__group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.viewbar__btn { padding: 5px 12px; font-size: 13px; color: var(--text-body); text-decoration: none; background: var(--surface); }
.viewbar__btn + .viewbar__btn { border-left: 1px solid var(--border); }
.viewbar__btn--on { background: var(--surface-muted); color: var(--ink); font-weight: 600; }
.sublist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.sublist a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 600; text-decoration: none; }
.sublist a:hover { background: var(--surface-muted); }
.sublist__count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ntable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ntable th, .ntable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.ntable th { color: var(--text-muted); font-weight: 600; }
.ntable tr:last-child td { border-bottom: 0; }
.ntable td a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ntable td a:hover { text-decoration: underline; }
.ntable__date { color: var(--text-muted); white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; min-height: 110px; }
.card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.card__head { padding: 6px 10px; font-size: 11px; color: var(--on-solid); background: var(--text-muted); }
.card__head--plain { background: var(--surface-muted); color: var(--text-muted); }
.card__body { padding: 10px; display: grid; gap: 6px; }
.card__title { font-weight: 600; color: var(--ink); }
.card__meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 4px; flex-wrap: wrap; }
.card--folder .card__title::before { content: "\25B8 "; color: var(--text-muted); }

/* Brand: the SXI logo at XStudio's 48px, dark variant under the dark theme, then the word Notes. */
.topbar__logo { width: 48px; height: auto; display: block; }
[data-theme="dark"] .topbar__logo { content: url("../img/sxi-logo-dark.png"); }
.topbar__title { font-size: 1.125rem; font-weight: 600; color: var(--ink); }

/* The + on a folder line opens a small popup: Note (straight into the editor) or Folder (name + colour). */
.plus { margin-left: auto; }
.plus + .pencil { margin-left: 0; }
.folder > details > summary, .pane__toprow { position: relative; }
.addmenu { position: absolute; right: 8px; top: calc(100% + 2px); z-index: 15; min-width: 150px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); display: grid; gap: 2px; font-weight: 400; }
.addmenu form { margin: 0; display: grid; }
.addmenu__item { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text-body); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.addmenu__item:hover { background: var(--surface-muted); color: var(--ink); }
.addmenu__form { padding: 6px; min-width: 0; width: 220px; }
.addmenu__form .field { width: 100%; min-width: 0; }

/* Always-editable note: title in the head line, autosave status beside Save. */
.doc--edit .doc__head { align-items: center; margin-bottom: 8px; }
.doc--edit .doc__title-input { flex: 1; min-width: 0; }
.doc--edit .doc__meta { margin: 0 0 8px; }
.doc__status { font-size: 12px; color: var(--text-muted); min-width: 110px; text-align: right; }
.doc__status--ok { color: var(--ok); }
.doc__status--dirty { color: var(--warn); }
.doc__status--error { color: var(--danger); }
.doc__share--edit { margin: 12px 0 0; }
.pane--main:has(.doc--edit) .doc__share--edit { margin: 0; }

/* Code blocks are Ace panes, in the editor and in the reading view. */
.codeblock { margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.codeblock--selected { outline: 2px solid var(--purple); }
.codeblock__bar { display: flex; justify-content: flex-end; padding: 2px 6px; background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.codeblock__lang { font-size: 12px; padding: 1px 4px; }
.codeblock__ace { width: 100%; font-family: var(--font-mono); }

/* Link bubble in the editor and the Document/Scratchpad switch. */
.linkbubble { position: absolute; z-index: 12; display: inline-flex; align-items: center; gap: 10px; max-width: 420px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); font-size: 12px; }
.linkbubble__href { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbubble__open { color: var(--info); font-weight: 600; text-decoration: none; }
.switch--mode { font-size: 12px; color: var(--text-muted); }
.modeform { margin: 0; display: inline-flex; }

/* Pictures: never wider than the page; the resize corner in the editor. */
.doc__body img, .toastui-editor-contents img { max-width: 100%; height: auto; }
.toastui-editor-ww-container { position: relative; }
.imgresize { position: absolute; z-index: 30; width: 14px; height: 14px; border: 2px solid var(--surface); border-radius: 3px; background: var(--info); box-shadow: 0 0 0 1px var(--border-strong); cursor: nwse-resize; }

/* Task lists in the reading view. */

/* Shared with me folds like a folder; the choice is remembered per browser. */
.sharedsec > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.sharedsec > summary::-webkit-details-marker { display: none; }
.sharedsec > summary > .folder__arrow::before { content: "\25B8"; }
.sharedsec[open] > summary > .folder__arrow::before { content: "\25BE"; }
.tag--owner { color: var(--info); border-color: var(--info); background: var(--surface); }

/* Drawer: hamburger like XStudio's status pane toggle; hidden pane on wide screens, slide-over on narrow ones. */
.hamburger { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); color: var(--text-body); padding: 5px 10px; font-size: 0.8rem; line-height: 1; cursor: pointer; }
.hamburger:hover { background: var(--surface-muted); }
.pane__toprow .hamburger { margin-right: 8px; }
/* Collapsed, the pane becomes a narrow rail that keeps the hamburger exactly where it was. */
.app--pane-hidden .pane--left { width: 56px; overflow: hidden; }
.app--pane-hidden .pane--left > :not(.pane__toprow) { display: none; }
.app--pane-hidden .pane__toprow > :not(.hamburger) { display: none; }
.app__backdrop { display: none; }
@media (max-width: 720px) {
  .pane--left { position: fixed; left: 0; top: 49px; bottom: 0; width: 300px; z-index: 30; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
  .app--pane-hidden .pane--left { box-shadow: none; }
  .app__body { padding-left: 56px; }
  .app:not(.app--pane-hidden) .app__backdrop { display: block; position: fixed; inset: 49px 0 0 0; background: var(--overlay, rgba(15, 20, 25, 0.45)); z-index: 29; }
  .search .field { width: 140px; }
}
.doc__tools { display: inline-flex; align-items: center; gap: 4px; position: relative; margin-left: 8px; }
.doc__tools .plus { margin-left: 0; }
.doc__tools .addmenu { right: 0; left: auto; top: calc(100% + 4px); }

/* Favourites, recent, trash. */
.pane__section--quick { border-top: 0; margin-top: 4px; padding-top: 8px; }
.note__list--quick { padding-top: 0; }
.star { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 4px; color: var(--text-subtle); cursor: pointer; }
.star:hover { color: var(--warn); }
.star--on { color: var(--warn); }
.starform { margin: 0; display: inline-flex; }
/* Thin lines: Favourites and Recent | my folders and notes | Shared with me | Tags and Trash at the bottom. */
.pane__mine { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 8px 12px 0; }
.pane__mine .folder__list--root, .pane__mine .note__list--root, .pane__mine .pane__empty { margin-left: -12px; margin-right: -12px; }
.pane__mine + .sharedsec > .pane__section { border-top: 0; margin-top: 0; }
/* My folder names are plain weight; shared folders keep the bold. */
.pane__mine .folder > details > summary { font-weight: 400; }
.sharedsec + .pane__bottom { border-top: 1px solid var(--border); margin: 8px 12px 0; padding-top: 0; }
.sharedsec + .pane__bottom .pane__trash { margin-left: 0; margin-right: 0; }
.pane__trash { display: block; margin: 8px 12px 0; padding: 5px 12px; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-size: 13px; }
.pane__trash:hover { background: var(--surface-muted); color: var(--ink); }
.doc__banner { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius); background: var(--warn-bg, #FCF4E6); border: 1px solid var(--warn-border, #E3C48F); color: var(--text-body); font-size: 13px; }
.ntable__actions { white-space: nowrap; }
.ntable__actions .btn { margin-right: 4px; }

/* Link-to-a-note popup. */
.toastui-editor-toolbar-icons.sxinotes-notelink { color: var(--ink-2); }
.notelink { padding: 8px; display: grid; gap: 6px; }
.notelink__search { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-body); font: inherit; }
.notelink__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; display: grid; gap: 1px; }
.notelink__item { padding: 6px 8px; border-radius: var(--radius); cursor: pointer; display: grid; }
.notelink__item:hover { background: var(--surface-muted); }
.notelink__title { color: var(--ink); font-weight: 600; font-size: 13px; }
.notelink__meta { color: var(--text-muted); font-size: 11px; }
.notelink__empty { padding: 6px 8px; color: var(--text-muted); font-size: 12px; }
.doc__body a, .toastui-editor-contents a { color: var(--info); }
.pane__hint { margin: 0; padding: 4px 12px 8px; font-size: 12px; color: var(--text-subtle); }
.quicksec > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.quicksec > summary::-webkit-details-marker { display: none; }
.quicksec > summary > .folder__arrow::before { content: "\25B8"; }
.quicksec[open] > summary > .folder__arrow::before { content: "\25BE"; }
.quicksec > summary .sublist__count { margin-left: 4px; }
.ntable__check { width: 28px; text-align: center; }
.ntable__check input { margin: 0; vertical-align: middle; }

/* Tags as links, the tag cloud, attachments. */
.tag--link { text-decoration: none; }
.tag--link:hover { color: var(--ink); border-color: var(--border-strong); }
.tag--big { font-size: 18px; padding: 2px 12px; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.tagcloud__item:hover { background: var(--surface-muted); }
/* Under the editor: Attachments and Share side by side, the same left edge and top. */
.doc__below { margin: 12px 0 0; display: flex; gap: 16px; align-items: flex-start; }
.doc__below > details { flex: 1; min-width: 0; margin: 0; }
.pane--main:has(.doc--edit) .doc__below { margin: 0 24px 16px; max-width: 880px; }
/* The attachments box is a .doc__share box; outside .doc__below (reading view) it needs its own gap. */
.doc__files { margin: 16px 0 0; }
.files { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.files__item { display: flex; align-items: center; gap: 10px; }
.files__name { color: var(--info); text-decoration: none; font-weight: 600; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.files__size { color: var(--text-muted); font-size: 12px; }
.files__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.btn--small { padding: 2px 8px; font-size: 12px; }
.viewer { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 32px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-body); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(0, 0, 0, 0.5); }
.viewer__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.viewer__name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
.viewer__note { color: var(--text-muted); font-size: 12px; }
.viewer__body { flex: 1; min-height: 0; overflow: auto; background: var(--surface-alt); }
.viewer__body--image { display: flex; align-items: center; justify-content: center; padding: 12px; }
.viewer__body--image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer__body--pdf { overflow: hidden; }
.viewer__body--pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer__body--text pre { margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; white-space: pre; tab-size: 4; color: var(--text-body); }
.viewer__wait { margin: 0; padding: 16px; color: var(--text-muted); }
.viewer__body--word .docx-wrapper { padding: 24px; background: var(--surface-muted); }
.viewer__body--word .docx-wrapper > section.docx { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); margin-bottom: 24px; }
.viewer__body--excel { display: flex; flex-direction: column; overflow: hidden; }
.sheets { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.sheets__tab { padding: 4px 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.sheets__tab--on { background: var(--surface); color: var(--ink); font-weight: 600; }
.sheet { flex: 1; min-height: 0; overflow: auto; }
.sheet table { border-collapse: collapse; font-size: 12px; background: var(--surface); }
.sheet th, .sheet td { border: 1px solid var(--border); padding: 3px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--text-body); }
.sheet th { background: var(--surface-muted); color: var(--text-muted); font-weight: 600; text-align: center; position: sticky; top: 0; }
.sheet tbody th { position: sticky; left: 0; top: auto; text-align: right; }
.sheet thead th:first-child { left: 0; z-index: 1; }
.files__add { display: flex; gap: 8px; align-items: center; }
.files__add input[type=file] { font: inherit; font-size: 12px; color: var(--text-body); }

/* A freshly made API key, shown once. */
.keybox { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--warn-border, #E3C48F); border-radius: var(--radius); background: var(--warn-bg, #FCF4E6); }
.keybox__label { margin: 0 0 8px; font-size: 13px; color: var(--text-body); }
.keybox__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.keybox__key { font-family: var(--font-mono); font-size: 14px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); user-select: all; }
.profile__section { margin: 20px 0 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.profile__heading { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.profile__form { max-width: 360px; }
.keylist__summary { cursor: pointer; color: var(--info); font-size: 13px; }
.keylist__items { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.keylist__item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.keylist__label { font-weight: 600; color: var(--ink); }
.keylist__meta { color: var(--text-muted); }
.keylist__item form { margin-left: auto; }
.keylist .row .field { width: 140px; padding: 4px 8px; font-size: 12px; }
.vaultkey { display: flex; align-items: center; gap: 6px; }
.vaultkey .row .field { width: 140px; padding: 4px 8px; font-size: 12px; }
/* A stored key, masked, with the eye that shows it. */
.secret { display: inline-flex; gap: 4px; align-items: center; }
.secret__value { width: 42ch; padding: 4px 8px; font-family: var(--font-mono); font-size: 12px; }
.secret__eye { display: inline-flex; align-items: center; padding: 5px 8px; }
.secret__none { color: var(--text-muted); font-size: 12px; cursor: help; }
/* The Delete user popup on Site users. */
.userdel { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-body); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.userdel::backdrop { background: rgba(0, 0, 0, 0.35); }
.userdel__title { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.userdel__text { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.userdel__list { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }
.userdel__buttons { display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 0; }

/* Text size button and its popup (#51). */
.toastui-editor-toolbar-icons.sxinotes-textsize { color: var(--ink-2); position: relative; }
.toastui-editor-toolbar-icons.sxinotes-textsize::after { content: "T"; font-size: 10px; position: absolute; right: 5px; bottom: 7px; line-height: 1; }
.textsize { padding: 6px; display: grid; gap: 2px; }
.textsize__item { text-align: left; padding: 4px 8px; border: 0; border-radius: var(--radius); background: none; color: var(--text-body); font-family: var(--font-ui); cursor: pointer; }
.textsize__item:hover { background: var(--surface-muted); }

/* A credential in the main pane: field names down the left, masked values with the eye. */
.cred { max-width: 760px; }
.cred__name { width: 160px; text-align: left; font-weight: 600; color: var(--text-muted); }
.cred__plain { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.cred__copy { width: 1%; white-space: nowrap; }
.credsec > summary .plus { margin-left: auto; text-transform: none; }
.credform__value { width: 100%; max-width: 480px; font-family: var(--font-mono); font-size: 12px; }
.credform .secret { display: flex; max-width: 520px; }
.credform .secret .secret__value { flex: 1 1 auto; width: auto; }
.credform__fname { width: 100%; font-size: 12px; font-weight: 600; }
.credsec__name { color: inherit; text-decoration: none; }
.credsec__name:hover, .credsec__name--on { color: var(--ink); }