:root{color-scheme:light dark;--bg:#f3f4f0;--surface:#fff;--text:#26352e;--muted:#637168;--line:#dce1d8;--soft:#eaf0e8;--primary:#305b45;--on-primary:#fff;--danger:#a43a38;--warning-bg:#fff5e5;--warning-text:#80541c;--shadow:0 10px 35px #1d362514;--cat:#63766b;--cat-soft:#edf1ec;--cat-mid:#d4ddd3;--cat-done:#526d59}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:transparent;color:var(--text);border-radius:8px;min-height:40px;padding:8px 12px;text-align:left}button:hover{background:var(--soft)}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--primary);color:var(--on-primary);text-align:center}button.primary:hover{filter:brightness(.95)}a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:23px;font-weight:600}h2{font-size:17px;font-weight:600}h3{font-size:15px;font-weight:600}small,.muted{color:var(--muted);font-size:12px}strong{font-weight:600}.loading{padding:64px 20px;text-align:center}.app-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border-bottom:1px solid var(--line);padding:13px 24px}.brand{font-size:17px;font-weight:600;letter-spacing:.02em}.top-right{display:flex;align-items:center;gap:8px}.save-state{font-size:12px;color:var(--muted)}.save-state[data-state="error"],.error{color:var(--danger)}.save-state[data-state="dirty"]{color:var(--warning-text)}.app-layout{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:calc(100vh - 64px)}.sidebar{padding:19px 11px;background:var(--surface);border-right:1px solid var(--line)}.nav-item{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;margin-bottom:3px}.nav-item.selected{background:var(--cat-soft);color:var(--cat);font-weight:600}.nav-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cat);flex:none}.nav-symbol{color:var(--muted);width:13px;text-align:center}.nav-group{padding:16px 11px 7px;color:var(--muted);font-size:12px}.sidebar-note{padding:16px 11px;color:var(--muted);font-size:11px}.main{padding:24px;max-width:1300px;width:100%;margin:0 auto;min-width:0}.heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.eyebrow{color:var(--muted);font-size:12px;margin-bottom:4px}.scope{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:15px}.section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:16px 0 9px}.group-title{font-size:12px;overflow-wrap:anywhere}.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:11px;color:var(--muted);margin-top:11px}.legend span{display:inline-flex;gap:5px;align-items:center}.mark{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--cat-soft);flex:none}.mark.underway{background:var(--cat-mid)}.mark.done{background:var(--cat-done)}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;min-width:0}.card.category-card{border-top:3px solid var(--cat)}.card-top,.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.badge{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--cat-soft);color:var(--cat);font-size:12px}.field{display:block;margin-top:13px}.field>span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}input[type="text"],input[type="number"],input[type="password"],input[type="date"],textarea,select{width:100%;display:block;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0;font-size:16px}textarea{min-height:90px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.actions{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.notice{color:var(--muted);font-size:12px;margin-top:10px}.feedback{font-size:12px;color:var(--primary);margin-top:9px}.task-check{display:flex;gap:10px;align-items:center;min-height:44px}.task-check input{width:18px;height:18px;accent-color:var(--cat)}.track{height:7px;background:var(--cat-soft);border-radius:7px;overflow:hidden;margin:12px 0}.fill{height:100%;background:var(--cat-done)}.metric-result{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.metric-chart{display:block;width:100%;height:auto;margin-top:10px}.metric-chart text{fill:var(--muted);font-size:12px}.note-row{padding:13px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.note-body{white-space:pre-wrap;margin-top:5px}.empty{padding:14px 0;color:var(--muted)}.direction{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.module-form{display:flex;gap:8px;align-items:center;margin-top:15px}.module-form input{min-width:0}.module-form button{white-space:nowrap}.alert{padding:12px 15px;margin-bottom:14px;border-radius:10px;background:var(--warning-bg);color:var(--warning-text);font-size:13px}.alert .actions{border-color:currentColor;margin-top:8px;padding-top:8px}.alert.error-alert{color:var(--danger)}.chat-card{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.chat-question{background:var(--soft);border-radius:9px;padding:11px;margin-bottom:12px;white-space:pre-wrap;overflow-wrap:anywhere}.chat-reply{white-space:pre-wrap;overflow-wrap:anywhere}.candidate-list{padding-left:20px;margin:12px 0}.candidate-list li{margin:6px 0}.ai-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:12px}.settings-link{padding:0;min-height:24px;text-decoration:underline;color:var(--primary)}.bottom-nav{display:none}.login-shell{max-width:420px;margin:80px auto;padding:24px}.login-shell .card{box-shadow:var(--shadow)}.login-shell h1{margin-bottom:8px}.login-shell button{width:100%}.login-message{margin-top:14px}.login-message:empty{display:none}
[data-category="startup"]{--cat:#4c70ab;--cat-soft:#eaf0fa;--cat-mid:#c8d9ee;--cat-done:#507ab0}[data-category="learning"]{--cat:#8060a8;--cat-soft:#f0ebf8;--cat-mid:#dacee9;--cat-done:#8565af}[data-category="body"]{--cat:#477d57;--cat-soft:#e9f2e9;--cat-mid:#caddca;--cat-done:#53845c}[data-category="mindfulness"]{--cat:#a97236;--cat-soft:#faf0e4;--cat-mid:#efd5b4;--cat-done:#b37e43}[data-category="camera"]{--cat:#3f8592;--cat-soft:#e6f2f4;--cat-mid:#c0dfe5;--cat-done:#468997}
@media(prefers-color-scheme:dark){:root{--bg:#191e1b;--surface:#252c27;--text:#e7eee8;--muted:#b0bcb2;--line:#3d4840;--soft:#313e34;--primary:#bad4bf;--on-primary:#1e3c29;--danger:#f3a8a6;--warning-bg:#3c3122;--warning-text:#e4c59a;--shadow:0 10px 35px #0003}[data-category="startup"]{--cat:#a9c9fb;--cat-soft:#2b3748;--cat-mid:#3d587a;--cat-done:#416fa6}[data-category="learning"]{--cat:#cbb5ee;--cat-soft:#393146;--cat-mid:#5c4876;--cat-done:#755198}[data-category="body"]{--cat:#aed5b5;--cat-soft:#2b3d30;--cat-mid:#3f6049;--cat-done:#467351}[data-category="mindfulness"]{--cat:#e8c18e;--cat-soft:#413628;--cat-mid:#6a5135;--cat-done:#956733}[data-category="camera"]{--cat:#a5d6de;--cat-soft:#293d41;--cat-mid:#3a6068;--cat-done:#387482}}
@media(max-width:1060px){.app-layout{grid-template-columns:150px minmax(0,1fr)}.main{padding:18px}}
@media(max-width:800px){.app-layout{grid-template-columns:130px minmax(0,1fr)}.details-grid{grid-template-columns:1fr}.sidebar{padding:12px 6px}.nav-item{padding:9px 8px}}
@media(max-width:650px){.app-top{padding:12px 14px}.brand{font-size:15px}.top-right{gap:3px}.top-right button{padding:6px 8px;min-height:38px}.app-layout{display:block;min-height:calc(100vh - 62px)}.sidebar{display:none}.main{padding:16px 12px 88px}.heading{margin-bottom:10px}.heading h1{font-size:21px}.heading .primary{font-size:12px;padding:8px 10px}.scope{display:block;margin-bottom:12px}.scope span{display:block;margin-top:3px}.legend{gap:6px 10px}.legend .legend-note{width:100%}.form-row,.metric-row,.details-grid{grid-template-columns:1fr;gap:0}.card{padding:15px}.metric-row{gap:2px}.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;position:fixed;bottom:0;left:0;right:0;padding:6px 5px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:5}.bottom-nav button{font-size:12px;text-align:center;min-height:46px;padding:6px 2px}.bottom-nav button.selected{background:var(--soft);color:var(--primary);font-weight:600}.notice{overflow-wrap:anywhere}.login-shell{margin:42px auto;padding:16px}.save-state{max-width:110px;text-align:right}.section-head h2{font-size:16px}.section-head .muted{font-size:11px}.module-form{flex-wrap:wrap}.module-form input{flex:1 1 180px}}
@media(pointer:coarse){button{min-height:44px}}

@media (max-width: 650px) {

  .pager-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 0;
    min-height: 44px;
    padding: 7px 3px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
  }

  .pager-tab [class*="number"] {
    font-size: 11px;
  }

  .pager-tab[aria-current="true"] {
    background: var(--cat-soft);
    color: var(--cat);
    font-weight: 600;
  }
}

/* Focus, nested learning/production objects and classified records. */
.heading-actions,
.group-controls,
.note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.heading-actions {
  justify-content: flex-end;
}

.focus-toggle {
  color: var(--cat);
  white-space: nowrap;
}

.focus-toggle.is-focused {
  background: var(--cat-soft);
  font-weight: 600;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
  color: var(--muted);
}

.breadcrumbs button {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.group-title button,
.group-detail-link {
  color: var(--cat);
  font-size: inherit;
  font-weight: 600;
  padding: 2px 0;
  min-height: 30px;
  text-align: left;
  overflow-wrap: anywhere;
}

.group-controls {
  margin-bottom: 9px;
}

.entity-goals {
  margin-top: 12px;
}

.object-create {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.object-create summary {
  color: var(--cat);
  cursor: pointer;
  padding: 8px 0;
  min-height: 40px;
  font-size: 13px;
}

.object-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.object-row:last-child {
  border-bottom: 0;
}

.object-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.object-link {
  padding: 3px 0;
  min-height: 32px;
  max-width: 100%;
  font-weight: 600;
  color: var(--cat);
  overflow-wrap: anywhere;
}

.object-activity,
.focus-activity {
  font-size: 12px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.object-path {
  font-size: 11px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.object-row-side {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.status-chip {
  padding: 3px 6px;
  background: var(--cat-soft);
  color: var(--cat);
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}

.danger-button {
  color: var(--danger);
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.focus-card {
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cat);
  border-radius: 11px;
  min-width: 0;
}

.focus-title {
  padding: 2px 0;
  min-height: 30px;
  font-weight: 600;
  color: var(--cat);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.focus-order {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 10px;
}

.focus-order button {
  min-height: 36px;
}

.focus-goal {
  margin-top: 10px;
}

.focus-explanation {
  margin-bottom: 14px;
}

.focus-groups {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  min-width: 0;
}

.focus-group {
  min-width: 0;
}

.focus-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.focus-group-heading h3 {
  font-size: 13px;
}

.focus-group > .focus-grid {
  margin: 0;
}

.focus-group > .focus-grid > .empty {
  padding: 3px 0;
  font-size: 12px;
}

.note-meta {
  justify-content: flex-start;
  gap: 6px;
}

.note-meta .muted {
  flex: 1 1 160px;
  overflow-wrap: anywhere;
}

.note-classify,
.note-node-link {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 12px;
  color: var(--primary);
}

.note-classification {
  margin-top: 11px;
  padding: 12px;
  background: var(--soft);
  border-radius: 8px;
}

.compact-note-composer .note-first-field {
  margin-top: 0;
}

.compact-note-composer .note-first-field textarea {
  min-height: 150px;
}

.note-more-options {
  margin-top: 16px;
}

.note-more-options summary {
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
}

.unified-notes .memo-filters {
  margin: 14px 0 4px;
}

.unified-notes .memo-tags:empty {
  display: none;
}

.unified-notes .note-row[data-direction="thought"] .badge {
  background: rgba(139, 92, 158, .1);
  color: #794596;
}

.io-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.io-column {
  min-width: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.io-column[data-direction="input"] {
  border-top: 3px solid #6a88b6;
}

.io-column[data-direction="output"] {
  border-top: 3px solid #9173b3;
}

.io-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.io-column-heading span {
  font-size: 12px;
  color: var(--muted);
}

.board-section {
  margin-bottom: 22px;
}

.board-section:last-child {
  margin-bottom: 0;
}

.board-dimension-switch {
  display: none;
}

@media (max-width: 650px) {
  .bottom-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .bottom-nav button {
    min-width: 0;
    white-space: nowrap;
  }

  .focus-grid,
  .io-board {
    grid-template-columns: 1fr;
  }

  .io-column {
    padding: 13px;
  }

  .io-column-heading h2 {
    font-size: 16px;
  }

  .board-dimension-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 14px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .board-dimension-switch button {
    min-height: 44px;
    text-align: center;
  }

  .board-dimension-switch button[aria-pressed="true"] {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
  }

  .io-board[data-selected-direction="input"] > .io-column[data-direction="output"],
  .io-board[data-selected-direction="output"] > .io-column[data-direction="input"] {
    display: none;
  }

  .object-link,
  .note-classify,
  .note-node-link,
  .focus-order button,
  .breadcrumbs button {
    min-height: 44px;
  }

  .heading-actions {
    justify-content: flex-start;
  }
}

/* Unified purpose cards and concrete outcomes. */
.purpose-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 10px 0;
}

.purpose-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--cat-mid, var(--line));
  border-radius: 13px;
  background: var(--cat-soft, var(--surface));
}

.purpose-card > p,
.plan-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
  margin: 0 0 10px;
}

.purpose-tools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.purpose-tools button {
  font-size: 12px;
  min-height: 36px;
}

.purpose-examples,
.legacy-history {
  margin-top: 16px;
}

.purpose-examples summary,
.legacy-history summary,
.other-plans summary {
  cursor: pointer;
  min-height: 36px;
  padding: 9px 0;
  font-weight: 600;
}

.purpose-example {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
  text-align: left;
  padding: 11px 13px;
  border: 1px dashed var(--cat-mid, var(--line));
  background: var(--cat-soft, var(--surface));
  line-height: 1.55;
}

.purpose-example span {
  white-space: nowrap;
  color: var(--cat, var(--primary));
  font-size: 12px;
}

.hierarchy-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.hierarchy-entry {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.hierarchy-entry > button:first-child {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.hierarchy-entry strong,
.hierarchy-entry span {
  display: block;
  overflow-wrap: anywhere;
}

.hierarchy-entry span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}

.outcome-complete {
  margin: 10px 0 18px;
}

/* Date ranges, manual plans and unsaved AI proposals. */
.period-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
}

.period-tabs button {
  min-height: 42px;
  text-align: center;
}

.period-tabs button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.plans-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}

.plan-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--cat-mid, var(--line));
  border-radius: 13px;
  background: var(--surface);
}

.plan-card h3 {
  overflow-wrap: anywhere;
  line-height: 1.45;
  margin: 0;
  font-size: 16px;
}

.plan-card[data-status="done"] {
  border-style: dashed;
}

.plan-card > .muted {
  margin: 9px 0;
  font-size: 12px;
}

.plan-outcome-link {
  width: 100%;
  text-align: left;
  color: var(--cat, var(--primary));
  overflow-wrap: anywhere;
  padding: 8px 0;
  font-size: 13px;
}

.plan-description {
  font-size: 13px;
  margin: 8px 0 14px;
}

.plan-editor {
  border-top: 1px solid var(--line);
  margin-top: 15px;
  padding-top: 14px;
}

.plan-proposal {
  border: 1px solid var(--primary);
}

.candidate-plan {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
  margin: 12px 0;
}

.completion-card {
  border: 2px solid var(--primary);
  scroll-margin-top: 80px;
}

.completion-card h2 {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.note-plan {
  color: var(--muted);
  font-size: 12px;
  margin: 7px 0;
}

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.more-card {
  text-align: left;
  margin: 0;
  min-height: 120px;
}

.more-card strong,
.more-card span {
  display: block;
}

.more-card span {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 650px) {
  .hierarchy-entries,
  .plans-list,
  .more-grid {
    grid-template-columns: 1fr;
  }

  .purpose-tools button,
.purpose-example,
.period-tabs button,
.plan-card .actions button,
.purpose-examples summary,
.legacy-history summary,
.other-plans summary {
    min-height: 44px;
  }

  .plan-card,
  .candidate-plan {
    padding: 13px;
  }

  .plan-card .actions {
    flex-wrap: wrap;
  }

  .plan-controls select,
  .plan-editor select,
  .candidate-plan select,
  .completion-card select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .more-card {
    min-height: 100px;
  }
}

/* Native date fields share the form controls and fit narrow screens. */
.field:has(> input[type="date"]) {
  min-width: 0;
}

.field input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.field input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

/* Free memos stay separate from project notes and progress. */
.memo-intro {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 18px;
}

.memo-text-input {
  min-height: 150px;
  line-height: 1.65;
}

.memo-tags-input {
  min-height: 66px;
  line-height: 1.5;
}

.memo-filters,
.memo-tags,
.memo-record-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.memo-filters {
  margin: 15px 0;
}

.memo-filters button,
.memo-tag {
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.memo-filters button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.memo-record {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.memo-record-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px;
}

.memo-record-meta time,
.memo-updated {
  font-size: 12px;
  color: var(--muted);
}

.memo-record-tools button {
  font-size: 12px;
  min-height: 34px;
}

.memo-record-text {
  margin: 13px 0;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.memo-updated {
  margin: 10px 0 0;
}

.memo-drafts summary {
  cursor: pointer;
  min-height: 40px;
  font-weight: 600;
}

.memo-draft-link {
  display: block;
  width: 100%;
  margin: 8px 0;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.memo-empty {
  padding: 20px 0 5px;
}

@media (max-width: 650px) {
  .memo-filters button,
  .memo-tag,
  .memo-record-tools button,
  .memo-draft-link,
  .memo-drafts summary {
    min-height: 44px;
  }

  .memo-record-tools {
    gap: 4px;
  }

  .memo-text-input {
    min-height: 165px;
  }
}

/* A focus session hides the workstation while keeping its drafts intact. */
.focus-start-button {
  border: 1px solid var(--primary);
  background: var(--soft);
  color: var(--primary);
  white-space: nowrap;
  text-align: center;
}

body:has(.focus-overlay) {
  overflow: hidden;
}

.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg);
}

.focus-screen {
  width: min(100%, 580px);
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.focus-navigation {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.focus-back-button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
}

.focus-screen > .eyebrow,
.focus-screen > h1,
.focus-state {
  text-align: center;
}

.focus-screen h1 {
  font-size: 24px;
  line-height: 1.5;
}

.focus-clock {
  margin: 25px 0 10px;
  text-align: center;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.focus-state {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px;
}

.focus-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.focus-actions > .notice {
  width: 100%;
  text-align: center;
  margin: 0 0 10px;
}

.focus-promise {
  margin-top: 24px;
  text-align: center;
  font-weight: 600;
}

.focus-screen > .notice {
  line-height: 1.7;
  margin-top: 16px;
}

.focus-busy {
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.timer-periods {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.time-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 22px;
}

.time-total strong {
  font-size: 28px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.time-total span,
.time-direct span {
  color: var(--muted);
  font-size: 12px;
}

.time-direct {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 13px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.time-groups {
  margin: 17px 0;
}

.time-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.time-group strong,
.time-group small {
  display: block;
  overflow-wrap: anywhere;
}

.time-group small {
  margin-top: 3px;
}

.time-group-duration {
  font-size: 13px;
  color: var(--cat, var(--primary));
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.time-group-bar {
  grid-column: 2 / -1;
  display: block;
  height: 6px;
  width: 100%;
  background: var(--cat-soft, var(--soft));
  border-radius: 5px;
  overflow: hidden;
}

.time-group-bar > span {
  display: block;
  height: 100%;
  background: var(--cat, var(--primary));
  border-radius: inherit;
}

.timer-history {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.timer-history time {
  color: var(--muted);
  font-size: 12px;
}

.timer-history > p {
  margin-top: 7px;
}

.timer-note {
  white-space: pre-wrap;
  line-height: 1.7;
}

@media (max-width: 650px) {
  .top-right > .save-state {
    display: none;
  }

  .app-top .focus-start-button {
    min-height: 40px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .focus-overlay {
    align-items: start;
    padding: calc(20px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
  }

  .focus-screen {
    padding: 22px 17px;
  }

  .focus-screen h1 {
    font-size: 21px;
  }

  .focus-screen button {
    min-height: 44px;
  }

  .focus-screen .actions,
  .focus-actions {
    gap: 8px;
  }

  .focus-screen select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .time-total strong {
    font-size: 24px;
  }

  .time-group {
    column-gap: 8px;
  }

  .time-group-duration {
    max-width: 150px;
    font-size: 12px;
  }
}

/* Period plans: choose outcomes first; keep legacy action rows underneath. */
.period-plan-header {
  padding: 16px 20px;
}

.period-plan-header .period-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.period-plan-header .period-tabs button {
  min-width: 88px;
  min-height: 44px;
  text-align: center;
}

.period-navigation {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 15px;
  align-items: center;
  max-width: 660px;
  margin: 14px auto;
  text-align: center;
}

.period-navigation h2 {
  font-size: 25px;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.period-navigation span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}

.period-arrow {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--soft);
  text-align: center;
  font-size: 20px;
}

.period-jump {
  display: grid;
  grid-template-columns: auto minmax(150px, 190px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.period-jump .field {
  margin-top: 0;
}

.period-jump > button {
  border: 1px solid var(--line);
  min-height: 44px;
}

.period-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.period-plan-summary > strong {
  color: var(--text);
  font-size: 15px;
}

.period-overall-progress {
  flex-basis: 100%;
}

.period-plan-layout {
  display: grid;
  grid-template-columns: minmax(235px, 285px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.period-picker-column,
.period-plan-main {
  min-width: 0;
}

.period-picker-column {
  position: static;
}

.period-plan-picker {
  padding: 16px;
}

.period-plan-picker > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  min-height: 44px;
  font-weight: 600;
}

.picker-summary-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.picker-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.period-plan-picker input,
.period-plan-picker select {
  font-size: 14px;
  padding-left: 9px;
  padding-right: 9px;
}

.picker-results {
  max-height: 410px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.picker-outcome {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 13px 8px;
  margin: 7px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat);
  border-radius: 8px;
  cursor: pointer;
}

.picker-outcome:has(input:checked) {
  background: var(--cat-soft);
  border-color: var(--cat-mid);
  border-left-color: var(--cat);
}

.picker-outcome input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cat);
}

.picker-outcome strong,
.picker-outcome small,
.picker-outcome-meta {
  display: block;
  overflow-wrap: anywhere;
}

.picker-outcome small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.picker-outcome-meta {
  color: var(--cat);
  font-size: 11px;
  margin-top: 5px;
}

.picker-actions {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.picker-actions > span {
  font-size: 12px;
  color: var(--muted);
}

.picker-actions > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.picker-actions button {
  min-height: 44px;
  flex: 1;
  text-align: center;
}

.picker-create-link {
  margin-top: 10px;
  color: var(--primary);
  text-decoration: underline;
}

.period-outcomes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.period-outcome-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--cat);
  background: var(--surface);
  border-radius: 12px;
  min-width: 0;
}

.period-outcome-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: start;
}

.period-outcome-head > div {
  min-width: 0;
}

.period-direction {
  font-size: 11px;
  color: var(--cat);
}

.period-outcome-head h2 {
  margin-top: 5px;
}

.period-outcome-head h2 button {
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  padding: 0;
  min-height: 30px;
  overflow-wrap: anywhere;
}

.period-outcome-head > .status-chip {
  flex-shrink: 0;
  font-size: 11px;
  background: var(--cat-soft);
  color: var(--cat);
  white-space: nowrap;
}

.period-outcome-path {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
  margin: 7px 0 16px;
}

.period-outcome-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
}

.period-outcome-progress > span {
  color: var(--muted);
  font-size: 12px;
}

.period-outcome-progress > strong {
  color: var(--cat);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.period-progress-track {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--cat-soft);
  border-radius: 8px;
  overflow: hidden;
}

.period-progress-track > span {
  display: block;
  height: 100%;
  background: var(--cat);
  border-radius: inherit;
}

.period-progress-form {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  gap: 8px 12px;
  align-items: end;
  margin-top: 12px;
}

.period-progress-form .field {
  margin-top: 0;
}

.period-progress-form input {
  font-variant-numeric: tabular-nums;
}

.period-progress-form button,
.period-description-form > button {
  min-height: 44px;
  border: 1px solid var(--line);
  text-align: center;
}

.period-progress-form .feedback {
  grid-column: 1 / -1;
  margin-top: 0;
}

.period-progress-form .feedback:empty,
.period-description-form .feedback:empty {
  display: none;
}

.period-progress-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
  line-height: 1.6;
}

.period-outcome-description {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 15px;
}

.period-description-form {
  margin-top: 16px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.period-description-form textarea {
  min-height: 78px;
  font-size: 14px;
}

.period-description-form > button {
  margin-top: 8px;
  font-size: 12px;
}

.period-actions {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.period-actions > summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px;
  cursor: pointer;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
}

.period-actions > summary > span:last-child {
  color: var(--muted);
  font-size: 11px;
}

.period-actions .plan-card {
  padding: 13px;
  margin-top: 12px;
  margin-bottom: 0;
}

.period-actions .plan-card h3 {
  font-size: 14px;
}

.period-actions .plan-card .actions {
  gap: 4px;
}

.period-plan-empty {
  padding: 36px 22px;
  text-align: center;
}

.period-plan-empty h2 {
  margin-top: 10px;
}

.period-plan-empty p {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.period-empty-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--primary);
  font-size: 30px;
}

.plan-secondary > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

@media (min-width: 1280px) {
  .period-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .period-plan-empty {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .period-plan-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .period-picker-column {
    position: static;
  }

  .picker-results {
    max-height: 320px;
  }

  .period-jump {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .period-jump .field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .period-plan-header {
    padding: 14px;
  }

  .period-plan-header .period-tabs button {
    flex: 1;
    min-width: 0;
  }

  .period-navigation {
    gap: 9px;
    margin: 18px auto;
  }

  .period-navigation h2 {
    font-size: 21px;
  }

  .period-plan-summary {
    gap: 6px 12px;
    margin-top: 14px;
  }

  .period-plan-picker {
    padding: 12px 14px;
  }

  .picker-summary-count {
    width: 100%;
  }

  .period-outcome-card {
    padding: 16px;
  }

  .period-outcome-head {
    flex-wrap: wrap;
  }

  .period-outcome-head h2 button {
    min-height: 44px;
  }

  .period-progress-form input,
  .period-description-form textarea,
  .period-plan-picker input,
  .period-plan-picker select {
    font-size: 16px;
  }
}

/* Browse compact outcome cards; expand editing only when needed. */
.period-current-description {
  margin-top: 15px;
}

.period-current-description > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}

.period-current-description > p {
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.period-card-editor,
.period-source-description {
  margin-top: 12px;
}

.period-card-editor > summary,
.period-source-description > summary,
.period-plan-help > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 12px;
  color: var(--cat, var(--primary));
}

.period-card-editor > summary {
  background: var(--cat-soft);
  padding: 7px 10px;
  border-radius: 8px;
}

.period-card-editor > summary::after,
.period-source-description > summary::after,
.period-plan-help > summary::after {
  content: '＋';
  font-size: 15px;
  margin-left: auto;
}

.period-card-editor[open] > summary::after,
.period-source-description[open] > summary::after,
.period-plan-help[open] > summary::after {
  content: '−';
}

.period-edit-draft {
  font-size: 11px;
  color: var(--warning-text);
}

.period-source-description > summary {
  color: var(--muted);
  min-height: 36px;
}

.period-source-description .period-outcome-description {
  margin-top: 4px;
}

.period-actions {
  margin-top: 12px;
  padding-top: 6px;
}

.period-plan-help {
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (max-width: 650px) {
  .period-navigation .period-date-range {
    display: none;
  }

  .period-plan-header {
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .period-plan-header .period-tabs {
    padding-bottom: 6px;
  }

  .period-navigation {
    margin: 12px auto;
  }

  .period-jump {
    gap: 8px 10px;
  }

  .period-jump .field > span {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .period-plan-summary {
    margin-top: 11px;
    gap: 3px 10px;
    font-size: 11px;
    line-height: 1.5;
  }

  .period-plan-summary > strong {
    font-size: 13px;
  }

  .period-overall-progress {
    font-size: 11px;
  }

  .period-source-description > summary {
    min-height: 44px;
  }
}

.highlight-toggle {
  color: var(--muted);
  flex-shrink: 0;
  min-height: 36px;
  padding: 5px 9px;
  white-space: nowrap;
}

.highlight-toggle.is-highlighted {
  color: var(--cat, var(--primary));
  background: var(--cat-mid, var(--soft));
  font-weight: 600;
}

.highlight-label {
  color: var(--cat, var(--primary));
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.hierarchy-entry.is-highlighted {
  border: 2px solid var(--cat);
  box-shadow: 0 0 0 2px var(--cat-soft);
  background: var(--cat-soft);
}

.hierarchy-entry-tools {
  display: flex;
  align-items: center;
  gap: 3px;
}

.direction-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.direction-create-form .field {
  margin-top: 0;
}

.direction-create-form > button {
  min-height: 44px;
}

.direction-create-form .feedback {
  grid-column: 1 / -1;
}

.direction-edit-card details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

.direction-delete-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin-top: 8px;
}

.direction-delete-row > span {
  flex: 1 1 240px;
}

@media (max-width: 650px) {
  .desktop-view-switch {
    display: none;
  }

  .highlight-toggle {
    min-height: 44px;
  }

  .direction-create-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Expected budgets and independently saved real execution records. */
.outcome-time-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.object-row-side .outcome-time-compact {
  display: block;
  text-align: right;
  max-width: 210px;
}

.object-row-side .outcome-time-compact > span {
  display: block;
}

.outcome-time-caption {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.outcome-time-caption strong {
  color: var(--text);
}

.outcome-detail > .period-outcome-progress {
  margin-top: 15px;
}

.outcome-info-editor,
.execution-composer,
.execution-history,
.legacy-progress {
  margin-top: 12px;
}

.outcome-info-editor > summary,
.execution-composer > summary,
.execution-history > summary,
.legacy-progress > summary,
.period-unplanned-records > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--cat, var(--primary));
  font-size: 12px;
}

.execution-composer > summary {
  padding: 7px 10px;
  background: var(--cat-soft, var(--soft));
  border-radius: 8px;
}

.execution-record {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.execution-record.is-voided {
  color: var(--muted);
}

.execution-record.is-voided > .card-top > strong {
  text-decoration: line-through;
}

.execution-record-note {
  white-space: pre-wrap;
  margin: 7px 0;
  line-height: 1.65;
}

.legacy-progress > summary {
  color: var(--muted);
  font-size: 11px;
}

.period-time-metrics,
.period-time-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.period-time-metrics > div,
.period-time-overview > div {
  padding: 10px;
  border-radius: 8px;
  background: var(--cat-soft, var(--soft));
  min-width: 0;
}

.period-time-metrics span,
.period-time-overview span,
.period-time-metrics small,
.period-time-overview small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.period-time-metrics strong,
.period-time-overview strong {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.period-time-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.period-coverage {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 16px;
  overflow-wrap: anywhere;
}

.period-execution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.period-execution-actions > button {
  min-height: 44px;
  border: 1px solid var(--line);
  font-size: 12px;
}

.plan-budget-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 15px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.plan-budget-form .field {
  margin-top: 0;
}

.plan-budget-form > button {
  min-height: 44px;
  border: 1px solid var(--line);
}

.plan-budget-form .feedback {
  grid-column: 1 / -1;
}

.plan-budget-form .feedback:empty {
  display: none;
}

.picker-outcome {
  display: block;
}

.picker-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  cursor: pointer;
}

.picker-budget input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
  font-size: 16px;
}

.focus-target {
  color: var(--primary);
  font-size: 12px;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

.execution-success {
  margin-bottom: 12px;
}

@media (max-width: 650px) {
  .period-time-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 0;
  }

  .period-time-overview > div,
  .period-time-metrics > div {
    padding: 8px;
  }

  .period-time-overview strong {
    font-size: 13px;
  }

  .object-row-side .outcome-time-compact {
    max-width: none;
    text-align: left;
  }

  .plan-budget-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-budget-form > button {
    justify-self: start;
  }
}

/* A quiet week board: seven days, three parts of each day. */
.week-plan-header {
  margin-bottom: 18px;
}

.week-page-title,
.week-page-navigation,
.week-page-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.week-page-title {
  justify-content: space-between;
}

.week-page-title h1 {
  margin: 0;
  font-size: 25px;
}

.week-page-navigation {
  margin-top: 14px;
}

.week-page-navigation h2 {
  font-size: 17px;
  margin: 0;
  font-weight: 600;
}

.week-page-navigation button,
.week-page-meta button {
  min-height: 44px;
  border: 1px solid var(--line);
}

.week-page-navigation > button:first-child,
.week-page-navigation > button:nth-child(3) {
  min-width: 44px;
}

.week-page-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.week-page-meta > .field {
  width: 200px;
  max-width: 100%;
  margin: 0;
}

.week-date-jump summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.week-board-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(132px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 14px;
  touch-action: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  align-items: start;
}

.week-day {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.week-day.is-today {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.week-day-heading {
  padding: 12px 8px 8px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.week-day-heading h2 {
  font-size: 15px;
  margin: 0 0 3px;
}

.week-day-heading time {
  font-size: 10px;
  color: var(--muted);
}

.week-day-tools {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}

.week-day-tools button {
  flex: 1;
  padding: 5px 2px;
  font-size: 10px;
  min-height: 32px;
  white-space: nowrap;
}

.week-slot {
  padding: 10px 6px;
  min-height: 130px;
  border-bottom: 1px solid var(--line);
}

.week-slot:last-child {
  border-bottom: 0;
}

.week-slot h3 {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 4px 9px;
}

.week-slot-empty {
  display: block;
  color: var(--line);
  font-size: 16px;
  padding: 12px 4px;
}

.week-plan-item {
  display: block;
  min-width: 0;
  margin: 3px 0;
  border-radius: 4px;
  background: hsl(var(--week-plan-hue, 210) 55% 95%);
  border-left: 2px solid hsl(var(--week-plan-hue, 210) 45% 52%);
  padding: 0;
}

.week-plan-check {
  align-self: start;
  min-width: 25px;
  min-height: 30px;
  padding: 1px;
  color: var(--cat, var(--primary));
  font-size: 18px;
}

.week-plan-open {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 0 4px 4px 0;
  color: hsl(var(--week-plan-hue, 210) 55% 26%);
  text-align: left;
}

.week-plan-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.week-plan-open:hover {
  background: hsl(var(--week-plan-hue, 210) 55% 91%);
}

.week-module-tag {
  display: inline-block;
  color: var(--cat, var(--primary));
  font-size: 9px;
  margin-top: 4px;
}

.week-plan-item.is-done {
  background: transparent;
  border-left-color: var(--line);
}

.week-plan-item.is-done .week-plan-title {
  text-decoration: line-through;
}

.week-drawer {
  max-width: 760px;
  margin-bottom: 18px;
  border-color: var(--primary);
}

.week-drawer .card-top h2 {
  font-size: 19px;
}

.week-drawer button,
.week-more-fields summary,
.week-detail-time summary,
.week-unscheduled > summary,
.week-time-tools > summary,
.week-ai-tools > summary {
  min-height: 44px;
}

.week-more-fields,
.week-detail-time,
.week-unscheduled,
.week-time-tools,
.week-ai-tools {
  margin-top: 14px;
}

.week-more-fields summary,
.week-detail-time summary,
.week-unscheduled > summary,
.week-time-tools > summary,
.week-ai-tools > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.week-unscheduled-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

@media (max-width: 650px) {
  .week-page-title h1 {
    font-size: 22px;
  }

  .week-page-navigation {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 5px;
  }

  .week-page-navigation h2 {
    font-size: 14px;
    text-align: center;
  }

  .week-page-navigation > button:last-child {
    grid-column: 2;
    justify-self: center;
  }

  .week-page-meta {
    gap: 5px 10px;
  }

  .week-page-meta > .field {
    width: 160px;
  }

  .week-board-track {
    grid-template-columns: repeat(7, 250px);
    gap: 12px;
    scroll-snap-type: x proximity;
  }

  .week-day {
    scroll-snap-align: start;
  }

  .week-day-heading {
    padding: 14px 12px 10px;
  }

  .week-day-heading h2 {
    font-size: 17px;
  }

  .week-day-heading time,
  .week-day-tools button {
    font-size: 12px;
  }

  .week-day-tools button {
    min-height: 44px;
  }

  .week-slot {
    padding: 12px 8px;
    min-height: 140px;
  }

  .week-plan-item {
    padding: 0;
  }

  .week-plan-check,
  .week-plan-open {
    min-height: 44px;
  }

  .week-plan-check {
    min-width: 44px;
  }

  .week-plan-title {
    font-size: 13px;
  }

  .week-module-tag {
    font-size: 10px;
  }
}

/* Keep compact controls visible while their labels stay accessible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 650px) {
  .week-plan-header {
    margin-bottom: 12px;
  }

  .week-page-navigation {
    grid-template-columns: 44px minmax(0, 1fr) 44px 68px;
    gap: 3px;
    margin-top: 8px;
  }

  .week-page-navigation h2 {
    font-size: 12px;
    line-height: 1.45;
  }

  .week-page-navigation > button:last-child {
    grid-column: auto;
    justify-self: stretch;
    font-size: 11px;
    padding: 4px;
  }

  .week-page-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px auto;
    gap: 3px 6px;
    margin-top: 3px;
    font-size: 11px;
  }

  .week-page-meta > .field {
    width: auto;
    min-width: 0;
  }

  .week-page-meta select {
    font-size: 11px;
    padding-left: 6px;
  }

  .week-date-jump {
    min-width: 0;
  }

  .week-date-jump summary {
    font-size: 11px;
  }

  .week-date-jump[open] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
  }

  .week-date-jump[open] > .field {
    margin: 0;
  }

  .week-page-meta > button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.week-draft-backup {
  margin: 12px 0;
}

.week-draft-backup > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.week-draft-backup textarea {
  width: 100%;
  min-height: 120px;
  white-space: pre-wrap;
}

/* Direction selection and a focused work area share the full page width. */
.main.module-content {
  max-width: none;
}

.workspace-root-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
}

.workspace-root-heading > button {
  min-width: 0;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.module-workspace {
  display: grid;
  grid-template-columns: minmax(330px, 42%) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.direction-browser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: sticky;
  top: 18px;
  align-self: start;
  height: min(760px, calc(100dvh - 120px));
  min-height: 340px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.direction-column {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding: 0 7px 9px;
  border-right: 1px solid var(--line);
}

.direction-column:last-child {
  border-right: 0;
}

.direction-column > h2,
.direction-column > h3,
.direction-column-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  padding: 13px 6px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.direction-column .empty {
  padding: 12px 6px;
  font-size: 11px;
  line-height: 1.6;
}

.direction-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 7px;
  margin: 3px 0;
  border-left: 3px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.direction-option > span {
  flex: 0 0 auto;
  color: var(--muted);
}

.direction-option:hover {
  background: var(--cat-soft);
}

.direction-option.is-selected,
.direction-option[aria-current="true"] {
  color: var(--cat);
  background: var(--cat-soft);
  border-left-color: var(--cat);
  font-weight: 600;
}

.direction-option:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: -2px;
}

.direction-workbench {
  min-width: 0;
}

.workspace-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.workspace-heading > div {
  min-width: 0;
}

.workspace-heading > div:first-child {
  flex: 1 1 180px;
}

.workspace-heading > .workspace-actions {
  flex: 0 1 240px;
  justify-content: flex-end;
  margin-top: 0;
}

.workspace-heading h1,
.workspace-heading h2 {
  overflow-wrap: anywhere;
}

.workspace-heading .eyebrow,
.workspace-heading .muted {
  overflow-wrap: anywhere;
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 16px;
}

.workspace-actions button,
.direction-workbench .card-top > button {
  min-height: 44px;
  font-size: 12px;
}

.workspace-actions button {
  border: 1px solid var(--line);
}

.direction-workbench > .card {
  padding: 18px;
}

.direction-workbench .card-top h2 {
  font-size: 16px;
}

.direction-workbench .object-row {
  gap: 10px;
}

.direction-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 8px;
  margin-top: 12px;
}

.direction-create-form > .field {
  margin: 0;
}

.direction-create-form > button {
  min-height: 44px;
  white-space: nowrap;
}

.direction-create-form > .feedback {
  grid-column: 1 / -1;
}

/* Small forms appear in a scrollable layer without widening the page. */
body:has(.compact-dialog-layer) {
  overflow: hidden;
}

.compact-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: #0007;
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.compact-dialog {
  width: min(560px, 100%);
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body:has(.confirmation-dialog-layer) {
  overflow: hidden;
}

.confirmation-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: #0008;
  backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.confirmation-dialog {
  width: min(440px, 100%);
  min-width: 0;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.confirmation-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.confirmation-description,
.confirmation-dialog > p {
  margin: 18px 0 24px;
  line-height: 1.7;
}

.confirmation-dialog .actions,
.confirmation-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
}

.confirmation-dialog button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
}

.confirmation-dialog .danger-button {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.confirmation-dialog button:focus-visible,
.focus-back-button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.compact-dialog > header,
.compact-dialog > .card-top,
.compact-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.compact-dialog h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.compact-dialog button {
  min-height: 44px;
}

.compact-dialog > header > button,
.compact-dialog > .card-top > button,
.compact-dialog-heading > button {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
}

.compact-dialog .field {
  margin-top: 11px;
}

.compact-dialog .field > input,
.compact-dialog .field > select,
.compact-dialog .field > textarea {
  min-height: 44px;
  max-width: 100%;
  font-size: 16px;
}

.compact-dialog textarea {
  min-height: 110px;
}

.compact-dialog .actions {
  margin-top: 14px;
}

.compact-dialog .feedback:empty {
  display: none;
}

.schedule-actions-dialog {width:min(410px,100%);}
.schedule-menu-summary strong {display:block;font-size:16px;line-height:1.5;overflow-wrap:anywhere;}
.schedule-menu-summary p {margin:5px 0 14px;color:var(--muted);font-size:12px;}
.schedule-menu-buttons {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.schedule-actions-dialog .schedule-menu-buttons button {min-width:0;min-height:38px;padding:7px 4px;font-size:13px;white-space:nowrap;}
.schedule-menu-partial {display:flex;align-items:center;gap:7px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:13px;}
.schedule-menu-partial label {display:flex;align-items:center;flex:1;min-width:0;gap:9px;margin:0;white-space:nowrap;}
.schedule-menu-partial input {width:80px;min-width:0;max-width:100%;min-height:36px;padding:7px;font-size:14px;}
.schedule-actions-dialog .schedule-menu-partial button {min-height:36px;padding:6px 11px;font-size:13px;}
.schedule-menu-confirm {font-size:14px;line-height:1.7;}

.compact-dialog > .outcome-information {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.compact-dialog > .execution-composer {
  margin-top: 0;
}

.compact-dialog > .execution-composer > summary {
  display: none;
}

.tag-field {
  min-width: 0;
  padding: 0;
  margin: 12px 0 0;
  border: 0;
}

.tag-field > legend {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
}

.tag-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.tag-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 78px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.tag-choice > input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cat);
}

.tag-choice:has(input:checked) {
  color: var(--cat);
  border-color: var(--cat);
  background: var(--cat-soft);
}

.tag-choice:has(input:focus-visible) {
  outline: 2px solid var(--cat);
  outline-offset: 2px;
}

.tag-field:has(input[name="scheduledDate"]) .tag-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tag-field:has(input[name="scheduledDate"]) .tag-choice {
  min-width: 0;
  padding: 8px 4px;
  gap: 4px;
  font-size: 12px;
}

.dialog-week-navigation {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.dialog-week-navigation > button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--line);
  text-align: center;
}

.dialog-week-navigation > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.compact-note-composer textarea {
  width: 100%;
  max-width: 100%;
  min-height: 110px;
  line-height: 1.65;
}

.compact-note-composer .actions {
  justify-content: flex-end;
}

.compact-note-composer > .form-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.compact-note-composer > .form-row > button {
  min-height: 44px;
  white-space: nowrap;
}

.month-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 14px;
}

.month-list.card {
  padding: 0;
}

.month-list > .empty {
  padding: 16px;
}

.month-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.month-item:last-child {
  border-bottom: 0;
}

.month-item > button:first-child {
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  text-align: center;
  color: var(--cat, var(--primary));
}

.month-item > button:last-child {
  min-height: 44px;
  font-size: 12px;
}

.month-item-title,
.month-item h3,
.month-item strong {
  overflow-wrap: anywhere;
}

.month-item-title {
  min-width: 0;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
  text-align: left;
}

.month-item .week-module-tag {
  white-space: nowrap;
}

.month-item .muted,
.month-item .status-chip {
  font-size: 11px;
}

.month-item.is-done .month-item-title {
  text-decoration: line-through;
  color: var(--muted);
}

@media (max-width: 1000px) and (min-width: 651px) {
  .module-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .direction-browser {
    position: static;
    height: 240px;
    min-height: 240px;
  }
}

@media (max-width: 650px) {
  .module-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .direction-browser {
    position: static;
    height: 220px;
    min-height: 220px;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    overflow-x: auto;
    border-radius: 10px;
  }

  .direction-column {
    padding: 0 4px 6px;
  }

  .direction-column > h2,
  .direction-column > h3,
  .direction-column-heading {
    padding: 9px 5px;
    font-size: 11px;
  }

  .direction-option {
    min-height: 44px;
    font-size: 12px;
    padding: 7px 5px;
  }

  .workspace-heading {
    flex-direction: column;
    gap: 8px;
  }

  .workspace-heading > div:first-child,
  .workspace-heading > .workspace-actions {
    flex: 0 1 auto;
    width: 100%;
  }

  .workspace-heading > .workspace-actions {
    justify-content: flex-start;
  }

  .workspace-heading h1,
  .workspace-heading h2 {
    font-size: 20px;
  }

  .workspace-actions {
    margin-bottom: 12px;
  }

  .direction-workbench > .card {
    padding: 14px;
  }

  .compact-dialog-layer {
    padding: max(12px, env(safe-area-inset-top)) max(3vw, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(3vw, env(safe-area-inset-left));
  }

  .compact-dialog {
    width: 94vw;
    max-width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px;
    border-radius: 12px;
  }

  .compact-dialog h2 {
    font-size: 18px;
  }

  .compact-dialog .form-row {
    gap: 0;
  }

  .tag-choice {
    flex: 1 1 100px;
    min-width: 0;
    padding: 8px;
  }

  .tag-field:has(input[name="scheduledDate"]) .tag-choice {
    padding: 8px 3px;
    gap: 3px;
  }

  .tag-field:has(input[name="scheduledDate"]) .tag-choice > input {
    width: 12px;
    height: 12px;
  }

  .compact-note-composer > .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .compact-note-composer > .form-row > button {
    justify-self: end;
  }

  .month-item {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 5px;
    padding: 10px 8px;
  }

  .month-item-title {
    font-size: 14px;
  }

  .month-item > button:last-child {
    padding: 6px 8px;
  }
}

/* Outcome lists keep the primary name and state together without extra cards. */
.minimal-outcome-list {
  width: 100%;
  min-width: 0;
}

.minimal-outcome-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.minimal-outcome-row:has(> .minimal-outcome-progress) {
  grid-template-columns: 10px minmax(0, 1fr) auto auto auto;
}

.minimal-outcome-list.card {
  padding: 4px 16px;
}

.minimal-outcome-row:last-child {
  border-bottom: 0;
}

.minimal-outcome-row > .nav-dot,
.minimal-outcome-row > .minimal-outcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat);
}

.minimal-outcome-name {
  min-width: 0;
  min-height: 44px;
  padding: 7px 3px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.minimal-outcome-dimension,
.minimal-outcome-status,
.minimal-outcome-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.minimal-outcome-dimension {
  color: var(--muted);
  background: var(--soft);
}

.minimal-outcome-status {
  color: var(--cat);
  background: var(--cat-soft);
  gap: 4px;
}

button.minimal-outcome-status {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--cat-mid);
}

.minimal-outcome-progress {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.minimal-outcome-row.is-done .minimal-outcome-name,
.minimal-outcome-row[data-status="done"] .minimal-outcome-name {
  color: var(--muted);
}

.minimal-board-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  min-width: 0;
}

.minimal-board-controls > .field {
  flex: 0 1 200px;
  margin: 0;
  min-width: 0;
}

.minimal-board-controls > [role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.minimal-board-controls select {
  min-height: 44px;
}

.minimal-board-controls button {
  min-height: 44px;
  padding: 7px 10px;
  font-size: 12px;
}

.minimal-board-controls button[aria-pressed="true"] {
  color: var(--primary);
  background: var(--soft);
  font-weight: 600;
}

/* Only the finished-session screen expands to show the module browser. */
.focus-overlay:has(.focus-assignment-screen) {
  align-items: start;
}

.focus-assignment-screen {
  width: min(100%, 1000px);
  min-width: 0;
  margin: auto;
}

.focus-assignment-screen .focus-clock {
  margin: 16px 0 8px;
  font-size: 32px;
}

.focus-assignment-screen .focus-state {
  margin-bottom: 16px;
}

.timer-association-browser {
  min-width: 0;
  margin-top: 12px;
}

.timer-root-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  min-width: 0;
}

.timer-root-choice {
  min-width: 44px;
  max-width: 100%;
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.timer-root-choice.is-selected,
.timer-root-choice[aria-pressed="true"] {
  color: var(--cat);
  border-color: var(--cat);
  background: var(--cat-soft);
}

.timer-selected-path,
.timer-legacy-selection {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.timer-selected-path {
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--cat);
  background: var(--cat-soft);
}

.timer-association-browser .direction-browser {
  position: static;
  top: auto;
  height: 250px;
  min-height: 0;
  max-height: 250px;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timer-association-browser button,
.focus-assignment-screen .actions button {
  min-height: 44px;
}

.timer-record-list {
  min-width: 0;
  width: 100%;
  background: #fff;
  color: #26352e;
  --text: #26352e;
  --muted: #637168;
  --line: #dce1d8;
  padding: 6px 16px;
  border: 1px solid var(--line);
}

[data-category="rose"] {
  --cat: #a04770;
  --cat-soft: #f6eaf0;
  --cat-mid: #e7c4d4;
  --cat-done: #973660;
}

.root-management-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.timer-record-row {
  display: grid;
  grid-template-columns: 145px 105px auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.timer-record-row:last-child {
  border-bottom: 0;
}

.timer-record-row time,
.timer-record-time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.timer-record-duration {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.timer-record-module {
  max-width: 180px;
  justify-self: start;
  color: var(--cat);
  background: var(--cat-soft);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

button.timer-record-module {
  min-height: 44px;
}

.timer-record-note {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 850px) {
  .timer-record-row {
    grid-template-columns: 140px 100px minmax(0, 1fr);
  }

  .timer-record-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .workspace-root-heading > button:first-child {
    font-size: 13px;
    padding-left: 5px;
  }

  .minimal-outcome-row {
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
    gap: 5px;
    padding: 5px 0;
    min-height: 54px;
  }

  .minimal-outcome-row:has(> .minimal-outcome-progress) {
    grid-template-columns: 8px minmax(0, 1fr) auto auto auto;
  }

  .minimal-outcome-list.card {
    padding: 3px 12px;
  }

  .minimal-outcome-name {
    font-size: 13px;
    padding: 7px 1px;
  }

  .minimal-outcome-dimension,
  .minimal-outcome-status,
  .minimal-outcome-progress {
    padding: 4px 5px;
    font-size: 11px;
  }

  .minimal-board-controls {
    gap: 7px;
  }

  .minimal-board-controls > .field {
    flex: 1 1 140px;
  }

  .minimal-board-controls button {
    padding: 7px 8px;
  }

  .focus-assignment-screen {
    padding: 20px 14px;
  }

  .focus-assignment-screen .focus-clock {
    font-size: 28px;
  }

  .timer-association-browser .direction-browser {
    height: 180px;
    max-height: 180px;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
  }

  .timer-association-browser .direction-option {
    font-size: 11px;
    padding: 7px 4px;
  }

  .timer-root-choices {
    gap: 5px;
  }

  .timer-root-choice {
    padding: 7px 8px;
    font-size: 12px;
  }

  .timer-record-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 12px 0;
  }

  .timer-record-duration {
    text-align: right;
    font-size: 12px;
  }

  .timer-record-module {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }

  .timer-record-note {
    font-size: 12px;
  }
}

.direction-workbench,
.outcome-workbench {
  container-type: inline-size;
  container-name: workspace;
  min-width: 0;
}

.main:has(> .outcome-workbench) {
  max-width: none;
}

.workspace-panels,
.outcome-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.workspace-panels > *,
.outcome-panels > * {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.workspace-panels > .card,
.outcome-panels > .card {
  container-type: inline-size;
  container-name: workspace-card;
  height: 570px;
  min-height: 570px;
  max-height: 570px;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.workspace-panels > .card:last-child,
.outcome-panels > .card:last-child {
  border-bottom: 0;
}

.workspace-panels h2,
.outcome-panels h2 {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.workspace-panels .card-top,
.outcome-panels .card-top {
  align-items: start;
  gap: 8px;
}

.workspace-panels button,
.outcome-panels button {
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.workspace-panels input,
.workspace-panels textarea,
.workspace-panels select,
.outcome-panels input,
.outcome-panels textarea,
.outcome-panels select {
  min-width: 0;
  max-width: 100%;
}

.workspace-panels .form-row,
.outcome-panels .form-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.workspace-panels .metric-row,
.outcome-panels .metric-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
}

.workspace-panels .actions,
.outcome-panels .actions {
  gap: 8px;
}

.workspace-panels .note-body,
.outcome-panels .note-body,
.workspace-panels .notice,
.outcome-panels .notice {
  overflow-wrap: anywhere;
}

.workspace-panels .compact-note-composer > .form-row,
.outcome-panels .compact-note-composer > .form-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.workspace-panels .compact-note-composer > .form-row > button,
.outcome-panels .compact-note-composer > .form-row > button {
  justify-self: end;
}

@container workspace (min-width: 560px) {
  .workspace-panels,
  .outcome-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container workspace (min-width: 950px) {
  .workspace-panels,
  .outcome-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container workspace (min-width: 1280px) {
  .workspace-panels,
  .outcome-panels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container workspace-card (max-width: 320px) {
  .minimal-outcome-row,
  .minimal-outcome-row:has(> .minimal-outcome-progress) {
    grid-template-columns: 8px minmax(0, 1fr) auto;
    grid-template-areas: "dot name status" ". dimension progress";
    gap: 2px 6px;
    padding: 6px 0;
  }

  .minimal-outcome-row:not(:has(> .minimal-outcome-progress)) {
    grid-template-areas: "dot name status" ". dimension status";
  }

  .minimal-outcome-dot {
    grid-area: dot;
  }

  .minimal-outcome-name {
    grid-area: name;
    font-size: 13px;
    padding: 6px 0;
  }

  .minimal-outcome-dimension {
    grid-area: dimension;
    justify-self: start;
    padding: 3px 5px;
    font-size: 11px;
  }

  .minimal-outcome-status {
    grid-area: status;
    justify-self: end;
    padding: 4px 5px;
    font-size: 11px;
  }

  .minimal-outcome-progress {
    grid-area: progress;
    justify-self: end;
    max-width: 100px;
    padding: 3px 0;
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .direction-delete-row,
  .direction-create-form,
  .form-row,
  .metric-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .direction-create-form {
    gap: 8px;
  }

  .direction-create-form > button {
    justify-self: end;
  }

  .direction-delete-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {

  .workspace-panels,
  .outcome-panels {
    gap: 0;
  }

  .workspace-panels > .card,
  .outcome-panels > .card {
    padding: 13px;
  }
}

/* Outcome details surface real effort and actions before the supporting panels. */
.outcome-heading {
  align-items: start;
  margin: 8px 0 14px;
  gap: 10px 18px;
}

.outcome-heading > div:first-child {
  flex: 1 1 240px;
  min-width: 0;
}

.outcome-heading h1 {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.outcome-heading .heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.outcome-heading .heading-actions > button {
  min-height: 44px;
  font-size: 12px;
}

.outcome-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 14px;
  padding: 20px;
}

.outcome-progress-summary {
  min-width: 0;
}

.outcome-overview .period-outcome-progress {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.outcome-overview .period-outcome-progress > strong {
  min-width: 0;
  max-width: 100%;
  font-size: 32px;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}

.outcome-overview .period-progress-track {
  height: 8px;
}

.outcome-overview .outcome-time-caption {
  margin-top: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.outcome-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.outcome-primary-actions > button {
  flex: 1 1 125px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--cat-mid);
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
}

.outcome-primary-actions > .status-chip {
  color: var(--cat);
  background: var(--cat-soft);
  padding: 7px 10px;
}

.outcome-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.outcome-plan-row:last-child {
  border-bottom: 0;
}

.outcome-plan-row > div {
  min-width: 0;
}

.outcome-plan-title {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.outcome-plan-row small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-plan-row > button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--cat);
  border: 1px solid var(--cat-mid);
  font-size: 11px;
  white-space: nowrap;
}

.outcome-plan-row > .status-chip {
  font-size: 11px;
  color: var(--muted);
  background: var(--soft);
  padding: 4px 7px;
  white-space: nowrap;
}

.outcome-information .outcome-description {
  margin-bottom: 12px;
  white-space: pre-wrap;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.outcome-children details,
.workspace-notes > details,
.outcome-notes > details {
  margin-top: 12px;
}

.outcome-children summary,
.workspace-notes > details > summary,
.outcome-notes > details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

@container workspace (max-width: 600px) {
  .outcome-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .outcome-primary-actions > button {
    flex-basis: 120px;
  }
}

@media (max-width: 650px) {
  .outcome-heading {
    margin-top: 6px;
    gap: 8px;
  }

  .outcome-heading > div:first-child {
    flex-basis: 100%;
  }

  .outcome-heading .heading-actions {
    width: 100%;
  }

  .outcome-overview {
    padding: 15px;
  }

  .outcome-overview .period-outcome-progress > strong {
    font-size: 28px;
  }

  .outcome-primary-actions {
    gap: 7px;
  }

  .outcome-primary-actions > button {
    font-size: 12px;
  }
}

/* Fixed panels touch at one thin divider; only their contents scroll. */
@container workspace (560px <= width < 950px) {
  .workspace-panels > .card,
  .outcome-panels > .card {
    border-right: 1px solid var(--line);
  }

  .workspace-panels > .card:nth-child(2n),
  .outcome-panels > .card:nth-child(2n) {
    border-right: 0;
  }

  .workspace-panels > .card:nth-child(2n + 1):nth-last-child(-n + 2),
  .workspace-panels > .card:nth-child(2n + 1):nth-last-child(-n + 2) ~ .card,
  .outcome-panels > .card:nth-child(2n + 1):nth-last-child(-n + 2),
  .outcome-panels > .card:nth-child(2n + 1):nth-last-child(-n + 2) ~ .card {
    border-bottom: 0;
  }
}

@container workspace (950px <= width < 1280px) {
  .workspace-panels > .card,
  .outcome-panels > .card {
    border-right: 1px solid var(--line);
  }

  .workspace-panels > .card:nth-child(3n),
  .outcome-panels > .card:nth-child(3n) {
    border-right: 0;
  }

  .workspace-panels > .card:nth-child(3n + 1):nth-last-child(-n + 3),
  .workspace-panels > .card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .card,
  .outcome-panels > .card:nth-child(3n + 1):nth-last-child(-n + 3),
  .outcome-panels > .card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .card {
    border-bottom: 0;
  }
}

@container workspace (min-width: 1280px) {
  .workspace-panels > .card,
  .outcome-panels > .card {
    border-right: 1px solid var(--line);
  }

  .workspace-panels > .card:nth-child(4n),
  .outcome-panels > .card:nth-child(4n) {
    border-right: 0;
  }

  .workspace-panels > .card:nth-child(4n + 1):nth-last-child(-n + 4),
  .workspace-panels > .card:nth-child(4n + 1):nth-last-child(-n + 4) ~ .card,
  .outcome-panels > .card:nth-child(4n + 1):nth-last-child(-n + 4),
  .outcome-panels > .card:nth-child(4n + 1):nth-last-child(-n + 4) ~ .card {
    border-bottom: 0;
  }
}

/* Outcomes remain small actionable cards within the scrolling panels. */
.minimal-outcome-list > .minimal-outcome-row {
  padding: 7px 9px;
  margin-bottom: 7px;
  border: 1px solid var(--cat-mid);
  border-radius: 7px;
  background: var(--surface);
}

.minimal-outcome-list > .minimal-outcome-row:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid var(--cat-mid);
}

.minimal-outcome-list .minimal-outcome-name,
.minimal-outcome-list .minimal-outcome-row[data-status="done"] .minimal-outcome-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  min-height: 44px;
  max-height: calc(3em + 14px);
  color: var(--cat);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.minimal-outcome-list .minimal-outcome-name:hover {
  background: var(--cat-soft);
}

.minimal-outcome-list .minimal-outcome-dimension,
.minimal-outcome-list .minimal-outcome-status,
.minimal-outcome-list .minimal-outcome-progress {
  font-size: 11px;
}

/* A horizontal desktop menu frees the content from the former sidebar. */
.app-layout {
  grid-template-columns: minmax(0, 1fr);
}

.app-top {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.app-top > .brand {
  flex: 0 0 auto;
  font-size: 15px;
}

.top-nav {
  display: flex;
  flex: 1 1 540px;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.top-nav > .nav-item {
  width: auto;
  min-height: 34px;
  padding: 6px 9px;
  margin: 0;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.top-nav-group {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.top-nav-group > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}

.top-nav-group > summary::-webkit-details-marker {
  display: none;
}

.top-nav-group > summary > span {
  color: var(--muted);
  font-size: 10px;
}

.top-nav-group[open] > summary,
.top-nav-group > summary:hover {
  color: var(--primary);
  background: var(--soft);
}

.top-nav-group > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.top-nav-submenu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 25;
  width: 190px;
  max-width: min(90vw, 300px);
  max-height: min(70dvh, 550px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.top-nav-submenu > button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (min-width: 651px) and (hover: hover) and (pointer: fine) {

  .workspace-panels button,
.outcome-panels button,
.workspace-panels .card-top > button,
.outcome-panels .card-top > button,
.workspace-panels .actions > button,
.outcome-panels .actions > button,
.workspace-actions button,
.workspace-root-heading > button {
    min-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
  }

  .workspace-panels .minimal-outcome-name,
  .outcome-panels .minimal-outcome-name,
  .workspace-panels .minimal-outcome-row[data-status="done"] .minimal-outcome-name,
  .outcome-panels .minimal-outcome-row[data-status="done"] .minimal-outcome-name {
    min-height: 30px;
    font-size: 13px;
  }

  .workspace-panels button.minimal-outcome-status,
  .outcome-panels button.minimal-outcome-status {
    min-width: 0;
    min-height: 28px;
    padding: 4px 6px;
    font-size: 10px;
  }

  .workspace-panels .tag-choice,
  .outcome-panels .tag-choice {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 12px;
  }
}

.workspace-day-slot {
  margin-top: 14px;
}

.workspace-day-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.workspace-day-heading > button {
  min-height: 44px;
}

.workspace-day-slot > h3 {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}

.workspace-day-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.workspace-day-plan-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 0;
  color: var(--cat);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.workspace-day-plan-check {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--cat);
  font-size: 12px;
  text-align: center;
}

.workspace-day-category {
  padding: 3px 6px;
  color: var(--cat);
  background: var(--cat-soft);
  border-radius: 5px;
  font-size: 10px;
}

.workspace-day-plan.is-done .workspace-day-plan-title {
  color: var(--muted);
}

.workspace-day-plan.is-done .workspace-day-plan-title > span {
  text-decoration: line-through;
}

.workspace-day-empty {
  padding: 6px 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 650px) {
  .app-top {
    flex-wrap: nowrap;
    padding: 12px 14px;
  }

  .top-nav {
    display: none;
  }

  .app-top > .brand {
    font-size: 15px;
  }

  .workspace-panels button,
.outcome-panels button,
.workspace-actions button,
.workspace-root-heading > button,
.top-nav-submenu > button {
    min-height: 44px;
  }
}

.minimal-outcome-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 30px;
  min-height: 30px;
  width: 30px;
  padding: 4px;
  color: var(--cat);
}

.minimal-outcome-row:has(> .minimal-outcome-plan) {
  grid-template-columns: 8px minmax(0, 1fr) auto auto 30px;
  gap: 5px;
}

.minimal-outcome-row:has(> .minimal-outcome-plan):has(> .minimal-outcome-progress) {
  grid-template-columns: 8px minmax(0, 1fr) auto auto auto 30px;
}

[data-week-drop-date][data-week-drop-slot].is-drop-target {
  background: var(--soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.week-plan-item[draggable="true"],
.week-plan[draggable="true"] {
  cursor: grab;
}

[data-drag-outcome].is-dragging,
[data-drag-plan].is-dragging {
  outline: 2px solid var(--primary);
  background: var(--soft);
  opacity: .7;
}

@container workspace-card (max-width: 320px) {
  .minimal-outcome-row:has(> .minimal-outcome-plan),
  .minimal-outcome-row:has(> .minimal-outcome-plan):has(> .minimal-outcome-progress) {
    grid-template-columns: 8px minmax(0, 1fr) auto 30px;
    grid-template-areas: "dot name name name" ". dimension status plan" ". progress status plan";
    gap: 2px 5px;
  }

  .minimal-outcome-plan {
    grid-area: plan;
    align-self: center;
  }
}

@media (max-width: 650px) {

  .minimal-outcome-plan {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan),
  .minimal-outcome-row:has(> .minimal-outcome-plan):has(> .minimal-outcome-progress) {
    grid-template-columns: 8px minmax(0, 1fr) auto 44px;
    grid-template-areas: "dot name name name" ". dimension status plan" ". progress status plan";
    gap: 2px 5px;
  }

  .minimal-outcome-plan {
    grid-area: plan;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan) > .minimal-outcome-dot {
    grid-area: dot;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan) > .minimal-outcome-name {
    grid-area: name;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan) > .minimal-outcome-dimension {
    grid-area: dimension;
    justify-self: start;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan) > .minimal-outcome-status {
    grid-area: status;
  }

  .minimal-outcome-row:has(> .minimal-outcome-plan) > .minimal-outcome-progress {
    grid-area: progress;
  }
}

/* Shared outcome lists use two text rows and only a separating bottom line. */
.minimal-outcome-list > .minimal-outcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 0;
  min-height: 0;
  padding: 7px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.minimal-outcome-list > .minimal-outcome-row:last-child {
  margin: 0;
  border-bottom: 0;
}

.minimal-outcome-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.minimal-outcome-content {
  min-width: 0;
}

.minimal-outcome-list > .minimal-outcome-row .minimal-outcome-title-row > .minimal-outcome-name {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  flex: 1 1 auto;
  grid-area: auto;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  max-height: none;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.minimal-outcome-list > .minimal-outcome-row .minimal-outcome-title-row > .minimal-outcome-name:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.minimal-outcome-meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px 5px;
  min-width: 0;
  padding-left: 0;
  margin-top: 1px;
}

.minimal-outcome-meta-row > .minimal-outcome-dimension,
.minimal-outcome-meta-row > .minimal-outcome-progress,
.minimal-outcome-meta-row > .minimal-outcome-status {
  grid-area: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.minimal-outcome-meta-row > .minimal-outcome-progress {
  flex-shrink: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.minimal-outcome-meta-row > .minimal-outcome-dimension,
.minimal-outcome-meta-row > .minimal-outcome-status,
.minimal-outcome-meta-row > .minimal-outcome-plan {
  flex-shrink: 0;
}

.minimal-outcome-meta-row > button.minimal-outcome-status {
  min-width: 0;
  min-height: 28px;
  padding: 3px 4px;
  color: var(--cat);
}

.minimal-outcome-meta-row > .minimal-outcome-plan {
  grid-area: auto;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cat);
}

.minimal-outcome-meta-row > button:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.minimal-outcome-meta-row > button:focus-visible,
.outcome-add-link:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: 2px;
}

.card-top + .minimal-outcome-list {
  margin-top: 14px;
}

.outcome-add-link,
.direction-workbench .card-top > .outcome-add-link,
.outcome-panels .card-top > .outcome-add-link {
  min-height: 30px;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cat);
  font-size: 12px;
  font-weight: 500;
}

.outcome-add-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Direction creation, renaming and deletion share one scrolling panel. */
.direction-management .direction-editor-content {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin-top: 16px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.direction-management .direction-child-editor {
  margin-top: 12px;
}

.direction-management .direction-child-editor > h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.direction-management .direction-child-editor > .direction-create-form {
  margin-top: 10px;
}

.direction-editor-content > details > summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--cat);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.direction-management .direction-delete-row {
  margin-top: 14px;
  gap: 6px 10px;
}

.direction-editor-content .actions {
  margin-top: 12px;
  padding-top: 10px;
}

@container workspace-card (max-width: 200px) {
  .minimal-outcome-meta-row {
    padding-left: 0;
    gap: 2px 3px;
  }
}

@media (max-width: 650px), (pointer: coarse) {
  .minimal-outcome-list > .minimal-outcome-row .minimal-outcome-title-row > .minimal-outcome-name {
    min-height: 44px;
    height: 44px;
    max-height: none;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .minimal-outcome-meta-row {
    gap: 2px 3px;
  }

  .minimal-outcome-meta-row > button.minimal-outcome-status,
  .minimal-outcome-meta-row > .minimal-outcome-plan {
    min-width: 44px;
    min-height: 44px;
  }

  .minimal-outcome-meta-row > .minimal-outcome-plan {
    width: 44px;
  }

  .outcome-add-link,
  .direction-workbench .card-top > .outcome-add-link,
  .outcome-panels .card-top > .outcome-add-link,
  .direction-editor-content > details > summary {
    min-height: 44px;
  }
}

/* Focus direction details show read-only content and totals. */
.compact-dialog.panorama-detail-dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  padding: 18px;
  overflow: hidden;
}

.panorama-detail-dialog > header {
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: 9px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.panorama-detail-dialog > header h2 {
  min-width: 0;
  color: var(--cat);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.panorama-detail-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 10px 3px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.panorama-detail-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.panorama-detail-path {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.panorama-detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  margin-bottom: 9px;
}

.panorama-detail-tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cat-soft);
  color: var(--cat);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.panorama-detail-description {
  margin: 8px 0 11px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panorama-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.panorama-detail-stat {
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.panorama-detail-stat:nth-child(4n) {
  border-right: 0;
}

.panorama-detail-stat > strong,
.panorama-detail-stat > span {
  display: block;
  min-width: 0;
}

.panorama-detail-stat > strong {
  color: var(--cat);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
}

.panorama-detail-stat > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.panorama-detail-progress {
  height: 5px;
  margin: 8px 0 12px;
  background: var(--cat-soft);
  overflow: hidden;
}

.panorama-detail-progress > span {
  display: block;
  height: 100%;
  background: var(--cat);
}

.panorama-detail-section {
  min-width: 0;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.panorama-detail-section > h3 {
  color: var(--cat);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.panorama-detail-list {
  min-width: 0;
  padding: 0;
  margin: 6px 0 0;
  list-style: none;
}

.panorama-detail-list > li {
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.panorama-detail-list > li:last-child {
  border-bottom: 0;
}

.panorama-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.panorama-detail-row > :first-child {
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 500;
}

.panorama-detail-row > :last-child:not(:first-child) {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  font-weight: 400;
}

.panorama-detail-empty {
  padding: 7px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 650px) {
  .compact-dialog.panorama-detail-dialog {
    width: min(94vw, 680px);
    max-width: 100%;
    padding: 14px;
  }

  .panorama-detail-dialog > header h2 {
    font-size: 17px;
  }

  .panorama-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panorama-detail-stat {
    padding: 8px 6px;
  }

  .panorama-detail-stat:nth-child(2n) {
    border-right: 0;
  }

  .panorama-detail-stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .panorama-detail-stat > strong {
    font-size: 16px;
  }
}

/* Purpose sentences share the same quiet text treatment on every page. */
article.purpose-card {
  --purpose-ink: #2457a7;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.purpose-card > .purpose-sentence {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 3px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--purpose-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.purpose-card > .purpose-sentence:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.purpose-card > .purpose-sentence:focus-visible {
  outline: 2px solid var(--purpose-ink);
  outline-offset: 3px;
}

article.purpose-tone-0 { --purpose-ink: #2457a7; }
article.purpose-tone-1 { --purpose-ink: #64359a; }
article.purpose-tone-2 { --purpose-ink: #24633e; }
article.purpose-tone-3 { --purpose-ink: #9b3838; }
article.purpose-tone-4 { --purpose-ink: #006b72; }
article.purpose-tone-5 { --purpose-ink: #81561a; }
article.purpose-tone-6 { --purpose-ink: #963961; }
article.purpose-tone-7 { --purpose-ink: #414ea3; }

.purpose-edit-dialog > form > .field:first-child {
  margin-top: 0;
}

.purpose-edit-dialog .actions {
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 650px), (pointer: coarse) {
  .purpose-card > .purpose-sentence {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  article.purpose-tone-0 { --purpose-ink: #a9c9fb; }
  article.purpose-tone-1 { --purpose-ink: #d2b6f2; }
  article.purpose-tone-2 { --purpose-ink: #aed5b5; }
  article.purpose-tone-3 { --purpose-ink: #f1b1ad; }
  article.purpose-tone-4 { --purpose-ink: #a5d6de; }
  article.purpose-tone-5 { --purpose-ink: #e8c18e; }
  article.purpose-tone-6 { --purpose-ink: #e9b3cc; }
  article.purpose-tone-7 { --purpose-ink: #b9c5f2; }
}

/* Optional outcome covers take space only when an image is present. */
.minimal-outcome-list > .minimal-outcome-row:has(> .outcome-cover-thumb),
.outcome-dialog-list > .minimal-outcome-row:has(> .outcome-cover-thumb) {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
}

.outcome-cover-thumb {
  display: block;
  align-self: center;
  width: 40px;
  height: 50px;
  max-width: 100%;
  object-fit: cover;
}

@container workspace-card (max-width: 240px) {
  .minimal-outcome-list > .minimal-outcome-row:has(> .outcome-cover-thumb) {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 8px;
  }

  .minimal-outcome-row > .outcome-cover-thumb {
    width: 32px;
    height: 44px;
  }

  .minimal-outcome-meta-row {
    gap: 2px;
  }

  .minimal-outcome-meta-row > .minimal-outcome-dimension,
  .minimal-outcome-meta-row > .minimal-outcome-progress,
  .minimal-outcome-meta-row > button.minimal-outcome-status {
    padding-inline: 0;
  }
}

.outcome-cover-hero {
  display: block;
  flex: 0 0 auto;
  width: 150px;
  height: 200px;
  max-width: 100%;
  max-height: 200px;
  margin: 0 0 12px;
  overflow: hidden;
}

.panorama-detail-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}

.panorama-detail-intro > div {
  min-width: 0;
}

.panorama-detail-cover {
  display: block;
  width: 90px;
  height: 120px;
  max-width: 130px;
  max-height: 180px;
  object-fit: cover;
}

.cover-editor {
  min-width: 0;
}

.cover-editor-preview {
  display: block;
  width: 80px;
  height: 100px;
  max-width: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}

.outcome-cover-hero > .outcome-cover-image,
.cover-editor-preview > .outcome-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.cover-editor-actions > button,
.cover-editor-actions > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.cover-editor-actions > button:hover,
.cover-editor-actions > label:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cover-file-input,
.cover-file-picker > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

.cover-editor-actions > label:has(.cover-file-input:focus-visible),
.cover-editor-actions > .cover-file-picker:has(input[type="file"]:focus-visible) {
  outline: 2px solid var(--cat);
  outline-offset: 2px;
}

.cover-feedback {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.cover-feedback.is-error {
  color: var(--danger);
}

@media (max-width: 650px) {

  .panorama-detail-intro {
    gap: 8px;
  }

  .panorama-detail-cover {
    width: 75px;
    height: 100px;
  }
}

@media (max-width: 650px), (pointer: coarse) {
  .cover-editor-actions > button,
  .cover-editor-actions > label {
    min-height: 44px;
  }
}

.outcome-progress-with-cover {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.outcome-progress-with-cover > .outcome-cover-hero {
  margin: 0;
}

.outcome-progress-with-cover > .outcome-progress-summary {
  flex: 1 1 0;
  min-width: 0;
}

.outcome-primary-actions > .outcome-add-link {
  flex: 0 1 auto;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 12px;
  text-align: left;
}

.outcome-primary-actions > .outcome-add-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px) {
  .outcome-progress-with-cover > .outcome-cover-hero {
    width: 90px;
    height: 120px;
  }
}

@media (max-width: 650px), (pointer: coarse) {
  .outcome-primary-actions > .outcome-add-link {
    min-height: 44px;
  }
}

/* Workspace notes and direct child directions keep their original text. */
.workspace-note-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
}

.workspace-note-list > .workspace-note-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (min-width: 651px) {
  .workspace-note-list > .workspace-note-text {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(76, 112, 171, 0.09);
  }

  .workspace-note-list > .workspace-note-text:nth-child(4n + 2) {
    background: rgba(71, 125, 87, 0.09);
  }

  .workspace-note-list > .workspace-note-text:nth-child(4n + 3) {
    background: rgba(128, 96, 168, 0.09);
  }

  .workspace-note-list > .workspace-note-text:nth-child(4n) {
    background: rgba(169, 114, 54, 0.09);
  }
}

.direction-child-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin-top: 10px;
}

/* Parsed note content remains compact; headings and source editing are separate. */
.note-markdown {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.75;
  min-width: 0;
}
.workspace-note-list > .workspace-note-text.note-markdown { white-space: normal; }
.note-markdown > :first-child { margin-top: 0; }
.note-markdown > :last-child { margin-bottom: 0; }
.note-markdown p { margin: 9px 0; }
.note-markdown h1,.note-markdown h2,.note-markdown h3,
.note-markdown h4,.note-markdown h5,.note-markdown h6 {
  margin: 16px 0 7px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}
.note-markdown h1 { font-size: 20px; }
.note-markdown h2 { font-size: 17px; }
.note-markdown h3 { font-size: 15px; }
.note-markdown h4,.note-markdown h5,.note-markdown h6 { font-size: 14px; }
.note-markdown ul,.note-markdown ol { margin: 9px 0; padding-left: 23px; }
.note-markdown li { margin: 3px 0; }
.note-markdown li > p { margin: 2px 0; }
.note-markdown blockquote { margin: 12px 0; padding: 3px 12px; border-left: 3px solid var(--cat,var(--primary)); color: var(--muted); background: var(--soft); }
.note-markdown pre { margin: 12px 0; padding: 12px; border-radius: 7px; background: var(--soft); overflow: auto; white-space: pre; max-width: 100%; font-size: 12px; }
.note-markdown code { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: .9em; }
.note-markdown :not(pre) > code { padding: 2px 5px; border-radius: 4px; background: var(--soft); }
.note-markdown hr { border: 0; border-top: 1px solid var(--line); margin: 15px 0; }
.note-markdown .note-task-item { list-style: none; position: relative; }
.note-task-item > .note-task-mark { position: absolute; left: -21px; top: 1px; color: var(--primary); }
.note-image-reference { color: var(--muted); font-size: 12px; }
.note-markdown-editor { min-width: 0; }
.note-markdown-editor textarea { line-height: 1.7; min-height: 160px; }
.note-markdown-preview { margin-top: 10px; }
.note-markdown-preview > summary { cursor: pointer; color: var(--primary); font-size: 12px; min-height: 30px; padding: 4px 0; }
.note-markdown-preview > .note-markdown { margin-top: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-height: 330px; overflow: auto; }

.direction-child-list .direction-child-name {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cat);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.direction-child-list .direction-child-name:last-child {
  border-bottom: 0;
}

.direction-child-list .direction-child-name:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px), (pointer: coarse) {
  .direction-child-list .direction-child-name {
    min-height: 44px;
  }
}

/* Editable outcomes use a compact dialog rather than a full-page card grid. */
.compact-dialog.outcome-detail-dialog {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  padding: 18px;
  overflow: hidden;
}

.outcome-detail-dialog > header {
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.outcome-detail-dialog > header h2 {
  min-width: 0;
  color: var(--cat);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.outcome-dialog-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 10px 3px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.outcome-dialog-path {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-dialog-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.outcome-dialog-summary > .outcome-cover-hero {
  flex: 0 0 90px;
  width: 90px;
  height: 120px;
  max-height: 120px;
  margin: 0;
}

.outcome-dialog-progress {
  flex: 1 1 0;
  min-width: 0;
}

.outcome-dialog-meta {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-dialog-progress .period-outcome-progress {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  min-width: 0;
}

.outcome-dialog-progress .period-outcome-progress > span {
  min-width: 0;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.outcome-dialog-progress .period-outcome-progress > strong {
  max-width: 120px;
  font-size: 22px;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}

.outcome-dialog-progress .period-progress-track {
  height: 5px;
}

.outcome-dialog-progress .outcome-time-caption {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  margin: 10px 0;
}

.outcome-dialog-actions > button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 30px;
  max-width: 100%;
  padding: 4px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.outcome-dialog-actions > button:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outcome-dialog-actions > button:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: 2px;
}

.outcome-dialog-actions > .focus-toggle.is-focused {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outcome-dialog-description {
  margin: 8px 0 10px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.outcome-dialog-content > p > a {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.outcome-dialog-section {
  min-width: 0;
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.outcome-dialog-section > summary {
  min-height: 32px;
  padding: 6px 0;
  color: var(--cat);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.outcome-dialog-list {
  min-width: 0;
  margin-top: 3px;
}

.outcome-dialog-list > article:not(.purpose-card) {
  min-width: 0;
  padding: 8px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.outcome-dialog-list > article:last-child {
  border-bottom: 0;
}

.outcome-dialog-list > article > button {
  display: block;
  max-width: 100%;
  min-height: 30px;
  padding: 3px 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-dialog-list > article > button:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outcome-dialog-list > article > small {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.outcome-dialog-list > article > p {
  margin-top: 4px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.outcome-dialog-list > .purpose-card {
  padding: 1px 0;
}

.outcome-dialog-list > .minimal-outcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  gap: 0;
  min-height: 0;
}

.outcome-dialog-list .minimal-outcome-title-row > .minimal-outcome-name {
  display: block;
  flex: 1 1 auto;
  grid-area: auto;
  min-width: 0;
  min-height: 30px;
  height: auto;
  max-height: none;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.outcome-dialog-list .minimal-outcome-meta-row {
  flex-wrap: nowrap;
}

.outcome-dialog-list > .execution-history {
  margin-top: 0;
}

.outcome-dialog-list > .execution-history > summary {
  min-height: 30px;
  font-size: 11px;
}

.outcome-dialog-list .execution-record {
  padding: 8px 0;
}

@media (max-width: 650px) {
  .compact-dialog.outcome-detail-dialog {
    width: 100%;
    padding: 14px;
  }

  .outcome-detail-dialog > header h2 {
    font-size: 17px;
  }

  .outcome-dialog-summary {
    gap: 10px;
  }

  .outcome-dialog-summary > .outcome-cover-hero {
    flex-basis: 60px;
    width: 60px;
    height: 80px;
    max-height: 80px;
  }

  .outcome-dialog-progress .period-outcome-progress > strong {
    max-width: 100px;
    font-size: 20px;
  }

  .outcome-dialog-actions {
    gap: 2px 9px;
  }
}

@media (max-width: 650px), (pointer: coarse) {
  .outcome-dialog-actions > button,
  .outcome-dialog-section > summary,
  .outcome-dialog-list > article > button,
  .outcome-dialog-list .minimal-outcome-title-row > .minimal-outcome-name,
  .outcome-dialog-list > .execution-history > summary {
    min-height: 44px;
  }
}
.direction-editor-link {
  min-height: 28px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cat, var(--accent));
  font-size: 13px;
  font-weight: 700;
}

.direction-editor-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.compact-dialog.direction-edit-dialog {
  width: min(520px, 100%);
}

.direction-edit-dialog select {
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
}

.direction-edit-dialog [data-form="direction-edit"] > .actions {
  justify-content: flex-start;
  gap: 12px;
}

.direction-edit-dialog [data-delete-direction]:disabled {
  cursor: not-allowed;
}

@media (max-width: 650px), (pointer: coarse) {
  .direction-editor-link {
    min-height: 44px;
  }
}

/* Finished focus sessions offer independent direction and outcome choices. */
.focus-assignment-screen .timer-association-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-width: 0;
}

.focus-assignment-screen .timer-direction-picker,
.focus-assignment-screen .timer-outcome-picker {
  min-width: 0;
  max-width: 100%;
}

.focus-assignment-screen .timer-association-columns > section > h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.focus-assignment-screen .timer-direction-picker .timer-root-choices {
  gap: 4px;
  margin: 0 0 8px;
}

.focus-assignment-screen .timer-direction-picker .timer-root-choice {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 12px;
}

.focus-assignment-screen .timer-direction-picker .direction-browser {
  position: static;
  width: 100%;
  max-width: 100%;
  height: 286px;
  min-height: 0;
  max-height: 286px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 8px;
}

.focus-assignment-screen .timer-direction-picker .direction-column {
  padding: 0 5px 6px;
}

.focus-assignment-screen .timer-direction-picker .direction-column > h2 {
  padding: 8px 3px;
  margin-bottom: 3px;
  font-size: 11px;
}

.focus-assignment-screen .timer-direction-picker .direction-option {
  min-height: 34px;
  padding: 6px 4px;
  margin: 2px 0;
  font-size: 12px;
}

.focus-assignment-screen .timer-direction-picker .timer-selected-path {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 11px;
}

.focus-assignment-screen .timer-outcome-search {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

.focus-assignment-screen .timer-outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  align-content: start;
  gap: 6px 8px;
  height: 340px;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding: 2px;
}

.focus-assignment-screen .timer-association-browser .timer-outcome-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.focus-assignment-screen .timer-association-browser .timer-outcome-card:hover {
  background: var(--soft);
}

.focus-assignment-screen .timer-association-browser .timer-outcome-card.is-selected,
.focus-assignment-screen .timer-association-browser .timer-outcome-card[aria-pressed="true"] {
  border-color: var(--cat);
  background: var(--cat-soft);
}

.focus-assignment-screen .timer-outcome-card:focus-visible,
.focus-assignment-screen .timer-outcome-search:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.focus-assignment-screen .timer-outcome-cover,
.focus-assignment-screen .timer-outcome-placeholder {
  display: grid;
  place-items: center;
  width: 38px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
}

.focus-assignment-screen .timer-outcome-cover > img,
.focus-assignment-screen .timer-outcome-cover > .timer-outcome-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.focus-assignment-screen .timer-outcome-cover > .timer-outcome-placeholder {
  display: grid;
}

.focus-assignment-screen .timer-outcome-copy {
  display: block;
  min-width: 0;
}

.focus-assignment-screen .timer-outcome-copy > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2.8em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.focus-assignment-screen .timer-outcome-copy > small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.focus-assignment-screen .timer-outcome-grid > .empty {
  grid-column: 1 / -1;
  padding: 10px 2px;
  font-size: 12px;
}

@media (max-width: 650px) {
  .focus-assignment-screen .timer-association-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .focus-assignment-screen .timer-outcome-picker {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .focus-assignment-screen .timer-direction-picker .direction-browser {
    height: 180px;
    max-height: 180px;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .focus-assignment-screen .timer-outcome-search {
    min-height: 44px;
    font-size: 16px;
  }

  .focus-assignment-screen .timer-outcome-grid {
    height: 320px;
  }
}

@media (max-width: 650px), (pointer: coarse) {
  .focus-assignment-screen .timer-direction-picker .timer-root-choice,
  .focus-assignment-screen .timer-direction-picker .direction-option {
    min-height: 44px;
  }
}

/* The management map keeps creation in a small, explicit second step. */
.management-add-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 12px}
.management-add-options>button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;min-height:116px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);transition:background .18s,border-color .18s,transform .18s}
.management-add-options>button:not(:disabled):hover{background:var(--cat-light,#edf3ef);border-color:var(--cat,#315f49);transform:translateY(-2px)}
.management-add-options strong{font-size:20px;color:var(--cat,#315f49)}
.management-add-options span{font-size:14px;color:var(--muted);line-height:1.5}
.management-add-options>button:disabled{opacity:.5;cursor:not-allowed}
.management-module-create{margin-top:18px}
.management-module-create h2{font-size:18px}
.management-module-create .module-form{margin-top:12px}
@media(max-width:600px){.management-add-options{gap:10px}.management-add-options>button{padding:16px;min-height:104px}}

/* Month planning flows into the weekly execution calendar. */
.main.planning-content {max-width:1800px;width:100%;}
.planning-heading .notice {margin:8px 0 0;}
.planning-arrange-options .is-default {background:#edf5ef;border-color:#9cbaa7;}
.planning-other-tools {margin-top:22px;}
.planning-month-budget-summary {display:flex;flex-wrap:wrap;gap:7px;padding:12px;border-radius:10px;background:#f4f8f5;margin:12px 0;font-size:14px;color:#597361;}

.compact-dialog input[type="month"] {width:100%;display:block;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0;font-size:16px;}
/* Account access stays separate from all persisted workstation forms. */
.account-shell{max-width:470px}.account-shell .card{padding:28px}.account-shell h1{font-size:23px;margin-bottom:8px}.account-tabs{display:flex;padding:4px;border-radius:10px;background:var(--soft);gap:4px;margin-bottom:24px}.account-tabs button{flex:1;text-align:center;color:var(--muted)}.account-tabs button.selected{background:var(--surface);color:var(--primary);box-shadow:0 1px 5px #25372b0d}.account-shell input[type="email"],.account-bind input[type="email"]{display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:16px;padding:10px 12px}.account-shell .actions{border:0;padding-top:4px}.account-shell .account-owner-link{margin-top:12px;color:var(--muted);font-size:12px;text-align:center;min-height:32px;padding:4px 8px}.account-current{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.account-logout{font-size:11px;color:var(--muted);padding:5px 7px;min-height:30px}.account-address{margin-top:10px;color:var(--muted);overflow-wrap:anywhere}.account-bind{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.account-bind summary{color:var(--primary);cursor:pointer}.account-bind form{max-width:480px}@media(max-width:900px){.account-current{display:none}}@media(max-width:650px){.account-shell .card{padding:23px}.account-shell{padding:16px;margin:35px auto}}
.account-email-code{margin-top:12px}.account-email-code .email-code-send{width:auto;font-size:12px;min-height:34px;padding:5px 10px;color:var(--primary);border:1px solid var(--line);background:var(--soft)}.account-email-code [data-email-message]:empty{display:none}.account-email-code input[name="code"],[data-recovery-code-stage] input[name="code"]{letter-spacing:.16em}.email-verification-state{display:inline-block;margin-left:8px;font-size:11px;color:var(--muted);padding:2px 7px;border-radius:5px;background:var(--soft)}.email-verification-state.is-verified{color:var(--primary)}.account-settings [data-form="account-email-verify"]{max-width:440px;margin-top:14px}.account-settings [data-form="account-email-verify"] .actions{border:0;padding-top:0;margin-top:10px}.account-mail-settings{margin-top:20px;border-top:1px solid var(--line);padding-top:15px}.account-mail-settings summary{color:var(--primary);font-size:13px;cursor:pointer}.account-mail-settings form{max-width:560px}.account-mail-settings input[type="email"]{display:block;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:16px;padding:10px 12px}.account-shell [data-recovery-code-stage][hidden]{display:none}

/* Account administration stays separate from private workstation content. */
.admin-overview{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}.admin-overview>div{min-width:110px;padding:12px 18px;background:#fff;border:1px solid #e3e8e3;border-radius:10px}.admin-overview strong{display:block;font-size:22px}.admin-overview span{color:#7a877d;font-size:12px}.admin-users-card{padding:0;overflow:hidden}.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px}.admin-toolbar form{display:flex;gap:8px;min-width:240px}.admin-toolbar input{min-width:200px;max-width:340px;padding:8px 11px;font-size:13px}.admin-toolbar button,.admin-row-actions button,.admin-pagination button{padding:7px 11px;font-size:12px}.admin-status-filter{display:flex;gap:4px}.admin-status-filter button{background:transparent;border-color:transparent}.admin-status-filter button.selected{background:#eaf1ec;border-color:#dce7df}.admin-users-card>.feedback{margin:0 16px 14px}.admin-table-scroll{overflow-x:auto}.admin-user-table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;white-space:nowrap}.admin-user-table th{background:#f5f7f4;color:#7a877d;font-weight:500;padding:11px 14px}.admin-user-table td{padding:13px 14px;border-bottom:1px solid #edf0eb}.admin-user-table .admin-email{display:block;font-size:13px;max-width:320px;overflow:hidden;text-overflow:ellipsis}.admin-user-table small{display:block;margin-top:3px;font-size:11px}.admin-status{padding:4px 7px;border-radius:5px;background:#edf4ef;color:#426b51}.admin-status.is-disabled{background:#f8eee9;color:#91634c}.admin-row-actions{display:flex;gap:5px}.admin-row-actions button{background:transparent;border:0;color:#496859}.admin-row-actions button:hover{background:#eff4f0}.admin-empty{text-align:center;padding:32px!important;color:#7a877d}.admin-pagination{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:12px;gap:16px}.admin-pagination>div{display:flex;align-items:center;gap:12px}.admin-confirm-backdrop{position:fixed;inset:0;background:rgba(31,48,38,.35);display:flex;align-items:center;justify-content:center;z-index:1200;padding:20px}.admin-confirm{width:min(460px,100%);max-height:85vh;overflow:auto;padding:26px}.admin-confirm h2{margin-top:0}.admin-confirm p{font-size:14px;line-height:1.7}.admin-confirm-email{font-weight:600;overflow-wrap:anywhere}.admin-confirm .actions{justify-content:flex-end;margin-top:22px}.admin-settings-entry .notice{margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}