/* ═══ Panel Overlay ══════════════════════════════════════════════════════════ */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-panel);
}

.panel {
  width: 560px;
  max-height: 90vh;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  box-shadow: var(--panel-glow);
  outline: 1px solid var(--panel-outline);
  border-radius: var(--radius-lg);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  flex-shrink: 0;
}

.panel-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--on-surface);
}

.panel-doc-id {
  font-size: 0.6875rem;
  font-family: monospace;
  color: var(--on-surface-muted);
  background: var(--surface-container-high);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
}

.panel-doc-id:hover {
  color: var(--on-surface);
  background: var(--surface-container-highest);
}

.panel-expand {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--on-surface-muted);
  padding: 4px 6px;
  border-radius: var(--radius-md);
  transition: background 0.12s, color 0.12s;
  margin-left: auto;
}
.panel-expand:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.field-split-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-muted);
  padding: 4px 8px;
  margin-right: 2px;
  border-radius: var(--radius-md);
  opacity: 0.7;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
  flex-shrink: 0;
}
.field-split-toggle:hover {
  opacity: 1;
  background: var(--surface-container);
  color: var(--on-surface);
}
.field-split-toggle--on {
  opacity: 1;
  color: var(--on-surface);
}

.split-toggle-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1rem;
  line-height: 1;
}
.split-toggle-icon__base {
  font-size: 1em;
}
.split-toggle-icon__lens {
  position: absolute;
  right: -0.35em;
  bottom: -0.3em;
  font-size: 0.58em;
  text-shadow:
    0 0 2px var(--surface-container-low),
    0 0 2px var(--surface-container-low),
    0 0 2px var(--surface-container-low);
}
.field-split-toggle--on .split-toggle-icon__lens {
  color: var(--primary-muted);
}

.panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--on-surface-muted);
  padding: 4px 6px;
  border-radius: var(--radius-md);
  transition: background 0.12s, color 0.12s;
}
.panel-close:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.panel-form {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-error {
  background: var(--error-container);
  color: var(--on-error-container);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}

.panel-parent-hint {
  color: var(--on-surface-muted);
  font-size: 0.8125rem;
  padding: 4px 0 2px 10px;
}

.panel-parent-hint strong {
  color: var(--on-surface);
}

/* ═══ Expanded Panel ════════════════════════════════════════════════════════ */

.panel--expanded {
  width: calc(100vw - 48px);
  max-width: 100%;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  transition: width 0.2s ease, height 0.2s ease;
}

.panel--expanded .md-editor-input,
.panel--expanded .md-editor-preview {
  min-height: 0;
  max-height: none;
  flex: 1;
}

/* The shadow-overlay wrap also needs to flex; otherwise focusing the textarea
   in maximized single-view mode collapses it to the input's intrinsic 220px
   min-height. */
.panel--expanded .md-editor-input-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel--expanded .md-editor {
  flex: 1;
  min-height: 0;
}

.panel--expanded .panel-form {
  flex: 1;
  min-height: 0;
}

.panel--expanded .field-row:has(.md-editor) {
  flex: 1;
  min-height: 0;
}

/* ═══ Split-pane editor (maximized + desktop only) ═════════════════════════ */

.field-row--split {
  flex: 1;
  min-height: 0;
}

.md-editor.md-editor--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.md-editor-input--split,
.md-editor-preview--split {
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow-y: auto;
}

.md-editor-input--split {
  resize: none;
}

/* ═══ Fields ═════════════════════════════════════════════════════════════════ */

.field-row { display: flex; flex-direction: column; }
.field-row--title { flex-direction: row; align-items: center; }
.field-row--title input { font-size: 1rem; font-weight: 500; flex: 1; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--on-surface-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field-label--wide { grid-column: span 2; }


.field-alerts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--on-surface-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s;
}

.field-alerts-btn:hover {
  opacity: 1;
  color: var(--on-surface);
}

.field-alerts-btn--off {
  color: var(--on-surface-muted);
  opacity: 0.7;
}

.field-input,
.field-select {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  background: var(--surface-container-high);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  color: var(--on-surface);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 28px 7px 10px;
  /* SVG chevron stroke #84746a matches --on-surface-muted; can't use CSS vars in data URIs */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2384746a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-muted) 40%, transparent);
  box-shadow: 0 0 0 3px var(--surface-tint);
}

