/* Notes tab — ported from The Walletly Other panel */

.notes-page {
  --surface: var(--panel);
  --accent: var(--teal);
  --input-bg: var(--panel);
}

.notes-page .feature-page-title {
  margin: 0 0 0.35rem;
}

.notes-page .panel-head-hint {
  max-width: 42rem;
  line-height: 1.5;
  font-size: 0.88rem;
}

.notes-page #notes-cards-layout {
  font: inherit;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.notes-page .other-inline-add.card {
  padding: 1.1rem 1.2rem 1.15rem;
  margin-bottom: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  box-shadow: var(--shadow-card);
}

.notes-page .other-cards-root {
  gap: 0.85rem;
}

.notes-page .other-cards-root > .other-card.card {
  margin-bottom: 0;
  padding: 0.85rem 0.95rem 0.95rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.notes-page .other-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead meta actions";
  align-items: start;
  gap: 0.35rem 0.55rem;
  flex-wrap: nowrap;
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.notes-page .other-card-head-lead {
  grid-area: lead;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
  padding-top: 0.05rem;
}

.notes-page .other-card-meta {
  grid-area: meta;
  margin-left: 0;
  min-width: 0;
}

.notes-page .other-head-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  margin-left: 0;
  padding-top: 0;
  gap: 0.4rem;
}

.notes-page .other-card-head .other-card-drag,
.notes-page .other-card-head .other-card-collapse-btn {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, var(--teal) 12%);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.notes-page .other-card-head .other-card-drag {
  color: var(--teal);
  cursor: grab;
}

.notes-page .other-card-head .other-card-drag:hover:not(:disabled),
.notes-page .other-card-head .other-card-collapse-btn:hover:not(:disabled) {
  background: var(--teal-soft);
  border-color: color-mix(in srgb, var(--teal) 35%, var(--line));
  color: var(--text);
}

.notes-page .other-head-actions .btn.btn--icon-only,
.notes-page .other-head-actions .other-hide-from-tab-btn,
.notes-page .other-head-actions .other-card-edit-btn,
.notes-page .other-head-actions .other-card-delete-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.notes-page .other-head-actions .btn.btn--icon-only:hover,
.notes-page .other-head-actions .other-hide-from-tab-btn:hover,
.notes-page .other-head-actions .other-card-edit-btn:hover,
.notes-page .other-head-actions .other-card-delete-btn:hover {
  background: var(--teal-soft);
  color: var(--text);
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
}

.notes-page .other-head-actions .btn-icon-svg {
  display: block;
  width: 15px;
  height: 15px;
}

.notes-page .other-type-pill {
  margin-bottom: 0.55rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--teal) 18%, var(--line));
  font-weight: 700;
  letter-spacing: 0.06em;
}

.notes-page .other-rich-toolbar {
  gap: 0.3rem;
  padding: 0.45rem 0.5rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--teal) 8%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .notes-page .other-rich-toolbar {
  box-shadow: none;
  background: color-mix(in srgb, var(--panel) 94%, var(--teal) 6%);
}

.notes-page .other-rich-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2rem;
  padding: 0.28rem 0.5rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.notes-page .other-rich-toolbar-btn:hover {
  background: var(--teal-soft) !important;
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line)) !important;
  color: var(--text) !important;
}

.notes-page .other-rich-toolbar-btn--active:not(:hover) {
  background: color-mix(in srgb, var(--teal) 16%, var(--panel)) !important;
  color: var(--teal) !important;
  border-color: color-mix(in srgb, var(--teal) 35%, var(--line)) !important;
}

.notes-page .other-rich-editor-shell {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.03);
}

.notes-page .other-rich-editor-mount .ProseMirror,
.notes-page .other-rich-editor-prose.ProseMirror {
  min-height: clamp(140px, 24vh, 260px);
}

.notes-page .other-rich-readonly {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

.notes-page .other-card-body {
  padding-top: 0.1rem;
}

.notes-page .panel-actions .btn-sm {
  border-radius: 10px;
}

.notes-page .other-layout-field {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.notes-page .other-layout-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

.notes-page .other-inline-add .savings-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.notes-page .other-inline-add .savings-modal-lead {
  margin: -0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.notes-page .other-inline-add .savings-modal-field .lbl {
  font-size: 0.8rem;
}

.notes-page .other-inline-add .savings-modal-input,
.notes-page .other-inline-add .savings-modal-textarea {
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
}

.notes-page .other-inline-add .savings-modal-textarea {
  min-height: 2.5rem;
}

.notes-page .other-inline-add .other-rich-toolbar {
  padding: 0.32rem 0.38rem;
  margin-bottom: 0.35rem;
  gap: 0.3rem;
}

.notes-page .other-inline-add .other-rich-toolbar-btn {
  min-height: 1.72rem;
  padding: 0.26rem 0.38rem !important;
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .notes-page .other-card-head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "lead actions"
      "meta meta";
  }

  .notes-page .other-head-actions {
    justify-self: end;
  }
}

.notes-page .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.notes-page .panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.notes-page .panel-tip-card {
  margin-bottom: 0.75rem;
}
.notes-page .panel-head-hint {
  margin: 0;
}
.other-layout-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.other-layout-label {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
#notes-cards-layout {
  min-width: 9rem;
}
.walletly-check {
  width: 1rem;
  height: 1rem;
  accent-color: var(--teal);
}
.dnd-drop-placeholder {
  border: 2px dashed color-mix(in srgb, var(--teal) 45%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  min-height: 3rem;
}
.notes-cards-root--dragging > .other-card:not(.dnd-item--source) {
  opacity: 0.92;
}
.other-card.dnd-item--source {
  opacity: 0.45;
}
@keyframes dndLand {
  0% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.other-card.dnd-item--landed {
  animation: dndLand 0.22s ease;
}
.savings-modal-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.savings-modal-lead {
  margin: 0 0 0.85rem;
}
.savings-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}
.savings-modal-field .lbl {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}
.savings-modal-input,
.savings-modal-textarea {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
}
.savings-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.card-vis-modal .modal-inner {
  max-width: 28rem;
}

.panel-vis-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.82rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--teal) 15%);
  background: color-mix(in srgb, var(--surface) 93%, var(--teal) 7%);
  margin: 0 0 -0.2rem;
}

.panel-vis-banner-text {
  margin: 0;
  flex: 1 1 12rem;
  line-height: 1.42;
}

.panel-vis-empty.panel-vis-empty {
  text-align: center;
  padding: 1.55rem 1.15rem;
  border-style: dashed;
  border-width: 1px;
}

.panel-vis-empty-title {
  margin: 0 0 0.42rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.panel-vis-empty-lead {
  margin: 0 auto 1.05rem;
  max-width: 28rem;
  text-wrap: balance;
}
.card-vis-modal .card-vis-checklist-root {
  margin-top: 0.45rem;
}
.card-vis-modal .card-vis-modal-lead {
  margin-bottom: 0.65rem;
}

.card-vis-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: min(50vh, 26rem);
  overflow-y: auto;
  padding-right: 0.15rem;
  margin: 0 -0.15rem 0 0;
}

.card-vis-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.48rem 0.62rem;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.card-vis-row:hover {
  background: color-mix(in srgb, var(--surface) 94%, var(--teal) 6%);
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
}

.card-vis-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
  flex: 1;
}

