:root {
  font-family: system-ui, -apple-system, sans-serif;
  color: #1d3435;
  background: #f3f5f2;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { overflow-wrap: anywhere; width: 100%; max-width: 100%; margin: 0; min-width: 0; }
header, main, section, article, nav, form, details, #app, #content, #feed, #vault-list { min-width: 0; }
.grid > *, .toolbar > *, .actions > *, .formgrid > *, nav > * { min-width: 0; }
header {
  background: #153f3b; color: white; padding: 22px 5%;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
header > span { font-size: 13px; opacity: .8; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 23px; font-weight: 750; color: white; text-decoration: none; }
#account { margin-left: auto; display: flex; gap: 10px; align-items: center; min-width: 0; }
#account > span { min-width: 0; overflow-wrap: anywhere; }
main { width: 100%; max-width: 1240px; margin: auto; padding: 35px 24px; }
h1 { font-size: 34px; letter-spacing: -1px; margin: 0; }
h2 { font-size: 22px; }
h3 { margin: 0 0 10px; }
h1, h2, h3, p, small, label, a, li, code, .tag { overflow-wrap: anywhere; }
p { white-space: pre-wrap; }
.muted, small { color: #607574; }
.intro { margin-bottom: 28px; }
.toolbar, .filters, .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.grid, .grid.toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; }
.card { min-width: 0; background: white; border: 1px solid #dce3dc; border-radius: 14px; padding: 22px; margin-bottom: 14px; box-shadow: 0 4px 16px #173d3510; }
.card.unread { border-left: 4px solid #207c67; }
.tag { display: inline-block; max-width: 100%; padding: 3px 9px; background: #e7efeb; border-radius: 6px; font-size: 12px; margin-right: 5px; margin-bottom: 4px; }
.attention { background: #fff0ce; color: #715014; }
.internal { background: #f1e8f6; }
button, .button {
  min-height: 44px; max-width: 100%; cursor: pointer; border: 0; border-radius: 8px;
  background: #246957; color: white; padding: 11px 16px; font: inherit; font-weight: 600;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation;
}
button:hover { filter: brightness(.93); }
button:disabled { opacity: .6; cursor: wait; }
button.quiet { background: #e4ebe6; color: #264d42; }
:focus-visible { outline: 3px solid #b9781a; outline-offset: 3px; }
header button { padding: 8px 12px; flex-shrink: 0; }
input, select, textarea {
  display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 46px;
  padding: 11px; border: 1px solid #b8c9c0; border-radius: 7px;
  font: inherit; font-size: 16px; background: white; color: #1d3435;
}
select { text-overflow: ellipsis; }
textarea { min-height: 110px; resize: vertical; }
label { display: block; min-width: 0; margin: 12px 0; font-size: 14px; font-weight: 600; }
.checkbox-field, label:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; }
input[type=checkbox] { display: inline-block; flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; accent-color: #246957; }
input[type=file] { font-size: 16px; padding: 8px; overflow: hidden; }
input::file-selector-button { min-height: 40px; margin-right: 8px; border: 0; border-radius: 5px; padding: 7px; font: inherit; background: #e4ebe6; color: #264d42; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: end; margin: 12px 0 0; }
.filters label { margin: 0; }
.filterpanel { padding: 14px 18px; margin: 18px 0; border: 1px solid #dce3dc; border-radius: 12px; background: white; }
.filterpanel summary { min-height: 44px; padding: 9px 0; cursor: pointer; font-weight: 650; }
.formgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.login { max-width: 440px; margin: 7vh auto; }
form { min-width: 0; }
dialog {
  width: min(760px, calc(100% - 32px)); max-width: calc(100% - 32px);
  max-height: 90vh; max-height: 90dvh; border: 0; border-radius: 16px;
  padding: 24px; color: #1d3435; overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-block: 70px 30px;
}
dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.dialogbar { flex: 0 0 auto; min-width: 0; padding-bottom: 12px; background: white; }
#dialognotice:not(:empty) { padding: 10px; margin-top: 10px; background: #fff0ce; border-radius: 8px; overflow-wrap: anywhere; }
dialog::backdrop { background: #142c2bb0; }
#close { display: block; margin: 0 0 0 auto; box-shadow: 0 2px 8px #173d3520; }
#dialog { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px; scroll-padding-block: 20px 100px; }
#dialog h2 { margin-top: 0; }
html:has(dialog[open]) { overflow: hidden; }
#notice { position: sticky; top: 0; background: #fff0ce; padding: 0 24px; z-index: 5; overflow-wrap: anywhere; }
#notice:not(:empty) { padding: 12px 24px; }
a { color: #256957; }
nav { display: flex; gap: 9px; margin: 22px 0; flex-wrap: wrap; }
nav button[aria-current=page] { box-shadow: inset 0 -3px 0 #92c9b3; }
.detailrow { border-top: 1px solid #e4ebe6; padding-top: 10px; margin-top: 10px; }
.empty { padding: 40px; text-align: center; color: #607574; }
#vault-preview ul { padding-left: 22px; }
@media (max-width: 900px) {
  header { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); gap: 12px; }
  header > span { display: none; }
  .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; }
  #account { width: 100%; margin: 0; gap: 8px; font-size: 14px; }
  #account > span { flex: 1; }
  main { padding: 20px max(12px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .intro { margin-bottom: 16px; }
  h1 { font-size: clamp(25px, 7vw, 30px); line-height: 1.2; }
  h2 { font-size: 21px; line-height: 1.3; }
  h3 { font-size: 18px; }
  .intro p { margin: 10px 0; font-size: 14px; }
  nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 18px 0; }
  nav button { padding: 10px 8px; font-size: 14px; }
  .toolbar:not(.grid) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .toolbar button { width: 100%; font-size: 14px; padding: 11px 8px; }
  .grid, .grid.toolbar, .formgrid, .filters { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; border-radius: 12px; }
  .filterpanel { padding: 10px 14px; }
  .filters { gap: 12px; }
  .login { width: 100%; margin: 24px auto; }
  dialog {
    position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%;
    height: 100%; height: var(--viewport-height, 100dvh); max-height: 100%; max-height: var(--viewport-height, 100dvh);
    border-radius: 0; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  #close { margin-bottom: 0; }
  .form-actions { position: sticky; bottom: -4px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); margin-bottom: 0; background: white; border-top: 1px solid #dce3dc; z-index: 1; }
  .actions { align-items: stretch; }
  .actions > button { flex: 1 1 160px; }
  .actions > a { display: block; min-height: 44px; padding: 9px 0; }
  #dialog > button, #dialog > form > button { width: 100%; }
  #notice:not(:empty) { padding: 10px 14px; font-size: 14px; }
  .empty { padding: 26px 16px; }
}
@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .actions > button, .actions > .button { width: 100%; flex: 0 0 auto; }
  .actions > a { display: block; min-height: 44px; padding: 10px 0; }
  form > button, #content > button { width: 100%; }
}
@media (max-width: 350px) {
  #account { flex-wrap: wrap; }
  #account > span { flex-basis: 100%; }
  #account > button { flex: 1; }
}

.brand img { display: block; flex: 0 0 24px; width: 24px; height: 24px; }

.daily-quote { max-width: 65ch; font-size: 18px; color: #31574d; line-height: 1.55; }
@media (max-width: 900px) { .intro p.daily-quote { font-size: 16px; } }

.module-card h3 { margin-top: 12px; }
.module-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; font-size: 14px; color: #49685d; }
.module-timeline { scroll-margin-top: 18px; }
.entry-scope { margin: 10px 0 4px; }
.scope-link { background: #e7efeb; color: #245747; padding: 7px 12px; text-align: left; font-size: 14px; }
.linked-topics-picker { margin: 14px 0; padding: 12px; background: #f3f5f2; border-radius: 8px; }
.linked-topics-picker summary { cursor: pointer; min-height: 44px; padding: 9px 0; font-weight: 600; }
.linked-options { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.linked-options label { font-weight: 400; border-bottom: 1px solid #dce3dc; }
.related-topics { display: grid; gap: 8px; margin-bottom: 16px; min-width: 0; }
.related-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; }
.related-topic span { font-size: 13px; font-weight: 400; }
.followup { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0 24px; padding: 12px; border: 1px solid #dce3dc; border-radius: 10px; }
.followup > label { flex: 1 1 160px; margin: 0; }
.followup > button { flex: 1 1 200px; }
@media(max-width: 900px) { .followup { flex-direction: column; align-items: stretch; } .followup > label, .followup > button { flex: 0 0 auto; width: 100%; } }

/* Personal dashboard; uses the same authorized topics and modules as the hub. */
.home-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.home-intro > div:first-child { flex: 1 1 540px; min-width: 0; }
.home-intro .daily-quote { margin-bottom: 0; max-width: 65ch; }
.dashboard-quick { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.dashboard-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0; }
.dashboard-filters > label { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 500; font-size: 14px; }
.dashboard-filters select { width: auto; max-width: 320px; }
.dashboard-switch { display: flex; min-width: 0; margin-left: auto; padding: 4px; background: #e6ede6; border-radius: 10px; }
.dashboard-switch button { color: #6b7c6c; background: transparent; padding: 8px 14px; font-size: 14px; }
.dashboard-switch button.selected { background: white; color: #244e3e; box-shadow: 0 1px 5px #163e3610; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.dashboard-stat { display: flex; min-width: 0; gap: 15px; align-items: center; padding: 17px; min-height: 94px; color: #234d3d; background: white; border: 1px solid #dce5dc; border-radius: 12px; text-align: left; }
.dashboard-stat:first-child { background: #f7fbf6; border-color: #acd1b7; }
.dashboard-number { flex: 0 0 auto; font-size: 32px; line-height: 1; font-weight: 740; letter-spacing: -1px; }
.dashboard-stat strong, .dashboard-stat small { display: block; }
.dashboard-stat strong { font-size: 13px; }
.dashboard-stat small { font-size: 11px; font-weight: 400; margin-top: 3px; }
.dashboard-warning .dashboard-number { color: #ad6d28; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 20px; align-items: start; }
.dashboard-col { display: grid; gap: 20px; min-width: 0; }
.dashboard-panel { background: white; border: 1px solid #dce5dc; border-radius: 13px; overflow: hidden; min-width: 0; }
.dashboard-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #edf0e8; }
.dashboard-panel-head h2 { margin: 0; font-size: 18px; }
.dashboard-panel-head small { font-size: 12px; }
.dashboard-panel-head .tag { margin: 0; }
.dashboard-panel-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid #edf0e8; }
.dashboard-panel-footer button { font-size: 12px; padding: 8px 12px; }
.dashboard-task { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding: 17px 20px; border-bottom: 1px solid #edf0e8; }
.dashboard-task:last-child { border-bottom: 0; }
.dashboard-type { border-radius: 10px; flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 19px; background: #edf2e8; color: #4d724f; }
.dashboard-type.handover { background: #eaf0f9; color: #627a9c; }
.dashboard-type.task { background: #f2ede2; color: #997b46; }
.dashboard-task-content { flex: 1 1 170px; min-width: 0; }
.dashboard-task h3 { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; }
.dashboard-context { font-size: 11px; color: #6c8272; letter-spacing: .15px; }
.dashboard-task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dashboard-task-meta .tag { margin: 0; }
.dashboard-task-meta small { font-size: 11px; }
.dashboard-task > button { flex: 0 1 auto; margin-top: 16px; font-size: 12px; padding: 8px 12px; }
.dashboard-blue { background: #ecf1f9; color: #637da0; }
.dashboard-project-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,185px),1fr)); gap: 12px; padding: 16px; }
.dashboard-project { min-width: 0; border: 1px solid #e1e8dc; border-radius: 9px; padding: 14px; }
.dashboard-project h3 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; font-size: 14px; }
.dashboard-project-dot { width: 9px; height: 9px; flex: 0 0 9px; background: #648e72; border-radius: 50%; }
.dashboard-project:nth-child(2) .dashboard-project-dot { background: #9d8bb5; }
.dashboard-project:nth-child(3) .dashboard-project-dot { background: #a9986b; }
.dashboard-project-numbers { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #6c8071; margin: 8px 0 12px; }
.dashboard-module-chips { display: grid; gap: 5px; min-width: 0; margin: 10px 0; }
.dashboard-module-chip { display: block; background: #f2f5ee; color: #4e7055; border-radius: 5px; padding: 7px; font-size: 12px; font-weight: 500; text-align: left; }
.dashboard-project > button { font-size: 12px; width: 100%; padding: 8px 10px; margin-top: 6px; }
.dashboard-blocker { padding: 16px 20px; border-bottom: 1px solid #edf0e8; }
.dashboard-blocker:last-child { border: 0; }
.dashboard-blocker h3 { font-size: 14px; margin: 6px 0 8px; }
.dashboard-blocker p { font-size: 12px; color: #6c8071; }
.dashboard-blocker button { font-size: 12px; padding: 7px 10px; margin-top: 4px; }
#dashboard-blockers { scroll-margin-top: 18px; }
.dashboard-event { position: relative; padding: 13px 20px 13px 36px; border-bottom: 1px solid #edf0e8; }
.dashboard-event:last-child { border: 0; }
.dashboard-event::before { content: ''; position: absolute; left: 19px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: #7b9a76; }
.dashboard-event > small { display: block; font-size: 11px; }
.dashboard-event-link { display: block; width: 100%; background: transparent; color: #214d3f; font-size: 13px; text-align: left; padding: 7px 0; }
.dashboard-empty { padding: 22px 20px; font-size: 13px; color: #70816f; }
.dashboard-empty button { display: block; margin-top: 10px; font-size: 13px; }
.dashboard-history { margin-top: 24px; border: 1px solid #dce5dc; border-radius: 12px; padding: 14px 18px; background: #f8faf6; }
.dashboard-history > summary { min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 17px; font-weight: 650; }
.dashboard-create-types { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin: 20px 0; }
@media(max-width:1100px) { .dashboard-stat { gap: 10px; padding: 14px; } .dashboard-number { font-size: 28px; } .dashboard-layout { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); } }
@media(max-width:900px) {
 .home-intro { gap: 16px; }
 .home-intro > div:first-child { flex-basis: 100%; }
 .dashboard-quick { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); width: 100%; gap: 8px; }
 .dashboard-quick button { font-size: 14px; padding: 10px; }
 .dashboard-metrics { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
 .dashboard-filters { gap: 10px; }
 .dashboard-filters > label { width: 100%; }
 .dashboard-filters select { flex: 1; width: 100%; max-width: 100%; }
 .dashboard-switch { margin-left: 0; flex: 1; }
 .dashboard-switch button { flex: 1; padding: 8px 10px; font-size: 13px; }
 .dashboard-filters > button { font-size: 13px; }
 .dashboard-layout { display: flex; flex-direction: column; gap: 16px; }
 .dashboard-col { display: contents; }
 .dashboard-panel { width: 100%; }
 .dashboard-action-panel { order: 1; }
 .dashboard-blocker-panel { order: 2; }
 .dashboard-project-panel { order: 3; }
 .dashboard-activity-panel { order: 4; }
 .dashboard-project-grid { grid-template-columns: minmax(0,1fr); padding: 14px; }
 .dashboard-module-chips { grid-template-columns: repeat(auto-fit,minmax(min(100%,130px),1fr)); }
 .dashboard-project > button { width: auto; }
 .dashboard-panel-head { padding: 16px; }
 .dashboard-panel-head h2 { font-size: 18px; }
 .dashboard-history { padding: 10px 12px; }
}
@media(max-width:480px) {
 .dashboard-task { gap: 10px; padding: 15px 14px; }
 .dashboard-task-content { flex-basis: calc(100% - 46px); }
 .dashboard-task > button { width: calc(100% - 46px); margin: 0 0 0 46px; }
 .dashboard-stat { padding: 13px 10px; gap: 10px; }
 .dashboard-stat strong { font-size: 12px; }
 .dashboard-stat small { font-size: 10px; }
 .dashboard-number { font-size: 27px; }
 .dashboard-create-types { grid-template-columns: minmax(0,1fr); }
}

.dashboard-task h3, .dashboard-event-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }