/* Component mapping. Responsive roles are defined once in owner-ui-tokens.css. */
body { font-size:var(--type-body); line-height:1.5; }
html[data-theme="dark"] {
  --ink:#f4f4f1; --paper:#11110f; --mono-ink:#f4f4f1;
  --mono-secondary:#b8b8b3;
  --line:rgba(244,244,241,.25); --mono-line:rgba(244,244,241,.25);
  --item-rule:rgba(244,244,241,.25);
}
.topbar::before { font-size:var(--type-menu); letter-spacing:0; }
button, input, textarea, select { font-family:var(--sans); }
input, textarea, select { font-size:var(--type-body)!important; }
button { min-height:44px; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline:2px solid currentColor; outline-offset:4px;
}
.mobile-menu, .theme-trigger, .theme-menu button,
.primary, .text-button, .developer-mode,
.portal-subnav button, .portal-open-picker, .portal-load-more,
.home-story-foot button, .home-poster-actions button,
.photo-action-buttons button, .home-location-footer button,
.project-photo-picker-foot button, .modal-foot button,
.payment-actions button, .payment-gateway-actions button {
  font-size:var(--type-body)!important;
  min-height:var(--control-min)!important;
  line-height:1.4!important;
}
.nav button[data-page], body.mobile-nav-open .nav button[data-page] {
  min-height:var(--menu-row-min);
  height:auto!important;
  padding:var(--menu-row-padding) 0!important;
  font-size:var(--type-menu)!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  overflow-wrap:anywhere;
}
.nav button[data-page]::after { font-size:var(--type-caption); }
.sidebar-foot {
  font-size:var(--type-subhead)!important;
  line-height:1.6!important;
  color:var(--mono-secondary)!important;
}
.project-code, .project-name small, .sidebar small {
  font-size:var(--type-caption)!important;
}
.portal-page-head p, .portal-record-meta, .portal-card span,
.portal-ledger p, .portal-regulation-note, .portal-rule-link span,
.portal-guide-card p, .form-card p, .notice {
  font-size:var(--type-body)!important; line-height:1.55!important;
}
.owner-notice b { font-size:var(--type-body)!important; line-height:1.45!important; }
.owner-notice span, .owner-notice small,
.form-foot, .field label, .home-source-state, .home-location-note {
  font-size:var(--type-subhead)!important; line-height:1.5!important;
}
.owner-notice .notice-action, .portal-record-action {
  font-size:var(--type-body)!important;
  min-height:var(--control-min)!important;
  line-height:1.4!important;
  white-space:normal!important;
  padding:.588236rem .705883rem!important;
}
.close, .photo-action-close, .home-poster-close, .home-source-close,
.home-location-close, .qilai-birthday-close {
  width:var(--control-min)!important; min-width:44px!important;
  height:var(--control-min)!important; min-height:44px!important;
}
/* Calendar hit area and the circular date marker have separate geometry. */
.calendar button, .portal-log-day {
  min-height:var(--control-min)!important; height:auto!important;
  font-size:var(--type-subhead)!important;
  width:100%!important; min-width:0!important; padding:.2em 0!important;
  letter-spacing:0!important; font-variant-numeric:tabular-nums;
}
.topbar .user > .avatar {
  --avatar-size:max(44px,2.588236rem);
  box-sizing:border-box!important;
  width:var(--avatar-size)!important;height:var(--avatar-size)!important;
  min-width:var(--avatar-size)!important;min-height:var(--avatar-size)!important;
  flex:0 0 var(--avatar-size)!important;aspect-ratio:1;border-radius:50%!important;
  padding:0!important;line-height:1!important;place-items:center!important;
  font-size:var(--type-body)!important;white-space:nowrap;
}

.budget-money-copy span, .budget-phase small, .ring-metric-copy span {
  white-space:normal!important; overflow-wrap:anywhere;
}
.modal-card, .home-source-dialog, .home-location-dialog, .home-poster-dialog {
  max-height:calc(100dvh - 32px); overflow:auto;
}
.portal-record-title, .portal-card b { overflow-wrap:anywhere; }
.theme-menu { width:min(17rem,calc(100vw - 28px)); }
.theme-menu button { min-width:44px; }

/* Apply semantic roles to the original pages instead of scaling the whole UI. */
.page-head h1, .portal-page-head h1, .confirmation-page h1 {
  font-size:var(--type-large-title)!important; line-height:1.2!important;
}
.form-card h2, .modal-card h2, .home-poster-head h3,
.home-source-head h3, .home-location-head h3 {
  font-size:var(--type-title-1)!important; line-height:1.3!important;
}
.portal-guide-card h2, .portal-calendar-head h2 {
  font-size:var(--type-title-2)!important; line-height:1.35!important;
}
.owner-notices-head h2, .home-story-head h2, .project-radar .radar-head h2 {
  font-size:var(--type-title-1)!important; line-height:1.3!important;
}

/* Homepage composition: one page grid, with deliberate local grids for photos
   and calendars. Container breakpoints include sidebar and text enlargement. */
#dashboard {
  --home-grid-columns:4;
  --home-grid-gap:var(--space-4);
  --home-section-space:var(--space-8);
  --home-head-space:var(--space-6);
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--home-grid-columns),minmax(0,1fr));
  column-gap:var(--home-grid-gap);
  row-gap:var(--home-section-space);
}
#dashboard > section { grid-column:1 / -1; min-width:0; margin:0!important; }
#dashboard .home-story {
  display:grid;
  grid-template-columns:repeat(var(--home-grid-columns),minmax(0,1fr));
  column-gap:var(--home-grid-gap);
  padding:var(--home-head-space) 0 0!important;
}
@supports (grid-template-columns:subgrid) {
  #dashboard .home-story { grid-template-columns:subgrid; }
}
#dashboard .home-story-head, #dashboard .home-story-grid { grid-column:1 / -1; min-width:0; }
#dashboard .home-story-head {
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
  margin:0 0 var(--home-head-space)!important;
}
#dashboard .home-story-head > div:first-child { min-width:0; }
#dashboard .home-story-actions { margin:0!important; justify-self:start; }
#dashboard .home-story-grid { gap:var(--space-1); }
#dashboard .home-location-panel { margin-top:var(--space-6); max-width:var(--reading-width); }
#dashboard .home-location-panel label { margin-bottom:var(--space-2); }
#dashboard .home-location-controls { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
#dashboard .home-location-controls input { grid-column:auto; width:100%; }
#dashboard .home-location-controls button { justify-self:start; max-width:100%; white-space:normal; line-height:1.4; }
#dashboard .home-location-panel p { margin-top:var(--space-2); text-align:left; color:var(--mono-secondary)!important; }
#dashboard .owner-notices-head { padding-bottom:var(--home-head-space)!important; }
#dashboard .radar-head { padding:var(--home-head-space) 0!important; }
#dashboard .owner-notices-head h2, #dashboard .home-story-head h2,
#dashboard .radar-head h2 {
  margin:0!important;
  font-size:var(--type-title-1)!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}
#dashboard .integrated-budget-head h2, #dashboard .new-home-diary-head h3 {
  font-size:var(--type-title-2)!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:0!important;
}
#dashboard .integrated-budget { padding-top:var(--home-head-space)!important; }
#dashboard .integrated-budget-head { padding:0 0 var(--space-6)!important; }
#dashboard .new-home-diary {
  margin-top:var(--home-section-space)!important;
  padding:var(--home-head-space) 0!important;
}
#dashboard .new-home-diary-head { margin-bottom:var(--space-6)!important; }
/* Review-only overlay; query flag creates it, and it never intercepts input. */
.owner-grid-overlay {
  position:absolute; inset:0; z-index:20; pointer-events:none;
  display:grid; grid-template-columns:repeat(var(--home-grid-columns),minmax(0,1fr));
  gap:var(--home-grid-gap);
}
.owner-grid-overlay > i { background:rgba(0,115,220,.065); border-inline:1px solid rgba(0,115,220,.24); }
.owner-grid-overlay > i:nth-child(n+5) { display:none; }
@container owner-content (min-width:28rem) {
  #dashboard { --home-grid-columns:8; --home-grid-gap:var(--space-6); --home-section-space:var(--space-12); }
  #dashboard .home-location-controls { grid-template-columns:minmax(0,1fr) auto; }
  .owner-grid-overlay > i:nth-child(-n+8) { display:block; }
}
@container owner-content (min-width:42rem) {
  #dashboard { --home-grid-columns:12; --home-section-space:var(--space-16); --home-head-space:var(--space-8); }
  #dashboard .home-story-head { grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--home-grid-gap); }
  #dashboard .home-story-head > div:first-child { grid-column:1 / 10; }
  #dashboard .home-story-actions { grid-column:10 / -1; justify-self:end; }
  #dashboard .home-story-grid { gap:var(--home-grid-gap); }
  .owner-grid-overlay > i:nth-child(-n+12) { display:block; }
}
.project-select b { font-size:var(--type-title-2)!important; line-height:1.4!important; }
.home-story-head { flex-wrap:wrap; }
.home-story-actions { flex:0 0 auto; max-width:100%; }
.home-story-material-trigger {
  min-height:var(--control-min)!important;
  font-size:var(--type-body)!important; line-height:1.4!important;
  padding:.5rem .8rem!important; white-space:nowrap;
}
.portal-record-title, .portal-card b, .confirmation-item b {
  font-size:var(--type-title-3)!important; line-height:1.4!important;
}
.content {
  min-width:0!important; container:owner-content / inline-size;
  padding-inline:var(--page-gutter)!important;
  padding-top:var(--page-section-gap)!important;
}
.portal-page-head p, .home-story-head p, .portal-regulation-note {
  max-width:var(--reading-width);
}
.portal-page { --portal-space-4:var(--page-section-gap); }
@media (min-width:1024px) {
  .layout { grid-template-columns:minmax(0,var(--sidebar-width)) minmax(0,1fr)!important; }
  .sidebar { padding-inline:1.764706rem!important; }
  .sidebar-foot { position:static!important; margin-top:2rem; }
  .content { width:100%!important; max-width:1500px!important; margin-inline:auto; }
}