.card-vis-row-title {
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.card-vis-row-sub {
  display: block;
  line-height: 1.35;
  margin-top: 0.06rem;
}

.other-cards-root {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  align-items: start;
}

.other-cards-root[data-other-layout="auto"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.other-cards-root[data-other-layout="double"] {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .other-cards-root[data-other-layout="double"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.other-cards-root[data-other-layout="single"] {
  grid-template-columns: 1fr;
  max-width: 48rem;
}
.other-cards-root > .panel-vis-banner,
.other-cards-root > .panel-vis-empty {
  grid-column: 1 / -1;
}
.other-cards-root > .other-card {
  min-width: 0;
}

.other-cards-root > .dnd-drop-placeholder {
  min-width: 0;
}

.other-cards-root > .other-card {
  scroll-margin-top: 0.85rem;
  scroll-margin-bottom: 1.5rem;
  padding: 0.62rem 0.78rem;
  border-radius: 14px;
}
.other-cards-root > .other-card.other-card--editing {
  outline: 2px solid color-mix(in srgb, var(--teal) 48%, var(--line));
  outline-offset: 2px;
}

#panel-other .panel-head-hint {
  margin-bottom: 0.55rem;
}

.other-inline-add {
  margin-bottom: 0.65rem;
}

.other-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  flex-wrap: wrap;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.42rem;
}

.other-card-head-lead {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.08rem;
  flex-shrink: 0;
  padding-top: 0.12rem;
}
.other-card-meta {
  flex: 1;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-left: -0.04rem;
  min-height: 0;
  align-self: flex-start;
}

.other-topic-display {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.other-desc-readonly {
  margin: 0;
  line-height: 1.35;
}

.other-topic-input {
  width: 100%;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
}
.other-desc-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 0.84rem;
  resize: vertical;
  min-height: 2.15rem;
  font-family: inherit;
  color: inherit;
}
.other-topic-input:focus {
  outline: none;
}

.other-desc-input:focus {
  outline: none;
  border-bottom-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}
.other-head-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
  align-items: center;
  align-self: flex-start;
  margin-left: 0.35rem;
  padding-top: 0.08rem;
}

.other-card-head .other-card-collapse-btn,
.other-card-head .other-card-drag {
  flex-shrink: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  min-height: 1.45rem;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  line-height: 1;
  letter-spacing: -0.08em;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.other-card-head .other-card-drag {
  cursor: grab;
  font-size: 1.02rem;
  color: var(--teal);
}

.other-card-head .other-card-collapse-btn {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.other-card-head .other-card-drag:active {
  cursor: grabbing;
}
html[data-theme="light"] .other-card-head .other-card-collapse-btn,
html[data-theme="light"] .other-card-head .other-card-drag {
 border: none;
  background: transparent;
}

.other-card-head .other-card-collapse-btn:hover:not(:disabled) {
  background: transparent;
  border: none;
  color: var(--muted);
  filter: none;
}

.other-card-head .other-card-drag:hover:not(:disabled) {
  background: transparent;
  border: none;
  filter: none;
  color: color-mix(in srgb, var(--teal) 82%, #14532d);
}

html[data-theme="light"] .other-card-head .other-card-collapse-btn:hover:not(:disabled) {
  background: transparent;
  border: none;
  color: var(--muted);
  filter: none;
}

html[data-theme="light"] .other-card-head .other-card-drag:hover:not(:disabled) {
  background: transparent;
  border: none;
  filter: none;
  color: color-mix(in srgb, var(--teal) 72%, #14532d);
}

.other-card-head .other-card-collapse-btn:focus-visible,
.other-card-head .other-card-drag:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 55%, transparent);
  outline-offset: 2px;
}

.other-head-actions .other-card-edit-btn {
  border-width: 1px;
  border-style: solid;
}

.other-add-rich-field {
  margin-top: 0.15rem;
}
.other-add-rich-toolbar-host {
  min-height: 2.35rem;
}
.other-add-rich-editor-host {
  min-height: clamp(120px, 22vh, 220px);
}

.other-rich-card-editor-host {
  width: 100%;
  min-width: 0;
}
.other-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.45rem;
  margin-bottom: 0.45rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 65%, var(--panel));
}

.other-rich-toolbar-btn {
  padding: 0.32rem 0.48rem !important;
  min-height: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 8px;
}

.other-rich-toolbar-btn--active:not(:hover) {
  background: color-mix(in srgb, var(--teal) 18%, transparent) !important;
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 35%, var(--line)) !important;
}

.other-rich-toolbar-sep {
  width: 1px;
  height: 1.35rem;
  background: var(--line);
  margin: 0 0.1rem;
  flex-shrink: 0;
}

