/* app.css — LinkIt's full design system (David, §10). "Calm canvas, vivid connections": a quiet
   near-monochrome shell so the ONE thing with color is the data (typed object hues). Built on the
   theme.css tokens (light + dark, data-theme beats OS). No framework, no build. */

/* ============================ Base ============================ */
[hidden] { display: none !important; } /* the HTML hidden attribute must beat any author display (e.g. .btn) */
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; border: 2px solid var(--bg); }
b { font-weight: 700; }

/* ============================ App shell / header ============================ */
.app-header {
  display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-brand);
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); }
.brand-logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-sm); }
.brand-word b { color: var(--accent); }
.app-nav { display: flex; gap: 2px; margin-left: 6px; }
.app-nav a { padding: 7px 13px; border-radius: 8px; color: var(--ink-soft); font-weight: 600; font-size: .92rem;
  transition: background .12s, color .12s; }
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a.active { background: var(--accent-soft); color: var(--accent); }
.header-search { margin-left: auto; position: relative; display: flex; align-items: center; }
.header-search svg { position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none; }
.header-search input { width: 230px; padding: 8px 12px 8px 34px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface-2); color: var(--ink); font-size: .9rem; outline: none; transition: width .18s, box-shadow .12s, border-color .12s; }
.header-search input:focus { width: 270px; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 8px; }
.gear-btn { width: 36px; height: 36px; }
/* Folder-sync status pill (#165): subtle, non-blocking. Hidden until a sync is running/just finished. */
.sync-indicator { display: none; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  color: var(--ink-faint); padding: 3px 8px; border-radius: 999px; white-space: nowrap; user-select: none; }
.sync-indicator.show { display: inline-flex; }
.sync-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sync-indicator.is-syncing { color: var(--accent); }
.sync-indicator.is-syncing::before { animation: sync-pulse 1s ease-in-out infinite; }
.sync-indicator.is-synced { color: var(--ok); }
@keyframes sync-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 720px) { .sync-indicator { display: none !important; } } /* keep the mobile header uncluttered */
.app-main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 72px; }

/* ============================ Primitives ============================ */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 9px;
  font-weight: 600; font-size: .9rem; border: 1px solid transparent; background: var(--surface-2); color: var(--ink);
  transition: filter .12s, background .12s, transform .04s, border-color .12s; }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 5px 11px; font-size: .82rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--surface); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-ghost { background: transparent; color: var(--danger); border-color: transparent; }
.btn.danger-ghost:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn svg { flex: none; }

.icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--ink-soft); display: inline-grid; place-items: center; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:focus-visible { outline: none; color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }

.input { width: 100%; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: .92rem; outline: none; transition: border-color .12s, box-shadow .12s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.compact { width: auto; padding: 6px 9px; font-size: .86rem; }
select.input { width: auto; cursor: pointer; }
textarea.input { min-height: 60px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .88rem; cursor: pointer; white-space: nowrap; }
.check.compact { font-size: .8rem; }
.check input, .tree input, .def-row input[type=checkbox] { accent-color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font-size: .8rem; font-weight: 600; transition: all .12s; }
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chip.small { padding: 3px 9px; font-size: .74rem; }
.chip.chip-label.on { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); }

.type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
  font-size: .76rem; font-weight: 700; background: var(--surface-2); color: var(--ink-soft); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.section-label { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.muted { color: var(--ink-faint); }
.spacer { flex: 1; }

/* avatars — typed color + salvaged white glyph (or initials) */
.avatar { display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; overflow: hidden; line-height: 1; }
.avatar-glyph { width: 58%; height: 58%; object-fit: contain; }
.portrait { width: 100%; height: 100%; object-fit: cover; }
.glyph-tile { display: inline-block; background: var(--ink-soft);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }

/* view header */
.view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.view-title h1 { font-family: var(--font-brand); font-size: 1.7rem; letter-spacing: -.02em; }
.view-sub { display: block; font-size: .88rem; margin-top: 2px; }
.view-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-glyph { color: var(--ink-faint); }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.view-error { padding: 16px; background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid var(--danger); border-radius: var(--r-md); color: var(--danger); }

/* ============================ Objects browse (§10.4) ============================ */
.browse-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 240px; }
.search-wrap svg { position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none; }
.search-input { padding-left: 34px; }
.result-count { font-size: .82rem; margin: 0 2px 12px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.obj-card { position: relative; display: flex; align-items: center; gap: 13px; text-align: left; padding: 16px 14px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  cursor: pointer; overflow: hidden; transition: box-shadow .14s, transform .08s, border-color .14s; }
.obj-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink-faint) 30%, var(--line)); }
.obj-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.obj-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.obj-card-label { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-card > svg { color: var(--ink-faint); flex: none; }

/* ============================ Object detail (§10.5 / §10.6) ============================ */
.detail-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: .82rem; }
.crumb-link { color: var(--ink-soft); font-weight: 600; }
.crumb-link:hover { color: var(--accent); }
.crumb { color: var(--ink-faint); font-weight: 600; }
.crumb.current { color: var(--ink); font-weight: 700; }
.crumb-sep { color: var(--ink-faint); opacity: .6; }

.detail-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }

.obj-hero { display: flex; gap: 16px; align-items: center; padding: 20px 22px; }
.hero-avatar-wrap { position: relative; cursor: pointer; flex: none; }
.hero-avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.hero-avatar-edit { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.hero-avatar-wrap:hover .hero-avatar-edit { color: var(--accent); }
.hero-main { flex: 1; min-width: 0; }
.hero-label { width: 100%; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  background: transparent; border: none; border-bottom: 2px solid transparent; padding: 2px 0; color: var(--ink); }
.hero-label:focus { outline: none; border-bottom-color: var(--accent); }
.hero-label.small { font-size: 1.2rem; }
.hero-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.hero-crumb { color: var(--ink-faint); font-size: .8rem; font-weight: 600; }
.hero-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.saved-flag { font-size: .76rem; opacity: 0; transition: opacity .2s; }
.saved-flag.show { opacity: 1; color: var(--ok); }

/* property rows */
.props { padding: 6px 10px 12px; }
.prop-row { display: grid; grid-template-columns: 152px 1fr auto; align-items: start; gap: 10px; padding: 8px 12px;
  border-radius: 9px; transition: background .1s; }
.prop-row:hover { background: var(--surface-2); }
.prop-key { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .86rem; font-weight: 600; padding-top: 6px; }
.prop-key svg { color: var(--ink-faint); flex: none; }
.prop-key span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-val { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.prop-remove { opacity: 0; width: 26px; height: 26px; border-radius: 6px; color: var(--ink-faint);
  display: grid; place-items: center; transition: opacity .1s, background .1s, color .1s; align-self: center; }
.prop-row:hover .prop-remove { opacity: 1; }
.prop-remove:hover { background: var(--surface-3); color: var(--danger); }
.derived-slot { display: inline-flex; }
.derived-tag { font-size: .66rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 20px; }
.add-prop { display: flex; align-items: center; gap: 6px; margin: 6px 8px 2px; padding: 9px 12px; width: calc(100% - 16px);
  border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: var(--ink-faint); font-weight: 600; font-size: .86rem; transition: all .12s; }
.add-prop:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Backfill banner (§111): add-only prompt to pull new type attributes onto an older object. */
.backfill-banner { display: flex; align-items: center; gap: 10px; margin: 4px 8px 8px; padding: 10px 12px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.backfill-ico { display: inline-flex; color: var(--accent); flex: none; margin-top: 1px; align-self: flex-start; }
.backfill-body { flex: 1; min-width: 0; }
.backfill-msg { font-size: .86rem; font-weight: 600; color: var(--ink); }
.backfill-note { font-size: .76rem; margin-top: 1px; }
.backfill-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  padding: 8px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .84rem; transition: filter .12s; }
.backfill-btn:hover { filter: brightness(1.06); }
.backfill-btn svg { flex: none; }
@media (max-width: 480px) { .backfill-banner { flex-wrap: wrap; } .backfill-btn { width: 100%; justify-content: center; } }

/* typed value cells */
.cell { flex: 1; min-width: 0; }
.cell-input { width: 100%; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink);
  padding: 5px 8px; font-size: .94rem; transition: border-color .12s, background .12s; }
.prop-row:hover .cell-input, .cell-input:focus { border-color: var(--line); background: var(--surface); }
.cell-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cell-input.grow { resize: none; overflow: hidden; line-height: 1.45; }
.cell-select { cursor: pointer; }
.cell-linkrow { display: flex; align-items: center; gap: 6px; width: 100%; }
.cell-action { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); flex: none; }
.cell-action:hover { filter: brightness(1.05); }
.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 40px; height: 23px; border-radius: 20px; background: var(--surface-3); transition: background .15s; display: inline-block; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb, .switch input:checked ~ .switch-track { }
.switch input:checked + .switch-track > .switch-thumb { transform: translateX(17px); }