html[data-owner-navigation="drawer"] {
  .layout { grid-template-columns:minmax(0,1fr)!important; }
  .sidebar { display:none!important; }
  .mobile-menu { display:block!important; }
  .topbar::before { display:none!important; }
  body.mobile-nav-open { overflow:hidden; }
  body.mobile-nav-open .sidebar { display:block!important; position:fixed!important; z-index:25; }
  /* Layout follows content width. No absolute text controls can collide with the logo. */
  .topbar, body.mobile-nav-open .topbar {
    display:flex!important; flex-wrap:wrap!important;
    justify-content:space-between!important; align-items:center!important; flex-wrap:wrap;
    height:auto!important; min-height:64px!important;
    gap:8px!important;
    padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))!important;
  }
  .topbar .mobile-menu, body.mobile-nav-open .topbar .mobile-menu {
    order:-1;
    border:0!important; background:transparent!important; color:var(--ink)!important;
    position:static!important; transform:none!important;
    flex:0 0 auto; min-width:var(--control-min)!important;
    font-size:var(--type-menu)!important; letter-spacing:.03em!important;
    padding:0 .235294rem!important;
  }
  .topbar .brand, body.mobile-nav-open .topbar .brand {
    order:0;
    position:static!important; transform:none!important;
    flex:1 1 72px; width:auto!important; min-width:64px;
    margin:0!important; height:auto!important; text-align:center;
  }
  .topbar .brand-logo { width:100%!important; max-width:136px!important; height:auto!important; margin-inline:auto!important; }
  .topbar .user, body.mobile-nav-open .topbar .user {
    order:1;
    position:static!important; transform:none!important;
    flex:0 0 auto; margin:0 0 0 auto!important; gap:4px!important;
  }
  .topbar .theme-trigger, body.mobile-nav-open .topbar .theme-trigger {
    position:static!important; transform:none!important;
    min-width:var(--control-min)!important; min-height:var(--control-min)!important;
    height:auto!important; padding:.294118rem!important;
    font-size:var(--type-body)!important; line-height:1.4!important;
  }
  .topbar .avatar {
    width:44px!important; height:44px!important;
    font-size:var(--type-body)!important; flex-shrink:0;
  }
  body.mobile-nav-open .sidebar {
    inset:var(--owner-header-height,64px) 0 0!important;
    max-height:calc(100dvh - var(--owner-header-height,64px));
    padding:24px max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))!important;
    overflow-y:auto!important; overscroll-behavior:contain;
  }
  body.mobile-nav-open .sidebar-foot { position:static!important; margin-top:24px; }
}
/* Component reflow follows the remaining content width, including enlarged text. */
@container owner-content (max-width:42rem) {
  .portal-page-head, .portal-split, .portal-ledger, .portal-guide-list,
  .portal-detail, .site-diary-shell { grid-template-columns:minmax(0,1fr)!important; }
  .portal-page-head { gap:1rem; }
  .portal-page-head p { text-align:left; }
  .portal-record { grid-template-columns:3.294118rem minmax(0,1fr)!important; gap:.705883rem!important; }
  .portal-record-action { grid-column:2!important; justify-self:start; }
  .owner-notice { grid-template-columns:2.705883rem minmax(0,1fr)!important; }
  .owner-notice .notice-action { grid-column:2!important; justify-self:start; }
  .budget-money-rings, .budget-total.ring-total, .owner-load { grid-template-columns:minmax(0,1fr)!important; }
  .home-story-head, .integrated-budget-head { display:block!important; }
  .home-story-actions { margin-top:1rem; justify-items:start; }
  .portal-rule-link { grid-template-columns:minmax(0,1fr)!important; }
}
@media (max-width:600px) {
  /* Full-size actions wrap below the title instead of squeezing the main text. */
  .owner-notice {
    grid-template-columns:2.705883rem minmax(0,1fr)!important;
    gap:10px 12px!important; align-items:start!important;
  }
  .owner-notice .notice-action {
    grid-column:2!important; justify-self:start!important;
    min-width:0!important; max-width:100%; margin:0!important;
  }
  .portal-subnav { flex-wrap:wrap!important; }
  .portal-subnav button { white-space:normal; }
  .portal-log-day { width:100%!important; min-width:0!important; }
  .portal-calendar { padding:12px; }
  .modal-card { padding:24px!important; width:calc(100% - 24px)!important; }
  .home-story-location { max-width:100%; }
}