.other-rich-editor-shell {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.other-rich-editor-prose.ProseMirror,
.other-rich-editor-mount .ProseMirror {
  min-height: clamp(180px, 36vh, 340px);
  max-height: min(52vh, 28rem);
  overflow-y: auto;
  padding: 0.55rem 0.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  outline: none;
  color: var(--text);
}

.other-rich-editor-prose.ProseMirror:focus-visible,
.other-rich-editor-mount .ProseMirror:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 45%, transparent);
  outline-offset: -2px;
}
.other-rich-editor-prose.ProseMirror p,
.other-rich-editor-mount .ProseMirror p {
  margin: 0 0 0.55rem;
}

.other-rich-editor-prose.ProseMirror p:last-child,
.other-rich-editor-mount .ProseMirror p:last-child {
  margin-bottom: 0;
}

.other-rich-editor-prose.ProseMirror h2,
.other-rich-editor-mount .ProseMirror h2,
.other-rich-editor-prose.ProseMirror h3,
.other-rich-editor-mount .ProseMirror h3,
.other-rich-editor-prose.ProseMirror h4,
.other-rich-editor-mount .ProseMirror h4 {
  margin: 0.65rem 0 0.4rem;
  font-weight: 720;
  line-height: 1.28;
}

.other-rich-editor-prose.ProseMirror h2,
.other-rich-editor-mount .ProseMirror h2 {
  font-size: 1.15rem;
}

.other-rich-editor-prose.ProseMirror h3,
.other-rich-editor-mount .ProseMirror h3 {
  font-size: 1.02rem;
}

.other-rich-editor-prose.ProseMirror h4,
.other-rich-editor-mount .ProseMirror h4 {
  font-size: 0.95rem;
}

.other-rich-editor-prose.ProseMirror ul,
.other-rich-editor-mount .ProseMirror ul,
.other-rich-editor-prose.ProseMirror ol,
.other-rich-editor-mount .ProseMirror ol {
  margin: 0 0 0.55rem;
  padding-left: 1.25rem;
}

.other-rich-editor-prose.ProseMirror li,
.other-rich-editor-mount .ProseMirror li {
  margin: 0.15rem 0;
}

/* Checklists (rich notes - TipTap task list) */
.other-rich-editor-prose.ProseMirror ul[data-type="taskList"],
.other-rich-editor-mount .ProseMirror ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.other-rich-editor-prose.ProseMirror li[data-type="taskItem"],
.other-rich-editor-mount .ProseMirror li[data-type="taskItem"] {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.28rem 0;
}

.other-rich-editor-prose.ProseMirror li[data-type="taskItem"] > label,
.other-rich-editor-mount .ProseMirror li[data-type="taskItem"] > label {
  flex-shrink: 0;
  margin: 0.12rem 0 0;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.other-rich-editor-prose.ProseMirror li[data-type="taskItem"] > label input[type="checkbox"],
.other-rich-editor-mount .ProseMirror li[data-type="taskItem"] > label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: color-mix(in srgb, var(--teal) 78%, var(--teal) 22%);
  cursor: pointer;
}

.other-rich-editor-prose.ProseMirror li[data-type="taskItem"] > div,
.other-rich-editor-mount .ProseMirror li[data-type="taskItem"] > div {
  flex: 1;
  min-width: 0;
}
.other-rich-editor-prose.ProseMirror li[data-type="taskItem"] p,
.other-rich-editor-mount .ProseMirror li[data-type="taskItem"] p {
  margin-bottom: 0.25rem;
}

.other-rich-editor-prose.ProseMirror table,
.other-rich-editor-mount .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.86rem;
}
.other-rich-editor-prose.ProseMirror th,
.other-rich-editor-mount .ProseMirror th,
.other-rich-editor-prose.ProseMirror td,
.other-rich-editor-mount .ProseMirror td {
  border: 1px solid var(--line);
  padding: 0.28rem 0.4rem;
  vertical-align: top;
}

.other-rich-readonly {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}

.other-rich-readonly p {
  margin: 0 0 0.55rem;
}

.other-rich-readonly p:last-child {
  margin-bottom: 0;
}

.other-rich-readonly h2,
.other-rich-readonly h3,
.other-rich-readonly h4 {
  margin: 0.65rem 0 0.4rem;
  font-weight: 720;
  line-height: 1.28;
}
.other-rich-readonly h2 {
  font-size: 1.15rem;
}

.other-rich-readonly h3 {
  font-size: 1.02rem;
}
.other-rich-readonly h4 {
  font-size: 0.95rem;
}

.other-rich-readonly ul,
.other-rich-readonly ol {
  margin: 0 0 0.55rem;
  padding-left: 1.25rem;
}
.other-rich-readonly ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.other-rich-readonly li[data-type="taskItem"] {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.28rem 0;
  list-style: none;
}

.other-rich-readonly li[data-type="taskItem"] > label {
  flex-shrink: 0;
  margin: 0.12rem 0 0;
  line-height: 1;
}

.other-rich-readonly li[data-type="taskItem"] > label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: color-mix(in srgb, var(--teal) 78%, var(--teal) 22%);
  pointer-events: none;
  cursor: default;
}

.other-rich-readonly li[data-type="taskItem"] > div {
  flex: 1;
  min-width: 0;
}

.other-rich-readonly table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.86rem;
}
.other-rich-readonly th,
.other-rich-readonly td {
  border: 1px solid var(--line);
  padding: 0.28rem 0.4rem;
  vertical-align: top;
}

@media (max-width: 520px) {
  .other-rich-toolbar {
  gap: 0.28rem;
  }
}
.other-type-pill {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.1rem 0.42rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.other-body-readonly {
  white-space: pre-wrap;
  line-height: 1.52;
  font-size: 0.92rem;
}

.other-body-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 10rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  padding: 0.5rem;
  line-height: 1.45;
  resize: vertical;
}
.other-lines-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  padding: 0.5rem;
  line-height: 1.45;
  resize: vertical;
}
.other-mini-hint {
  margin: 0.35rem 0 0;
}
.other-list-readonly {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.45;
}
/**
  * Walletly custom checkboxes - soft inset, rounded tile; mint fill + checkmark when checked.
  * Theme switches (.theme-switch) stay visually hidden and are not styled here.
  */
input[type="checkbox"].walletly-check {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1.5px solid color-mix(in srgb, var(--line) 50%, var(--muted) 50%);
  background-color: var(--panel);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 0.72rem 0.72rem;
  /* Symmetric inset - avoids a “gap” above the control (top-only --card-inset looked mis-centered on hover). */
  box-shadow:
  inset 0 1px 1px rgba(0, 0, 0, 0.2),
  inset 0 -1px 1px rgba(255, 255, 255, 0.04),
  0 1px 2px var(--shade);
  cursor: pointer;
  transition:
  border-color 0.18s ease,
  background-color 0.18s ease,
  box-shadow 0.2s ease,
  transform 0.12s ease;
  vertical-align: middle;
}

html[data-theme="light"] input[type="checkbox"].walletly-check {
  box-shadow:
  inset 0 1px 2px rgba(15, 23, 42, 0.05),
  0 1px 2px rgba(15, 23, 42, 0.05);
}

input[type="checkbox"].walletly-check:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--teal) 48%, var(--line) 52%);
  box-shadow:
  inset 0 0 0 1px color-mix(in srgb, var(--teal) 28%, transparent),
  0 2px 10px -3px color-mix(in srgb, var(--teal) 40%, transparent);
}
input[type="checkbox"].walletly-check:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 58%, transparent);
  outline-offset: 2px;
}

input[type="checkbox"].walletly-check:active:not(:disabled) {
  transform: scale(0.92);
 }

input[type="checkbox"].walletly-check:checked {
  background-color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 72%, rgba(0, 0, 0, 0.28) 28%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' d='M3.7%208.1L6.9%2011.3L12.6%203.7'/%3E%3C/svg%3E");
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.28),
  inset 0 -1px 0 rgba(0, 0, 0, 0.14),
  0 2px 14px -4px rgba(54, 179, 126, 0.65);
}