/* ── Priority pill group ─────────────────────────────────────────────────── */

.pill-group {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--outline-variant);
}

.pill {
  flex: 1;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--on-surface-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.pill:not(:last-child) {
  border-right: 1px solid var(--outline-variant);
}

.pill:hover {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

.pill--active {
  font-weight: 600;
}

.pill--priority-none.pill--active {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

.pill--priority-low.pill--active {
  background: color-mix(in srgb, var(--priority-low) 15%, transparent);
  color: var(--priority-low);
}

.pill--priority-medium.pill--active {
  background: color-mix(in srgb, var(--priority-medium) 15%, transparent);
  color: var(--priority-medium);
}

.pill--priority-high.pill--active {
  background: color-mix(in srgb, var(--priority-high) 15%, transparent);
  color: var(--priority-high);
}

.field-date-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.field-date-wrapper .field-date {
  flex: 1;
}

.field-date-clear {
  position: absolute;
  right: 30px;
  background: none;
  border: none;
  color: var(--on-surface-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.12s, color 0.12s;
}

.field-date-clear:hover {
  opacity: 1;
  color: var(--on-surface);
}

.field-date {
  background: transparent;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  /* color-scheme set dynamically by theme — see [data-theme] selectors in tokens.css */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-date:focus {
  border-color: var(--primary-muted);
  box-shadow: var(--date-focus-shadow);
}
.field-date::-webkit-calendar-picker-indicator {
  filter: invert(0.6) sepia(0.5) saturate(3) hue-rotate(350deg) brightness(1.1);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.field-date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.field-title {
  font-size: 1rem !important;
  font-weight: 600;
  padding: 6px 10px !important;
  background: transparent;
}

/* ═══ Date/Time Natural Language Input (issue #143) ═════════════════════════ */
.dt-natural {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.repeat-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.repeat-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}
.repeat-interval {
  width: 4rem;
}
.repeat-unit,
.repeat-preset {
  flex-shrink: 0;
}
.dt-natural-row {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
}
.dt-natural-input {
  flex: 1;
  padding-right: 56px;
}
.dt-natural-input--invalid {
  border-color: color-mix(in srgb, var(--priority-high) 60%, transparent);
}
.dt-natural-calendar {
  position: absolute;
  right: 32px;
  background: none;
  border: none;
  color: var(--on-surface-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.7;
  transition: opacity 0.12s, color 0.12s;
}
.dt-natural-calendar:hover {
  opacity: 1;
  color: var(--on-surface);
}
.dt-natural-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--on-surface-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.6;
  transition: opacity 0.12s, color 0.12s;
}
.dt-natural-clear:hover {
  opacity: 1;
  color: var(--on-surface);
}
.dt-natural-native {
  position: absolute;
  right: 28px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dt-natural-hint {
  font-size: 0.6875rem;
  padding: 0 2px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.dt-natural-hint--err {
  color: color-mix(in srgb, var(--priority-high) 80%, transparent);
}

.dt-usage-hint {
  grid-column: span 2;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--on-surface-muted);
  opacity: 0.7;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 0 2px;
}

@media (max-width: 768px) {
  .dt-natural-input { font-size: 1rem; padding-right: 60px; }
}

/* ═══ Markdown Editor ════════════════════════════════════════════════════════ */

.md-editor { display: flex; flex-direction: column; }

.md-editor-input {
  font-family: 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  font-size: 0.8125rem;
  /* Integer pixel line-height: 0.8125rem * 1.6 = 20.8px, which Chrome rounds
     differently inside <textarea> vs the shadow <div>, accumulating ~1px of
     vertical drift per line. Pinning to 21px keeps both layers metrically
     identical. .md-editor-shadow MUST mirror this value. */
  line-height: 21px;
  /* Pin every glyph-positioning property so browser defaults can't diverge
     between the textarea and the shadow div. */
  letter-spacing: 0;
  word-spacing: 0;
  tab-size: 4;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  text-indent: 0;
  /* Reserve scrollbar space whether or not the bar is visible — otherwise the
     textarea's inner text width changes when the bar appears, wrapping long
     lines at different points than the shadow. */
  scrollbar-gutter: stable;
  background: var(--surface-container-high);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px;
  color: transparent;
  caret-color: var(--on-surface);
  resize: none;
  min-height: 220px;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.md-editor-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-muted) 40%, transparent);
  box-shadow: 0 0 0 3px var(--surface-tint);
}

/* ── Markdown editor: token shadow overlay ─────────────────────────────────
   Positioned over a transparent <textarea>. Identical font/padding/border so
   characters align exactly with the (invisible) textarea text and caret.
   pointer-events: none keeps clicks/selection on the textarea below. */
.md-editor-input-wrap {
  position: relative;
}
.md-editor-input-wrap--split {
  min-height: 0;
  height: 100%;
}
.md-editor-input-wrap > .md-editor-input {
  position: relative;
  z-index: 1;
  background: transparent;
  /* display:block (not the default inline-block for <textarea>) so the wrap's
     line-box doesn't add ~5px of inline-baseline descender below the
     textarea. Without this, the wrap is 5px taller than the textarea, the
     absolutely-positioned shadow fills that taller wrap, and the shadow's
     max scrollTop ends up 5px less than the textarea's — causing the caret
     to drift away from the colored text once the textarea scrolls past
     (textarea.scrollHeight - shadow.clientHeight). */
  display: block;
}
.md-editor-input-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
  z-index: 0;
}
.md-editor-input-wrap:focus-within::before {
  box-shadow: 0 0 0 3px var(--surface-tint);
}
.md-editor-shadow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  font-family: 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  font-size: 0.8125rem;
  padding: 10px;
  /* MUST match .md-editor-input.line-height — see note there. */
  line-height: 21px;
  letter-spacing: 0;
  word-spacing: 0;
  tab-size: 4;
  font-variant-ligatures: none;
  font-feature-settings: normal;
  text-indent: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* overflow:auto (not hidden) so syncShadowScroll's scrollTop assignment
     actually moves the layer when the textarea scrolls. Without this the
     shadow stays at the top, the caret keeps following the textarea, and
     selection visually drifts onto unrelated tokens. The scrollbar is
     suppressed because the textarea owns scroll input (pointer-events:none
     here passes wheel events through to the textarea). */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  color: var(--on-surface);
  background: transparent;
  box-sizing: border-box;
}
.md-editor-shadow::-webkit-scrollbar {
  display: none;
}
.md-editor-input-wrap--split > .md-editor-shadow {
  height: 100%;
}

/* ── Markdown editor: token colors ──────────────────────────────────────── */
/* No font-weight, font-style, or font-family changes per token — anything
   that shifts glyph width drifts the caret. Color and underline only. */
.md-token { font: inherit; }
.md-token--plain { color: var(--on-surface); }
.md-token--heading-marker { color: color-mix(in srgb, var(--primary) 60%, transparent); }
.md-token--heading-text { color: var(--primary); }
.md-token--bold-marker { color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.md-token--bold-text { color: var(--secondary); }
.md-token--italic-marker { color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.md-token--italic-text { color: color-mix(in srgb, var(--secondary) 80%, var(--on-surface)); }
.md-token--code-inline-marker { color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.md-token--code-inline { color: var(--secondary); }
.md-token--code-fence { color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.md-token--code-block { color: var(--secondary); }
.md-token--link-label {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}
.md-token--link-url { color: color-mix(in srgb, var(--tertiary) 60%, transparent); }
.md-token--list-marker { color: var(--tertiary); }
.md-token--blockquote-marker { color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.md-token--strike-marker { color: var(--on-surface-muted); }
.md-token--strike-text {
  color: var(--on-surface-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
}
.md-token--highlight-marker { color: color-mix(in srgb, var(--tertiary) 60%, transparent); }
.md-token--highlight-text {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--tertiary) 25%, transparent);
  border-radius: 2px;
}

.md-editor-preview {
  background: var(--surface-container-high);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px;
  min-height: 220px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-surface);
  cursor: text;
  transition: border-color 0.15s;
}

.md-editor-preview:hover {
  border-color: color-mix(in srgb, var(--outline) 30%, transparent);
}

.md-editor-preview--empty {
  color: var(--on-surface-muted);
  font-style: italic;
}

/* Markdown rendered content */
.md-editor-preview h1,
.md-editor-preview h2,
.md-editor-preview h3,
.md-editor-preview h4,
.md-editor-preview h5,
.md-editor-preview h6 {
  margin: 1.2em 0 0.3em;
  line-height: 1.3;
}
.md-editor-preview > h1:first-child,
.md-editor-preview > h2:first-child,
.md-editor-preview > h3:first-child,
.md-editor-preview > h4:first-child,
.md-editor-preview > h5:first-child,
.md-editor-preview > h6:first-child {
  margin-top: 0;
}
.md-editor-preview h1 { font-size: 1.125rem; }
.md-editor-preview h2 { font-size: 1.0625rem; }
.md-editor-preview h3 { font-size: 1rem; }
.md-editor-preview h4 { font-size: 0.9375rem; }
.md-editor-preview h5 { font-size: 0.875rem; }
.md-editor-preview h6 { font-size: 0.8125rem; }
.md-editor-preview p { margin: 0 0 0.5em; }
.md-editor-preview p:last-child { margin-bottom: 0; }
.md-editor-preview ul,
.md-editor-preview ol { margin: 0 0 0.5em; padding-left: 1.4em; }
.md-editor-preview li { margin-bottom: 0.15em; }
.md-editor-preview code {
  font-family: 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-container);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}
.md-editor-preview pre {
  background: var(--surface-container);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0 0 0.5em;
}
.md-editor-preview pre code {
  background: none;
  padding: 0;
}
.md-editor-preview blockquote {
  margin: 0 0 0.5em;
  padding-left: 10px;
  border-left: 3px solid var(--outline-variant);
  color: var(--on-surface-variant);
}
.md-editor-preview a {
  color: var(--primary-muted);
  text-decoration: underline;
}
.md-editor-preview hr {
  border: none;
  border-top: 1px solid var(--outline-variant);
  margin: 0.6em 0;
}
.md-editor-preview dl {
  margin: 0 0 0.5em;
  padding: 0;
}
.md-editor-preview dt {
  font-weight: 600;
  color: var(--on-surface);
  margin-top: 0.4em;
}
.md-editor-preview dt:first-child {
  margin-top: 0;
}
.md-editor-preview dd {
  margin: 0.15em 0 0.35em 1.2em;
  color: var(--on-surface-variant);
}
.md-editor-preview table {
  border-collapse: collapse;
  margin: 0 0 0.5em;
}
.md-editor-preview th,
.md-editor-preview td {
  border: 1px solid var(--outline-variant);
  padding: 4px 8px;
  text-align: left;
}

/* Interactive task-list checkboxes (bare `[ ]` / `[x]` syntax). Shared by
 * the editor preview and the inline flow-view outline. */
.md-checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 0.15em;
  line-height: 1.6;
}
.md-checkbox-content {
  flex: 1;
  min-width: 0;
}
.md-checkbox-line--checked .md-checkbox-content {
  color: var(--on-surface-muted);
  text-decoration: line-through;
}
.md-checkbox {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  margin-top: 3px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--outline);
  background: var(--surface-container);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.md-checkbox:hover {
  border-color: var(--primary);
}
.md-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.md-checkbox:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--on-primary, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}
.md-checkbox:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.md-editor-hint {
  font-size: 0.6875rem;
  color: var(--on-surface-muted);
  opacity: 0;
  margin-top: 4px;
  text-align: right;
  padding-right: 2px;
  letter-spacing: 0.01em;
  transition: opacity 0.2s;
}

.md-editor:hover .md-editor-hint,
.md-editor:focus-within .md-editor-hint {
  opacity: 0.5;
}

/* ═══ Sub-items ══════════════════════════════════════════════════════════════ */

.panel-subitems {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-subitems-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-muted);
  padding: 0 2px 4px;
}

.panel-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--on-surface);
  transition: background 0.1s;
}
.panel-subitem:hover { background: var(--surface-container); }

.panel-subitem-status { font-size: 0.75rem; color: var(--on-surface-muted); flex-shrink: 0; }
.panel-subitem-title { flex: 1; font-size: 0.8125rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-subitem-count {
  font-size: 0.6875rem;
  color: var(--on-surface-muted);
  background: var(--surface-container);
  border-radius: var(--radius-full);
  padding: 0 6px;
  flex-shrink: 0;
}

/* ═══ Archive Modal ══════════════════════════════════════════════════════════ */

.archive-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-light);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-header);
}

.archive-modal {
  background: var(--surface-container-highest);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  width: 320px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-modal-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.archive-modal-desc {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}

.archive-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.archive-progress-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-light);
  backdrop-filter: blur(var(--frosted-blur));
  -webkit-backdrop-filter: blur(var(--frosted-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-header);
}

.archive-progress-modal {
  background: var(--surface-container-highest);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  width: 320px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.archive-progress-status {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface);
}

.archive-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-container);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.archive-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 120ms ease-out;
}

/* Archive confirmation (inline panel) */
.panel-archive-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--error);
}

.panel-archive-confirm-btns {
  display: flex;
  gap: 6px;
}

/* ═══ Area Actions (collapsible section) ════════════════════════════════════ */

.panel-area-actions {
  display: flex;
  flex-direction: column;
  background: var(--surface-container);
  border-radius: var(--radius-md);
  margin-top: 4px;
  overflow: hidden;
}

.panel-area-actions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--on-surface-muted);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.panel-area-actions-header:hover {
  color: var(--on-surface);
}

.panel-area-actions-header .panel-area-actions-chevron {
  font-size: 0.625rem;
  transition: transform 0.15s ease;
  width: 0.625rem;
  text-align: center;
}

.panel-area-actions-header[aria-expanded="true"] .panel-area-actions-chevron {
  transform: rotate(90deg);
}

.panel-area-actions-body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--outline-variant);
}

.panel-area-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.panel-area-action:hover:not(:disabled) {
  background: var(--surface-container-high);
}

.panel-area-action:disabled {
  cursor: not-allowed;
  color: var(--on-surface-muted);
}

.panel-area-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.panel-area-action:disabled .panel-area-action-icon {
  color: var(--on-surface-muted);
}

.panel-area-action-label {
  flex: 1;
  min-width: 0;
}

.panel-area-action-hint {
  font-size: 0.75rem;
  color: var(--on-surface-muted);
  font-weight: 400;
}

.panel-area-action-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: var(--on-surface);
  flex-wrap: wrap;
}

.panel-area-action-confirm-text {
  flex: 1;
  min-width: 0;
}

.panel-area-action-confirm-btns {
  display: flex;
  gap: 6px;
}

/* ═══ Panel Actions ══════════════════════════════════════════════════════════ */

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: auto;
}

.panel-actions-right { display: flex; gap: 8px; margin-left: auto; }

/* ═══ Buttons ════════════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--primary-muted);
  color: var(--on-primary);
  font-weight: 600;
  opacity: 0.7;
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn--ghost {
  background: none;
  border: 1px solid color-mix(in srgb, var(--outline) 30%, transparent);
  color: var(--on-surface-variant);
}
.btn--ghost:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.btn--danger {
  background: none;
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}
.btn--danger:hover {
  background: var(--error-container);
}
.btn--sm { font-size: 0.75rem; padding: 4px 10px; }

/* ═══ Mobile Panel (Bottom Sheet) ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .panel-overlay {
    align-items: flex-end;
  }

  .panel {
    width: 100%;
    max-height: calc(100vh - 48px - env(safe-area-inset-top, 0px));
    border-radius: 16px 16px 0 0;
    animation: panel-slide-up 0.25s ease;
  }

  .panel-expand { display: none; }

  .panel-form { padding-top: 0; }

  /* ── Prevent iOS auto-zoom on input focus (requires ≥1rem / 16px) ─── */
  .field-input,
  .field-select { font-size: 1rem; }
  /* Mobile: textarea jumps to 1rem (iOS auto-zoom mitigation). The shadow
     must follow font-size AND line-height in lockstep, otherwise the colored
     text drifts horizontally and vertically from the textarea text.
     1rem * 1.6 = 25.6px → integer 26px to avoid the same rounding drift. */
  .md-editor-input,
  .md-editor-shadow {
    font-size: 1rem;
    line-height: 26px;
  }

  @keyframes panel-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}