/* Add / Edit note: the writing sheet, its floating toolbar, and the side column. */

.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 1.75rem; align-items: start; }
@media (max-width: 1100px) { .editor-layout { grid-template-columns: minmax(0, 1fr); } }
.editor-page .page-head { align-items: center; }
.type-switch > button { padding: 0.35rem 0.85rem; }
.type-switch .icon { width: 0.95rem; height: 0.95rem; }
@media (max-width: 700px) { .type-switch .icon { display: none; } .type-switch > button { padding-inline: 0.5rem; } }

#note-form { min-width: 0; }
.topic-pick { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.topic-pick select { min-width: 14rem; }

.toolbar { position: sticky; top: 0.6rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  width: fit-content; max-width: 100%; margin-bottom: 0.8rem; padding: 4px; border-radius: var(--r-lg);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); }
.toolbar button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.25rem 0.6rem;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--fg-soft); font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1); }
.toolbar button:hover { background: var(--hover); color: var(--fg); }
.toolbar button:active { transform: scale(0.95); }
.toolbar .icon { width: 1rem; height: 1rem; }
.tool-sep { width: 1px; height: 1.2rem; margin: 0 0.25rem; background: var(--line-strong); }
.toolbar .key-btn { color: var(--good); }
.toolbar .key-btn:hover { background: color-mix(in oklch, var(--good) 14%, transparent); }
.toolbar .hide-btn { background: var(--hide); color: var(--hide-fg); font-weight: 600; }
.toolbar .hide-btn:hover { background: color-mix(in oklch, var(--hide) 80%, var(--fg)); color: var(--hide-fg); }
@media (max-width: 760px) { .toolbar button span { display: none; } }

.tool-menu { position: relative; }
.toolbar .menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 6; display: flex; flex-direction: column;
  gap: 2px; min-width: 14rem; }
.toolbar .menu button { justify-content: flex-start; width: 100%; }
.bracket-pick { display: flex; gap: 0.3rem; }
.toolbar .bracket-pick button { flex: 1; justify-content: center; border: 1px solid var(--line); font-family: var(--font-mono); }
.toolbar .bracket-pick button.active { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.matrix-grid { display: grid; grid-template-columns: repeat(6, 1.6rem); gap: 3px; margin: 0.5rem 0.3rem 0.2rem; }
.matrix-cell { width: 1.6rem; height: 1.6rem; border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1); }
.matrix-cell.on { background: var(--accent-soft); border-color: var(--accent); }
.matrix-size { padding: 0 0.3rem; font-size: var(--text-xs); }
.matrix-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 0.3rem; padding-top: 0.4rem;
  border-top: 1px solid var(--line); font-size: var(--text-xs); }
.matrix-edit .muted { grid-column: 1 / -1; padding: 0 0.3rem; }
.toolbar .matrix-edit button { font-size: var(--text-xs); }

.sheet { padding: 0.4rem 0; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); }
.field { padding: 1rem 1.5rem 0.4rem; }
.field + .field { border-top: 1px solid var(--line); }
.field-label { margin-bottom: 0.4rem; transition: color var(--dur-2); }
.field:focus-within .field-label { color: var(--accent-text); }
.rich-editor { min-height: 4.5rem; padding: 0.2rem 0 0.9rem; font-size: 1.22rem; line-height: 1.6; outline: none;
  white-space: pre-wrap; overflow-wrap: anywhere; caret-color: var(--accent); }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; font-style: italic; }
.rich-editor p { margin: 0 0 0.5em; }
.rich-editor .cloze { position: relative; }
.rich-editor .cloze::after { content: attr(data-c); position: relative; top: -0.6em; margin-left: 0.15em;
  font: 700 0.6em var(--font-ui); opacity: 0.8; }
.rich-editor .keypoint { background: color-mix(in oklch, var(--good) 14%, transparent); }
/* Marks the current type doesn't use wait, unhighlighted, until you switch back. */
#note-form:not([data-type="cloze"]) .rich-editor .cloze { background: none; color: inherit; font-weight: inherit; padding: 0; }
#note-form:not([data-type="cloze"]) .rich-editor .cloze::after { content: none; }
#note-form:not([data-type="typed"]) .rich-editor .keypoint { background: none; border-bottom: 0; }
.rich-editor img, .preview img { max-width: 100%; max-height: 24rem; height: auto; vertical-align: middle; border-radius: var(--r-sm); }
.rich-editor img.uploading { opacity: 0.5; }
.answer-box .rich-editor { padding: 0.75rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--sunken); transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.answer-box .rich-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

math-field { display: inline-block; vertical-align: middle; min-width: 1.5em; padding: 0 0.2em; border: 1px dashed transparent;
  border-radius: 5px; font-size: 1.05em; background: transparent; color: var(--fg);
  --caret-color: var(--accent); --selection-background-color: var(--accent-soft); --contains-highlight-background-color: var(--hover); }
math-field:hover { border-color: var(--line-strong); }
math-field:focus-within { border-color: var(--accent); outline: none; background: var(--accent-soft); }
math-field.display { display: block; margin: 0.5em auto; text-align: center; width: fit-content; min-width: 4em; }
math-field::part(menu-toggle), math-field::part(virtual-keyboard-toggle) { display: none; }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.help-box { margin-top: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.help-box summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; cursor: pointer; list-style: none;
  color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.help-box summary::-webkit-details-marker { display: none; }
.help-box[open] summary { color: var(--fg); }
.help-box .help { margin: 0 1rem 0.8rem; font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.6; }

.editor-side { position: sticky; top: 1rem; display: grid; gap: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  scrollbar-width: thin; }
.written h2 { font-size: var(--text-md); margin-bottom: 0.6rem; }
.written h2 .muted { display: block; margin-top: 0.15rem; font: 400 var(--text-xs) var(--font-ui); }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; margin: 0; font-size: var(--text-sm); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.status-form { display: grid; gap: 0.35rem; justify-items: start; font-size: var(--text-xs); }