input[type="checkbox"].walletly-check:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.other-todo-row .walletly-check {
  margin-top: 0.12rem;
}
.reminder-done-label .walletly-check {
  margin-top: 0.06rem;
}
.reminder-alert-enable-row .walletly-check {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.other-todo-list {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.other-todo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.other-todo-input {
  flex: 1;
  min-width: 0;
}

.other-todo-label {
  flex: 1;
  line-height: 1.45;
}
.other-todo-row:has(input[type="checkbox"]:checked) .other-todo-label {
  text-decoration: line-through;
  opacity: 0.78;
}

.other-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.other-table th,
.other-table td {
  border: 1px solid var(--line);
  padding: 0.22rem 0.35rem;
  vertical-align: middle;
}
.other-table th {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.other-table .input {
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.3rem 0.35rem;
  font: inherit;
  color: inherit;
}

.other-cell-readonly {
  display: block;
  min-height: 1.45rem;
  padding: 0.3rem 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.other-table:not(.other-table--editing) th {
  font-weight: 700;
}
.other-table-actions {
  width: 2.6rem;
  text-align: center;
}

.other-table:not(.other-table--editing) .other-table-actions {
  display: none;
}

.other-table .grid-col-head-edit .input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .panels {
  padding: 0.45rem 1rem 1.5rem;
  }

  .file-label-wrap {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  }

  .user-menu {
  max-width: min(180px, 64vw);
  }

  .dash-cal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.1rem;
  padding-bottom: 0.35rem;
  }

  .dash-cal-scroll-inner {
  min-width: 38rem;
  }

  .dash-cal-cell {
  min-height: 3.75rem;
  padding: 0.28rem 0.22rem 0.35rem;
  font-size: 0.62rem;
  }

  .dash-cal-daynum {
  font-size: 0.68rem;
  }

  /* Mobile: horizontal scroll for wide tables (desktop unchanged). */
  .overflow,
  .table-scroll,
  .savings-table-wrap,
  .monthly-summary-table-wrap,
  .other-card-body:has(.other-table) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  }

  .overflow table.data,
  .table-scroll table.data,
  .savings-table-wrap .savings-grid-table,
  .monthly-summary-table-wrap table,
  .other-card-body .other-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  }

  .overflow table.data th,
  .overflow table.data td,
  .table-scroll table.data th,
  .table-scroll table.data td,
  .savings-table-wrap .savings-grid-table th,
  .savings-table-wrap .savings-grid-table td,
  .monthly-summary-table-wrap table th,
  .monthly-summary-table-wrap table td,
  .other-card-body .other-table th,
  .other-card-body .other-table td {
  word-break: normal;
  overflow-wrap: normal;
  }

  .overflow table.data th.num-col,
  .overflow table.data td.num-col,
  .table-scroll table.data th.num-col,
  .table-scroll table.data td.num-col {
  min-width: 6.5rem;
  white-space: nowrap;
  }

  .overflow table.data th:not(.actions-th):not(.num-col),
  .overflow table.data td:not(.actions-cell):not(.num-col),
  .table-scroll table.data th:not(.actions-th):not(.num-col),
  .table-scroll table.data td:not(.actions-cell):not(.num-col) {
  min-width: 5.5rem;
  white-space: nowrap;
}
  .overflow table.data td.actions-cell,
  .overflow table.data th.actions-th,
  .table-scroll table.data td.actions-cell,
  .table-scroll table.data th.actions-th {
  min-width: 5.75rem;
  white-space: nowrap;
  }

  .savings-table-wrap .savings-grid-table th,
  .savings-table-wrap .savings-grid-table td:not(.savings-row-actions) {
  min-width: 5.5rem;
  white-space: nowrap;
  }

  .savings-table-wrap .savings-cell-readonly {
  white-space: nowrap;
  word-break: normal;
}
  .other-card-body .other-table th,
  .other-card-body .other-table td:not(.other-table-actions) {
  min-width: 5.5rem;
  white-space: nowrap;
  }
}