.image-cell { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.image-cell-thumb { width: 128px; height: 88px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.image-cell-actions { display: flex; gap: 6px; }
.image-cell-empty { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px dashed var(--line);
  border-radius: 9px; color: var(--ink-faint); background: var(--surface-2); font-weight: 600; font-size: .86rem; }
.image-cell-empty:hover { color: var(--accent); border-color: var(--accent); }
.mini-img { width: 40px; height: 30px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }

.ref-cell { display: inline-flex; align-items: center; gap: 6px; }
.pill-ref { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .86rem; }
.pill-ref:hover { border-color: var(--accent); }
.ref-empty { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px dashed var(--line);
  border-radius: 20px; color: var(--ink-faint); font-weight: 600; font-size: .84rem; }
.ref-empty:hover { color: var(--accent); border-color: var(--accent); }

/* relationships side panel (§10.6) */
/* Right sidebar column (task #153): Relationships + Tags stacked; the column sticks (not each panel). */
.detail-right { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 76px; align-self: start; min-width: 0; }
.tags-panel .panel-head h2 svg { color: var(--ink-faint); flex: none; }
.tags-panel-body { padding: 12px 14px 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.count-badge { background: var(--surface-3); color: var(--ink-soft); font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 20px; }
.rel-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.rel-list { padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.rel-item { display: flex; align-items: center; gap: 4px; border-radius: 10px; transition: background .1s; }
.rel-item:hover { background: var(--surface-2); }
.rel-item-main { flex: 1; display: flex; align-items: center; gap: 11px; padding: 9px 8px; min-width: 0; text-align: left; }
.rel-who { min-width: 0; display: flex; flex-direction: column; }
.rel-nm { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-role { font-size: .78rem; color: var(--ink-soft); }
.rel-role b { color: var(--accent); font-weight: 700; }
.rel-inspect { width: 30px; height: 30px; margin-right: 4px; }
.rel-none { padding: 14px; text-align: center; font-size: .88rem; }
.rel-empty-new { padding: 40px 20px; text-align: center; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.add-rel { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 8px 10px; padding: 10px 12px;
  width: calc(100% - 16px); border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .88rem; }
.add-rel:hover { filter: brightness(1.03); }

/* ============================ Three-pane inspector (§10.10) ============================ */
.insp-top { margin-bottom: 6px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-weight: 600; font-size: .86rem; }
.back-link:hover { color: var(--accent); }
.insp-head { text-align: center; margin-top: 6px; }
.insp-head h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.insp-head p { font-size: .92rem; margin-top: 2px; }
.insp { display: grid; grid-template-columns: 1fr minmax(300px, 1.15fr) 1fr; margin-top: 18px; align-items: stretch; }
.insp-pane { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.insp-pane.left { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: none; position: relative; }
.insp-pane.right { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: none; position: relative; }
.pane-side-tag { position: absolute; top: 14px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.obj-pane-head { width: 100%; padding: 20px 18px 14px; text-align: center; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; align-items: center; }
.obj-pane-head .avatar { width: 64px; height: 64px; font-size: 1.4rem; margin-bottom: 10px; }
.obj-pane-head:hover h2 { color: var(--accent); }
.obj-pane-head h2 { font-size: 1.15rem; }
.pane-crumb { margin-top: 5px; color: var(--ink-faint); font-size: .78rem; font-weight: 600; }
.mini-props { padding: 8px 12px 14px; }
.mini-prop { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-radius: 7px; font-size: .86rem; }
.mini-prop:hover { background: var(--surface-2); }
.mini-prop .k { color: var(--ink-soft); font-weight: 600; }
.mini-prop .v { color: var(--ink); text-align: right; }
.mini-none { padding: 8px; font-size: .84rem; }

.insp-middle { background: linear-gradient(180deg, var(--accent-soft), var(--surface)); border: 2px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 3; margin: -10px -4px; display: flex; flex-direction: column; }
.mid-top { padding: 16px 18px 8px; text-align: center; }
.link-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .78rem; box-shadow: var(--shadow-sm); }
.two-rel { padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.dir-card { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; box-shadow: var(--shadow-sm); }
.dir-flow { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.dir-flow .who { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44%; }
.dir-flow .arw { flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; position: relative; min-width: 22px; }
.dir-flow .arw::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border-left: 7px solid var(--accent-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.dir-label { font-size: 1.15rem; font-weight: 800; color: var(--accent); text-align: center; letter-spacing: -.01em; }
.dir-read { text-align: center; font-size: .8rem; margin-top: 3px; }
.mid-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: .68rem; font-weight: 800; letter-spacing: .1em; padding: 0 4px; }
.mid-divider::before, .mid-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.link-attrs { border-top: 1px dashed var(--line); margin-top: 2px; padding: 12px 18px 6px; }
.link-attrs .section-label { display: block; margin-bottom: 6px; }
.link-attr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 6px; border-radius: 7px; font-size: .88rem; }
.link-attr:hover { background: var(--surface-2); }
.link-attr .k { color: var(--ink-soft); font-weight: 600; flex: none; }
.link-attr .v { flex: 1; text-align: right; }
.link-attr .v .cell { text-align: left; }
.link-attr-list { display: flex; flex-direction: column; gap: 1px; }
.swap-hint { text-align: center; font-size: .74rem; color: var(--ink-faint); padding: 6px 18px 2px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.mid-actions { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; }
.mid-actions .btn { flex: 1; justify-content: center; }
.row-x { width: 26px; height: 26px; flex: none; }

/* ============================ Graph (§10.7) ============================ */
.graph-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.graph-side { display: flex; flex-direction: column; gap: 14px; }
.filter-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px 15px; }
.filter-card h3 { margin-bottom: 12px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tree { list-style: none; font-size: .9rem; }
.tree li { padding: 1px 0; }
.tree .node { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 7px; cursor: pointer; }
.tree .node:hover { background: var(--surface-2); }
.tree .lbl { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.tree .cnt { color: var(--ink-faint); font-size: .76rem; font-weight: 700; }
.tree-actions { display: flex; gap: 6px; margin-top: 10px; }

.graph-stage { position: relative; height: 620px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/22px 22px, var(--surface); }
.cy-host { position: absolute; inset: 0; }
.graph-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.graph-toolbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 5; pointer-events: none; }
.graph-toolbar > * { pointer-events: auto; }
.graph-scope { background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; font-size: .83rem; font-weight: 600; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.graph-scope b { color: var(--ink); }
.graph-actions { display: flex; gap: 8px; }
.zoom-ctl { position: absolute; top: 54px; right: 12px; z-index: 5; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.zoom-ctl button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.zoom-ctl button:last-child { border-bottom: none; }
.zoom-ctl button:hover { background: var(--surface-2); color: var(--ink); }
.graph-legend { position: absolute; bottom: 12px; left: 12px; z-index: 5; padding: 10px 13px; border-radius: 11px; box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); }
.graph-legend .row { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-soft); padding: 2px 0; }

/* ============================ Type manager (§10.8) ============================ */
.types-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.type-node { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.type-node:hover { background: var(--surface-2); }
.type-node.sel { background: var(--accent-soft); }
.type-node-main { flex: 1; display: flex; align-items: center; gap: 9px; padding: 7px 8px; text-align: left; min-width: 0; }
.type-node-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builtin-tag { font-size: .62rem; font-weight: 700; color: var(--ink-faint); background: var(--surface-3); padding: 1px 6px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.type-node .cnt { margin-left: auto; font-size: .76rem; font-weight: 700; }
/* Sticky config panel (task #138): as the (long) type/tag list scrolls, the editor stays pinned in view
   so selecting any item shows its config without scrolling back to the top. Caps at viewport height and
   scrolls internally so tall editors stay fully reachable. Reset to static in the single-column layout. */
.type-editor-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 22px;
  position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.type-editor-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.type-editor-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.type-editor-title { flex: 1; min-width: 0; }
.type-fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }
.field-hint { font-size: .78rem; }
.color-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.color-input { width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface); cursor: pointer; }
.swatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.swatch:hover { transform: scale(1.1); }
.icon-choose { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: .88rem; align-self: flex-start; }
.icon-choose:hover { border-color: var(--accent); }
.icon-none { font-size: .84rem; }
.inherited-list { display: flex; flex-direction: column; gap: 2px; }
.inherited-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 7px; background: var(--surface-2); opacity: .8; }
.inh-key { font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.inh-type { font-family: var(--font-mono); font-size: .74rem; }
.inh-from { font-size: .74rem; font-weight: 600; }
.inh-from.override { color: var(--warn); }
.defs-box { display: flex; flex-direction: column; gap: 6px; }
.def-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.def-row input.input.compact:first-of-type { flex: 1 1 140px; }
.type-editor-actions { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }

/* ============================ Trash ============================ */
.trash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.trash-h { font-size: 1rem; margin-bottom: 10px; color: var(--ink-soft); }
.trash-section { display: flex; flex-direction: column; gap: 8px; }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.trash-linkbadge { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.trash-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trash-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-ty { font-size: .8rem; }
.trash-actions { display: flex; gap: 6px; flex: none; }
.trash-empty { padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); font-size: .9rem; }

/* ============================ Toasts / modals ============================ */
.toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 300; align-items: center; }
.toast { padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; cursor: pointer; font-size: .9rem; font-weight: 600; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--ok); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }

.modal-overlay { position: fixed; inset: 0; background: rgba(10,12,18,.5); display: grid; place-items: start center; z-index: 200; padding: 8vh 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
/* Mobile: cap every modal to the viewport (dvh so the URL bar can't cause overflow; vh fallback first)
   and let it scroll INSIDE itself. overscroll-behavior:contain stops the touch scroll from chaining to
   the page behind it. rel-editor/pick/icon get a pinned header+footer variant of this below. */
.modal { background: var(--surface); border-radius: var(--r-lg); padding: 22px; max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
/* Background scroll-lock: while ANY modal overlay is mounted, freeze the page behind it. Pure CSS via
   :has() (no JS wiring across the 5+ modal creators; auto-handles stacked modals + cleanup on close). */
html:has(.modal-overlay), body:has(.modal-overlay) { overflow: hidden; }
.modal-title { font-size: 1.15rem; margin-bottom: 8px; }
.modal-message { color: var(--ink-soft); margin-bottom: 16px; }
.modal-label { display: block; color: var(--ink-soft); font-size: .85rem; margin-bottom: 6px; }
.modal .input { margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* pick / type-select modals */
.pick-modal, .rel-editor, .icon-modal { max-width: 540px; }
.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pick-scope { font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.pick-list { max-height: 46vh; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.pick-row, .type-opt { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; text-align: left; width: 100%; }
.pick-row:hover, .type-opt:hover { background: var(--surface-2); }
.pick-who, .type-opt-body { display: flex; flex-direction: column; min-width: 0; }
.pick-nm, .type-opt-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-ty, .type-opt-path { font-size: .78rem; }
.pick-empty { padding: 20px; text-align: center; }

.icon-modal { max-width: 560px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 48vh; max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; margin-top: 12px; }
.icon-cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); transition: all .1s; }
.icon-cell:hover { background: var(--surface-2); border-color: var(--accent); }
.icon-cell.sel { border-color: var(--accent); background: var(--accent-soft); }
.icon-cell.clear { font-size: .74rem; font-weight: 700; color: var(--ink-faint); }

/* relationship editor modal (§10.9) */
/* Tall modal: pin the title + actions, scroll only the middle body. overflow:hidden overrides the base
   .modal whole-modal scroll so we get the nicer pinned-header behaviour instead. min-height:0 lets the
   flex body actually shrink+scroll inside the 90dvh cap (incl. when the mobile keyboard is up). */
.modal.rel-editor { display: flex; flex-direction: column; overflow: hidden; }
.rel-editor > .modal-title, .rel-editor > .modal-actions, .rel-editor > .rel-editor-error { flex: none; }
.rel-editor-body { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rel-endpoints { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.rel-ep { border: 1px solid var(--line); border-radius: 11px; padding: 10px; position: relative; min-height: 76px; display: flex; flex-direction: column; justify-content: center; }
.rel-ep.pickable { border-style: dashed; }
.rel-ep-tag { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.rel-ep-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; color: var(--ink); }
.rel-ep-obj { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rel-ep-body { display: flex; flex-direction: column; min-width: 0; }
.rel-ep-nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-ep-ty { font-size: .76rem; }
.rel-swap { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); display: grid; place-items: center; }
.rel-swap:hover { color: var(--accent); border-color: var(--accent); }
.rel-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rel-suggest { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.rel-shortcuts { display: flex; gap: 8px; }
.rel-attrs { display: flex; flex-direction: column; gap: 4px; }
.rel-attr-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; }
.rel-attr-row:hover { background: var(--surface-2); }
.rel-attr-key { flex: 0 0 96px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.rel-editor-error { color: var(--danger); font-size: .85rem; font-weight: 600; margin: -4px 0 6px; }

/* ============================ Responsive / mobile (§10.12) ============================ */
@media (max-width: 980px) {
  .detail-wrap { grid-template-columns: 1fr; }
  .detail-right { position: static; }
  .graph-wrap { grid-template-columns: 1fr; }
  .types-wrap { grid-template-columns: 1fr; }
  /* Single-column: the editor sits BELOW the list, so drop the sticky/scroll pinning (#138). */
  .type-editor-col { position: static; max-height: none; overflow: visible; }
  .insp { grid-template-columns: 1fr; }
  .insp-pane.left { border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--line); }
  .insp-pane.right { border-radius: 0 0 var(--r-lg) var(--r-lg); border-left: 1px solid var(--line); }
  .insp-middle { margin: 8px 0; }
}
@media (max-width: 720px) {
  /* Header reflow (task #118): below 720 the search box hides and there's no room for brand + 4 nav
     items + the tools on one line, so the header would overflow and push Install/gear off-screen
     (a horizontal-scroll, off-center mess — and the reason the Install button was unreachable on
     mobile). Instead we WRAP: row 1 = brand (left) + tools (+Object · Install · gear, pinned right),
     row 2 = the nav as a tidy centered strip. Nothing overflows; every control stays reachable. */
  .app-header { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px 10px; }
  .brand { flex: none; }
  .brand-word { display: none; }
  .header-search { display: none; }
  .header-tools { order: 2; margin-left: auto; gap: 6px; }
  .app-nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 2px; justify-content: center; }
  .app-nav a { padding: 7px 12px; font-size: .9rem; white-space: nowrap; }
  .trash-grid { grid-template-columns: 1fr; }
  .rel-labels { grid-template-columns: 1fr; }
  .prop-row { grid-template-columns: 120px 1fr auto; }
}
@media (max-width: 480px) {
  .app-main { padding: 16px 12px 72px; }
  .prop-row { grid-template-columns: 1fr; gap: 2px; }
  .prop-key { padding-top: 0; }
  .prop-remove { position: absolute; right: 8px; top: 8px; }
  .prop-row { position: relative; }
  .rel-endpoints { grid-template-columns: 1fr; }
  .rel-swap { justify-self: center; }
}

/* ============================ Round 2 (v4) ============================ */

/* Header "+ Object" quick-create (§ item 1) */
.header-new { flex: none; }
.header-new svg { flex: none; }
@media (max-width: 720px) { .header-new-label { display: none; } .header-new { padding: 5px 9px; } }

/* Five primary nav items (Objects · Graph · Object Types · Relationship Classes · Settings) — tighten
   the header on mid-size screens so nothing gets pushed off. Below 720 the search box hides entirely. */
@media (max-width: 1120px) {
  .app-nav a { padding: 6px 10px; font-size: .86rem; }
  .header-new-label { display: none; }
  .header-search input { width: 168px; }
  .header-search input:focus { width: 196px; }
}

/* Segmented toggle — Object Types | Relationship Templates (§ item 13) */
.types-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 7px; font-weight: 600; font-size: .85rem; color: var(--ink-soft); background: transparent; transition: background .12s, color .12s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn svg { flex: none; }
.seg-btn.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) { .seg-btn { font-size: .78rem; padding: 6px 9px; } }
a.seg-btn { text-decoration: none; }

/* Blueprints page (task #117): the two-tab control (Object | Relationship Blueprints) sits under the
   page header; the hosted manager renders in the panel below it. */
.blueprints-tabs { margin: 2px 0 18px; }
.blueprints-panel { display: block; }

/* Click-to-choose icon avatar in the type / template editor head (§ item 3) */
.head-avatar-btn { flex: none; border-radius: 13px; padding: 0; background: transparent; border: 2px solid transparent; transition: border-color .12s, transform .06s; position: relative; }
.head-avatar-btn:hover { border-color: var(--accent); }
.head-avatar-btn:active { transform: scale(.97); }

/* Relationship-template list rows */
.reltype-node-body { display: flex; flex-direction: column; min-width: 0; }
.reltype-labels { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-label-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .rel-label-fields { grid-template-columns: 1fr; } }

/* Default Attributes drag-reorder (§ item 6) */
.drag-handle { flex: none; display: inline-grid; place-items: center; width: 22px; height: 28px; color: var(--ink-faint); cursor: grab; border-radius: 6px; }
.drag-handle:hover { color: var(--ink-soft); background: var(--surface-2); }
.drag-handle:active { cursor: grabbing; }
.def-row.dragging { opacity: .5; }
.def-row.drop-into { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Categorized icon picker (§ item 4) */
.icon-scroll { max-height: 52vh; overflow-y: auto; margin-top: 12px; padding-right: 4px; }
.icon-cat + .icon-cat { margin-top: 14px; }
.icon-cat-h { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 2px 7px; position: sticky; top: 0; background: var(--surface); padding: 3px 0; z-index: 1; }
.icon-scroll .icon-grid { max-height: none; overflow: visible; margin-top: 0; }

/* Relationship Inspector — quick +Attribute on each object pane (§ item 9) */
.pane-add-attr { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 12px 14px; padding: 7px 10px;
  width: calc(100% - 24px); border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: var(--ink-faint); font-weight: 600; font-size: .82rem; transition: all .12s; }
.pane-add-attr:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ============================ Settings (§ item 10) ============================ */
.settings-page { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.settings-card-head { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.settings-card-head h2 { font-size: 1.1rem; }
.settings-card-head p { font-size: .86rem; margin-top: 3px; }
.settings-card-body { padding: 6px 20px 18px; }
.setting-block { padding: 16px 0; }
.about-lede { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.about-lede b { color: var(--ink); font-weight: 700; }
.setting-block + .setting-block { border-top: 1px solid var(--line-soft); }
.setting-row-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.setting-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.setting-h { font-size: .98rem; font-weight: 700; }
.setting-sub { font-size: .84rem; margin-top: 2px; }
.setting-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); color: var(--ink-soft); font-size: .86rem; }
.setting-note svg { flex: none; color: var(--ink-faint); }
.setting-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.backup-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: .86rem; }
.backup-dir { color: var(--ink-soft); }
.backup-last { font-size: .82rem; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .74rem; font-weight: 700;
  background: var(--surface-3); color: var(--ink-soft); }
.badge.badge-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.badge.badge-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

/* ============================ Settings hub (Round 3) ============================ */
.settings-layout { display: grid; grid-template-columns: 216px 1fr; gap: 22px; align-items: start; }
.settings-subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 8px; }
.settings-subnav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  color: var(--ink-soft); font-weight: 600; font-size: .9rem; transition: background .12s, color .12s; }
.settings-subnav-item svg { flex: none; color: var(--ink-faint); }
.settings-subnav-item:hover { background: var(--surface-2); color: var(--ink); }
.settings-subnav-item.active { background: var(--accent-soft); color: var(--accent); }
.settings-subnav-item.active svg { color: var(--accent); }
.settings-content { min-width: 0; }

/* Section header inside a Settings sub-page (title + optional action button) */
.settings-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.settings-section-title h2 { font-family: var(--font-brand); font-size: 1.35rem; letter-spacing: -.02em; }
.section-sub { display: block; font-size: .86rem; margin-top: 2px; }

@media (max-width: 860px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-subnav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-subnav-item { padding: 8px 11px; }
}

/* ============================ How-To Guide (Settings → Guide) ============================ */
/* Rendered inside the Settings content column. Reuses the DND Heroes guide reading pattern:
   a sticky in-guide Contents list (wide) or a floating "Contents" button (narrow), plus the
   tiny Markdown renderer's article. Themed off the LinkIt tokens so it reads in light + dark. */
.guide { line-height: 1.65; color: var(--ink); min-width: 0; }
.guide h1 { font-family: var(--font-brand); font-size: 1.7rem; letter-spacing: -.02em; margin: 2px 0 10px; }
.guide h2 { font-family: var(--font-brand); font-size: 1.3rem; letter-spacing: -.01em; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.guide h3 { font-family: var(--font-brand); font-size: 1.08rem; margin: 22px 0 8px; color: var(--accent); }
/* Sticky app header (58px) offset so anchor jumps don't hide the heading under it. */
.guide h1, .guide h2, .guide h3, .guide h4 { scroll-margin-top: 76px; }
.guide p { margin: 10px 0; }
.guide ul, .guide ol { margin: 10px 0 10px 22px; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li { margin: 5px 0; }
.guide li > ul, .guide li > ol { margin: 5px 0 5px 20px; }
.guide strong { font-weight: 700; }
.guide em { font-style: italic; }
.guide code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 5px; font-size: .9em; font-family: var(--font-mono); }
.guide hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.guide a { color: var(--accent); text-decoration: underline; }
.guide a.guide-link { cursor: pointer; }
.guide a.guide-link:hover { filter: brightness(1.1); }

.guide blockquote {
  margin: 14px 0; padding: 10px 14px;
  background: var(--surface-2); border-left: 4px solid var(--accent-2);
  border-radius: var(--r-sm); color: var(--ink);
}
.guide blockquote p { margin: 0; }

/* Tables scroll horizontally inside their own container so the page never scrolls sideways. */
.guide-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
.guide table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .92rem; }
.guide th, .guide td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide thead th { background: var(--surface-2); font-family: var(--font-brand); }

/* In-page navigation: sticky side-nav on wide screens, floating button on narrow. */
.guide-layout { display: flex; align-items: flex-start; gap: 28px; }
.guide-layout .guide { flex: 1 1 auto; min-width: 0; }

.guide-toc {
  flex: 0 0 200px; position: sticky; top: 76px; align-self: flex-start;
  max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.guide-toc-title { font-family: var(--font-brand); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px; }
.guide-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-toc-link { display: block; padding: 6px 8px; border-radius: var(--r-sm); font-size: .85rem; color: var(--ink-soft); cursor: pointer; border-left: 3px solid transparent; }
.guide-toc-link:hover { background: var(--surface-2); color: var(--ink); }
.guide-toc-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Floating "Contents" button: hidden on wide screens; on narrow it appears after scrolling. */
.guide-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  display: none; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: .9rem; box-shadow: var(--shadow); border: none; cursor: pointer;
}
.guide-fab:hover { filter: brightness(1.08); }

/* Below the Settings single-column breakpoint, drop the in-guide side-nav for the floating button. */
@media (max-width: 1040px) {
  .guide-layout { display: block; }
  .guide-toc { display: none; }
  .guide-fab.show { display: inline-flex; }
}

/* ============================ Nested Tags (task #108) ============================ */

/* --- Object detail: Tags section (below the property panel) --- */
.obj-tags { margin-top: 14px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.obj-tags-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.obj-tags-head svg { color: var(--ink-faint); }

/* --- The tag chip (applied tags + card mini-chips) --- */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-empty { font-size: .84rem; padding: 2px 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px 4px 9px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); font-size: .82rem; font-weight: 600; color: var(--ink); }
.tag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.tag-chip-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-chip-x { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 1px;
  border-radius: 50%; color: var(--ink-faint); background: transparent; }
.tag-chip-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.tag-chip.mini { padding: 2px 7px; font-size: .72rem; font-weight: 600; background: transparent; }

/* --- Type-ahead input + suggestion menu --- */
.tag-input-row { position: relative; }
.tag-input-field { width: 100%; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.tag-input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
/* position: fixed so the menu ESCAPES the object card's `overflow: hidden` clip (#112).
   left/top/width/max-height are set from JS via the field's getBoundingClientRect(). */
.tag-suggest { position: fixed; z-index: 1000; max-height: 264px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm), 0 6px 20px rgba(20,24,40,.10); padding: 4px; }
.tag-suggest-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 7px;
  text-align: left; background: transparent; color: var(--ink); font-size: .88rem; cursor: pointer; }
.tag-suggest-row:hover, .tag-suggest-row.hl { background: var(--surface-2); }
.tag-suggest-row.create { color: var(--accent); font-weight: 600; }
.tag-suggest-row.create svg { flex: none; }
.tag-suggest-path { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-suggest-slug { flex: none; font-size: .74rem; font-family: var(--font-mono, monospace); }

/* --- Objects card: tag chips row --- */
.obj-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag-more { font-size: .72rem; font-weight: 700; }

/* --- Tag manager: merge control (reuses .types-wrap / .filter-card / .type-node from Object Types) --- */
.merge-row { display: flex; gap: 8px; align-items: center; }
.merge-row .input { flex: 1; }
.merge-row .btn { flex: none; }

@media (max-width: 480px) { .merge-row { flex-direction: column; align-items: stretch; } }

/* ============================ Sensitive objects · Notes · Attachments (Feature 1/2/3) ============================ */

/* --- Nav padlock indicator --- */
.lock-btn.is-unlocked { color: var(--ok); }
.lock-btn.is-unlocked:hover { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

/* --- Sensitive badge on the object hero + list card --- */
.sens-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px;
  font-size: .7rem; font-weight: 700; }
.sens-badge svg { flex: none; }
.sens-badge.is-locked { background: color-mix(in srgb, var(--ink-faint) 18%, transparent); color: var(--ink-soft); }
.sens-badge.is-open { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.card-lock { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--ink-faint); }
.card-lock svg { flex: none; }
.obj-card-label { display: inline-flex; align-items: center; }

/* --- Sensitive toggle bar (object editor) --- */
.sens-bar { margin: 0 10px 4px; }
.sens-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface-2); }
.sens-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.sens-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sens-title { font-weight: 700; font-size: .9rem; }
.sens-hint { font-size: .78rem; }

/* Reusable toggle switch (shared markup: input + track > thumb) — also used by the blueprint check row. */
.switch { flex: none; }

/* Blueprint editor — sensitive-type checkbox row */
.sensitive-check { gap: 8px; font-weight: 600; color: var(--ink); }
.sensitive-check svg { color: var(--ink-faint); flex: none; }

/* --- Notes section --- */
.obj-notes { margin-top: 14px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.obj-notes-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.obj-notes-head svg { color: var(--ink-faint); }
.notes-area { min-height: 74px; resize: vertical; line-height: 1.5; }

/* --- Attachments panel --- */
/* Attachments is its own full-width section below the two-column body (task #153). */
.obj-attachments { margin-top: 20px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.obj-attachments-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.obj-attachments-head svg { color: var(--ink-faint); }
.attach-empty { font-size: .84rem; padding: 2px 0 6px; }
.attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.attach-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2); }
.attach-ico { flex: none; color: var(--ink-soft); display: inline-grid; place-items: center; }
.attach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attach-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta { font-size: .76rem; }
.attach-actions { display: flex; gap: 2px; flex: none; }
.attach-actions .icon-btn { width: 30px; height: 30px; }
.attach-add { display: flex; align-items: center; gap: 6px; padding: 9px 12px; width: 100%;
  border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: var(--ink-faint);
  font-weight: 600; font-size: .84rem; transition: all .12s; }
.attach-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Locked state (private-fields areas: attributes, notes, attachments) --- */
.props-locked-head { display: block; padding: 8px 12px 2px; }
.locked-panel { display: flex; align-items: center; gap: 12px; margin: 4px 2px; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: 11px; background: var(--surface-2); }
.locked-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px;
  background: var(--surface-3); color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.locked-badge svg { flex: none; }
.locked-body { flex: 1; min-width: 0; }
.locked-msg { font-size: .88rem; font-weight: 600; color: var(--ink); }
.locked-sub { font-size: .78rem; margin-top: 1px; }

/* --- Password / master-key modals (setup · unlock · relock) --- */
.pw-modal .modal-title { display: flex; align-items: center; gap: 8px; }
.pw-modal .modal-title svg { flex: none; color: var(--accent); }
.pw-label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin: 12px 0 5px; letter-spacing: .02em; }
.pw-modal .input { margin-bottom: 0; }
.pw-warning { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 10px; margin: 4px 0 2px;
  background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--ink); font-size: .84rem; line-height: 1.45; }
.pw-warning-ico { flex: none; font-size: 1rem; line-height: 1.2; }
.pw-warning b { color: var(--danger); }
.pw-error { color: var(--danger); font-size: .84rem; font-weight: 600; margin: 10px 0 0; }

/* Password-strength meter (4 segments + label) */
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-meter { display: flex; gap: 4px; flex: 1; }
.pw-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); transition: background .15s; }
.pw-seg.lvl-0, .pw-seg.lvl-1 { background: var(--danger); }
.pw-seg.lvl-2 { background: var(--warn); }
.pw-seg.lvl-3 { background: color-mix(in srgb, var(--ok) 70%, var(--warn)); }
.pw-seg.lvl-4 { background: var(--ok); }
.pw-strength-label { font-size: .76rem; font-weight: 700; flex: none; white-space: nowrap; }
.pw-floor-hint { font-size: .74rem; margin-top: 6px; }
/* Disabled submit (master-password floor not met, M2) */
.pw-modal .btn.primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.pw-modal .btn.primary:disabled:hover { filter: none; }

/* ============================ Calendar (task #133) ============================ */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-period { font-family: var(--font-brand); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; margin-left: 4px; min-width: 8ch; }
.cal-filters { margin-bottom: 12px; }
.cal-range { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-range-lbl { font-size: .78rem; font-weight: 700; }
.cal-range input[type=date] { color-scheme: light dark; }

/* Locked-sensitive-dates note */
.cal-locked-wrap:empty { display: none; }
.cal-locked { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 12px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 11px; background: var(--accent-soft);
  color: var(--ink); font-weight: 600; font-size: .9rem; transition: filter .12s; }
.cal-locked:hover { filter: brightness(1.02); }
.cal-lock-badge { flex: none; font-size: 1rem; line-height: 1; }
.cal-lock-cta { margin-left: auto; flex: none; font-weight: 800; font-size: .82rem; color: var(--accent); }

/* Shared calendar body card */
.cal-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }

/* Event chip */
.cal-event { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 3px 6px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink); font-size: .74rem; font-weight: 600; line-height: 1.25; transition: background .1s; }
.cal-event:hover { background: var(--surface-3); }
.cal-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.cal-event-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-date { flex: none; margin-left: auto; font-size: .78rem; font-weight: 600; }
.cal-event-row { padding: 10px 12px; font-size: .92rem; border-radius: 9px; }
.cal-more { display: block; width: 100%; text-align: left; padding: 1px 6px; font-size: .72rem; font-weight: 700; color: var(--accent); border-radius: 5px; }
.cal-more:hover { background: var(--accent-soft); }

/* Month grid */
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); }
.cal-dow { background: var(--surface-2); color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-align: center; padding: 8px 4px; }
.cal-cell { background: var(--surface); min-height: 96px; padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.cal-out { background: var(--surface-2); }
.cal-cell.cal-out .cal-daynum { color: var(--ink-faint); }
.cal-daynum { font-size: .78rem; font-weight: 700; color: var(--ink-soft); align-self: flex-end; padding: 0 2px; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.cal-today .cal-daynum { color: var(--accent-ink); background: var(--accent); border-radius: 20px; min-width: 22px; height: 20px; display: grid; place-items: center; }

/* Week grid */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); }
.cal-week-col { background: var(--surface); min-height: 260px; display: flex; flex-direction: column; }
.cal-week-col.cal-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-week-head { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.cal-week-dow { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.cal-week-date { font-weight: 800; font-size: 1rem; }
.cal-week-events { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.cal-none { text-align: center; padding: 6px; font-size: .82rem; }

/* Day list */
.cal-day-list { display: flex; flex-direction: column; gap: 6px; padding: 12px; }

/* Year — 12 mini months */
.cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; }
.cal-mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; box-shadow: var(--shadow-sm); }
.cal-mini-head { display: block; width: 100%; text-align: left; font-family: var(--font-brand); font-weight: 800; font-size: .92rem; margin-bottom: 8px; border-radius: 6px; padding: 2px 4px; }
.cal-mini-head:hover { color: var(--accent); background: var(--accent-soft); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-dow { font-size: .58rem; font-weight: 800; color: var(--ink-faint); text-align: center; padding-bottom: 2px; }
.cal-mini-day { aspect-ratio: 1; display: grid; place-items: center; font-size: .68rem; color: var(--ink-soft); border-radius: 5px; position: relative; }
.cal-mini-day.blank { visibility: hidden; }
.cal-mini-day.has { color: var(--ink); font-weight: 800; background: var(--accent-soft); cursor: pointer; }
.cal-mini-day.has:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cal-mini-day.has::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-mini-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-weight: 800; }

.cal-empty { text-align: center; padding: 48px 20px; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cal-empty svg { color: var(--ink-faint); }

@media (max-width: 860px) { .cal-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .cal-year { grid-template-columns: repeat(2, 1fr); }
  .cal-week { grid-template-columns: 1fr; }
  .cal-week-col { min-height: 0; }
  .cal-cell { min-height: 74px; }
  .cal-event-label { font-size: .7rem; }
}
@media (max-width: 480px) { .cal-year { grid-template-columns: 1fr; } .cal-nav { gap: 8px; } .cal-period { font-size: .95rem; } }

/* Delete Object — bottom-of-form destructive action (task #149). Clearly red, but separated + outline
   (not a big solid button) so it isn't accidentally hit. */
.obj-delete-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; }
.delete-object-btn { border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); font-weight: 600; }
.delete-object-btn:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); }

/* ============================ Accent color picker (Settings → Appearance, task #146) ============================ */
.appearance-divider { border-top: 1px solid var(--line-soft); margin: 22px 0 16px; }
.accent-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.accent-swatch { width: 40px; height: 40px; border-radius: 11px; padding: 0; position: relative; cursor: pointer;
  display: grid; place-items: center; border: 2px solid var(--surface);
  /* primary fills most of the tile with a corner of the secondary/hover shade — "primary + secondary". */
  background: linear-gradient(135deg, var(--sw-primary) 0 58%, var(--sw-secondary) 58% 100%);
  box-shadow: 0 0 0 1px var(--line); transition: transform .08s, box-shadow .12s; }
.accent-swatch:hover { transform: scale(1.07); }
.accent-swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw-primary); }
.accent-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw-primary); }
.accent-check { display: grid; place-items: center; color: var(--sw-ink, #fff); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.accent-check svg { display: block; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }