:root {
  color-scheme: light;
  --ink: #183345;
  --muted: #49616f;
  --base: #f3f6fa;
  --paper: #ffffff;
  --line: #d8e4eb;
  --input-line: #9fb4c0;
  --green: #087f6d;
  --green-deep: #066454;
  --softgreen: #edf6f2;
  --amber: #82591a;
  --softamber: #fbf5e9;
  --red: #a63838;
  --softred: #fbe6e4;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-section: 40px;
  --radius: 8px;
  --nav: 208px;
  --motion-fast: 140ms;
  --motion-medium: 200ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 16px;
}
* {box-sizing: border-box;}
[hidden] {display: none;}
html {background: var(--base); -webkit-text-size-adjust: 100%; scroll-padding-top: 100px;}
body {margin: 0; color: var(--ink); line-height: 1.6;}
button,input,select,textarea {font: inherit; color: inherit; max-width: 100%;}
button,a,input,select,textarea,summary {-webkit-tap-highlight-color: transparent; touch-action: manipulation;}
button {display: block; width: 100%; min-height: 48px; margin: var(--space-md) 0; padding: 12px var(--space-md); border: 1px solid transparent; border-radius: var(--radius); background: var(--line); font-weight: 600; line-height: 1.5; text-align: center; cursor: pointer; overflow-wrap: anywhere; transition: background-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);}
button:active:not(:disabled) {transform: translateY(1px);}
button:disabled,.disabled {opacity: .55; cursor: wait;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline: 3px solid var(--green); outline-offset: 3px;}
a {color: var(--green-deep); text-underline-offset: 4px;}
::selection {background: var(--green); color: var(--paper);}
input,textarea {caret-color: var(--green);}
h1,h2,h3,p,dl {margin-top: 0;}
h1 {font-size: 28px; line-height: 1.35; font-weight: 650; letter-spacing: -.02em; margin-bottom: var(--space-md); overflow-wrap: anywhere;}
h2 {font-size: 20px; line-height: 1.5; margin: var(--space-section) 0 12px; font-weight: 650;}
h3 {font-size: 18px; line-height: 1.5; margin: 0 0 var(--space-sm);}
p {margin-bottom: 12px; max-width: 72ch;}
strong {font-weight: 650;}
small,.muted,.field-help {font-size: 14px; line-height: 1.65; color: var(--muted);}
.primary {background: var(--green); color: var(--paper);}
.light {background: var(--softgreen); color: var(--green-deep); border-color: var(--line);}
.text-button {background: transparent; color: var(--green-deep); font-weight: 500; min-height: 44px; padding: 10px 8px;}
.compact {width: auto; min-height: 44px; padding: 10px 14px; font-size: 14px;}
.danger-button {background: var(--red); color: var(--paper);}
.danger {color: var(--red);}
.pending-text,.balance {color: var(--amber);}
.complete-text {color: var(--green-deep);}
.block {display: block;}
.body-copy {color: var(--muted); margin-bottom: var(--space-lg);}
.footnote {font-size: 14px; color: var(--muted); margin: var(--space-lg) 0; line-height: 1.8;}
.empty {padding: var(--space-lg) 0; color: var(--muted); font-size: 16px;}
.number {font-size: 28px; font-variant-numeric: tabular-nums;}
.amount {font-size: 32px; line-height: 1.3; font-variant-numeric: tabular-nums; margin: var(--space-sm) 0 var(--space-md); font-weight: 650;}
.date-token {white-space: nowrap; display: inline-block;}
.app-shell {min-height: 100dvh;}
.app-body {min-width: 0;}
.authenticated .app-body {margin-left: var(--nav);}
.screen {width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--space-xl) var(--space-xl) 64px; overflow-wrap: anywhere;}
.app-shell:not(.authenticated) .screen {max-width: 480px; padding-top: 56px;}
.sidebar {position: fixed; inset: 0 auto 0 0; width: var(--nav); background: var(--paper); border-right: 1px solid var(--line); padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; z-index: 20;}
.brand {display: grid; grid-template-columns: 36px 1fr; gap: 2px 8px; align-items: center; margin-bottom: var(--space-section);}
.brand-mark {display: grid; place-items: center; grid-row: span 2; width: 34px; height: 40px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: 24px;}
.brand strong {font-size: 18px;}
.brand small {font-size: 14px;}
.sidebar nav button {margin: 4px 0; text-align: left; background: transparent; font-size: 16px; color: var(--muted);}
.sidebar nav button[aria-current] {background: var(--softgreen); color: var(--green-deep);}
.side-foot {margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);}
.topbar {position: sticky; top: 0; z-index: 15; min-height: 74px; padding: 12px var(--space-xl); background: var(--paper); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);}
.topbar>div {display: flex; align-items: center; gap: 12px; min-width: 0;}
.topbar .active-role {font-size: 14px; color: var(--muted);}
.top-actions {margin-left: auto;}
.topbar button {margin: 0; width: auto; font-size: 14px; padding: 8px;}
.period {display: flex; align-items: center; gap: var(--space-sm);}
.period span {font-size: 14px; color: var(--muted);}
.period input {min-height: 44px; width: 148px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: 16px;}
.page-intro {margin-bottom: var(--space-lg);}
.page-intro h1 {margin-bottom: var(--space-sm);}
.page-intro p {margin: 0;}
.back-button {width: auto; text-align: left; margin: 0 0 var(--space-md); padding-left: 0;}
.ledger-summary {display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-section); padding: var(--space-lg) 0; margin: 0 0 var(--space-xl); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.ledger-summary>div {min-width: 120px;}
.ledger-summary dt {font-size: 14px; color: var(--muted); margin-bottom: var(--space-xs);}
.ledger-summary dd {font-size: 24px; line-height: 1.35; margin: 0; font-variant-numeric: tabular-nums; font-weight: 650;}
.ledger-summary dd small {font-weight: 400;}
.work-columns {display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); gap: var(--space-xl); align-items: start;}
.task-section {margin-bottom: var(--space-section); min-width: 0;}
.task-section>h2:first-child,.section-heading h2 {margin: 0;}
.section-heading {display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: 12px;}
.section-heading>span {font-size: 14px; color: var(--muted);}
.task-row {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); text-align: left; background: var(--paper); padding: var(--space-md); margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 400;}
.task-row:first-of-type {border-radius: var(--radius) var(--radius) 0 0;}
.task-row:last-of-type {border-radius: 0 0 var(--radius) var(--radius);}
.task-copy {display: flex; flex-direction: column; min-width: 0; gap: var(--space-xs);}
.task-copy>strong {font-size: 18px;}
.task-copy>span {font-size: 14px; color: var(--muted);}
.task-tail {flex-shrink: 0; color: var(--green-deep); font-size: 14px; text-align: right;}
.task-complete .task-tail {color: var(--muted);}
.future-row {display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: var(--space-md) 0; border-bottom: 1px solid var(--line);}
.future-row>span:nth-child(2) {grid-column: 1; color: var(--muted); font-size: 14px;}
.future-row>span:last-child {grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums;}
.utility-links {display: flex; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line);}
.utility-links button {width: auto; text-align: left; margin: 0; padding-left: 0;}
.setup-guide {padding: var(--space-lg); background: var(--softamber); margin: 0 0 var(--space-xl); border-radius: var(--radius);}
.setup-guide>h2:first-child {margin-top: 0;}
.setup-guide p {margin: var(--space-sm) 0;}
.setup-guide button {display: inline-block; width: auto; margin-bottom: 0;}
.building-browser {margin: var(--space-xl) 0;}
summary {cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 600;}
.building-split {display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,1fr); gap: var(--space-lg); margin-top: var(--space-lg);}
.panel {background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); min-width: 0;}
.panel-head h2 {margin: 0 0 var(--space-sm);}
.panel-head p {margin-bottom: var(--space-lg);}
.building-floor {display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: var(--space-md) 0; border-top: 1px solid var(--line);}
.floor-label {color: var(--muted); font-size: 14px;}
.floor-label strong {display: block; font-size: 24px; color: var(--ink);}
.rooms {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-sm);}
.room {display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; text-align: left; padding: 12px; background: var(--base); border: 1px solid var(--line); margin: 0; min-width: 0; font-weight: 400;}
.room[aria-pressed=true] {background: var(--softgreen); border-color: var(--green);}
.room>strong {font-size: 18px;}
.room-person {font-size: 14px; color: var(--muted);}
.status {display: inline-block; font-size: 14px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: var(--softamber); color: var(--amber);}
.status.done {background: var(--softgreen); color: var(--green-deep);}
.cost-line {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);}
.cost-line small {display: block;}
.cost-line button {margin: 0;}
.notice {padding: var(--space-md); margin: var(--space-md) 0; border-radius: var(--radius); background: var(--paper); color: var(--muted); font-size: 14px; overflow-wrap: anywhere;}
.notice.warning {background: var(--softamber); color: var(--amber);}
.notice.error {background: var(--softred); color: var(--red);}
.notice.success {background: var(--softgreen); color: var(--green-deep);}
.notice button {margin: var(--space-md) 0 0;}
.notice-row,.action-row {display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); border-radius: 0; border-bottom: 1px solid var(--line); background: var(--paper); text-align: left; margin: 0; padding: var(--space-md); font-weight: 500;}
.owner-menu,.button-row {display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0;}
.owner-menu button,.button-row button {flex: 1 1 180px; margin: 0;}
.tabs,.segment {display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-bottom: 12px; margin: var(--space-lg) 0; border-bottom: 1px solid var(--line);}
.tabs button,.segment button {flex: 1; min-width: 70px; margin: 0; font-size: 14px;}
.selected {background: var(--green); color: var(--paper);}
.floor-filter {display: flex; align-items: center; gap: 12px; margin: var(--space-lg) 0;}
.floor-filter select {padding: 8px 12px; min-height: 44px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);}
.meter-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xl);}
.meter-grid .floor:last-child:nth-child(odd) {grid-column: 1 / -1;}
.floor h2 {margin-top: 0;}
.room-row {margin: var(--space-lg) 0;}
.room-row>h3 {padding-bottom: var(--space-sm); margin: 0;}
.room-row .task-row {padding: 12px var(--space-md);}
.completion {max-width: 560px; margin: var(--space-xl) auto; padding: var(--space-xl); background: var(--paper); border-radius: var(--radius);}
.completion h1 {color: var(--green-deep);}
.completion .text-button {margin-bottom: 0;}
.page-bill,.page-receipt,.page-correction,.page-reverse,.page-unit,.page-lease,.page-baseline,.page-invite {max-width: 780px;}
.page-receipt {max-width: 640px;}
.unit-section {background: var(--paper); padding: var(--space-lg); border-radius: var(--radius);}
.unit-section>h2:first-child {margin: 0 0 var(--space-sm);}
.field {display: block; margin: var(--space-lg) 0;}
.field>span {display: block; font-size: 16px; font-weight: 600; margin-bottom: var(--space-sm);}
.field input,.field select,.field textarea {display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--paper); font-size: 18px; line-height: 1.5;}
.field input::placeholder,.field textarea::placeholder {color: var(--muted); opacity: 1;}
.field input[readonly],.field textarea[readonly] {background: var(--base);}
.field textarea {resize: vertical; min-height: 100px;}
.field-help {display: block; margin-top: var(--space-sm);}
.check {display: flex; align-items: flex-start; gap: 10px; margin: var(--space-lg) 0; font-size: 16px;}
.check input,.fee-options input {flex: 0 0 22px; width: 22px; height: 22px; accent-color: var(--green); margin: 2px 0 0;}
.fee-options {border: 0; margin: var(--space-lg) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md);}
.fee-options legend {font-weight: 600; padding: 0 0 12px;}
.fee-options label {display: flex; align-items: center; gap: var(--space-sm); min-height: 44px;}
.bill-list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md);}
.bill-row {background: var(--paper); text-align: left; border: 1px solid var(--line); margin: 0; padding: var(--space-lg); font-weight: 400;}
.row-between {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.row-between>* {min-width: 0;}
.bill-kinds {display: block; font-size: 14px; color: var(--muted); margin: 10px 0 var(--space-md);}
.balance {font-size: 18px; font-variant-numeric: tabular-nums;}
.bill-meta {font-size: 14px; color: var(--muted); margin: -8px 0 var(--space-md);}
.receipt-lead {background: var(--paper); padding: var(--space-lg); border-radius: var(--radius); margin: var(--space-lg) 0;}
.receipt-lead>p {margin-bottom: var(--space-sm);}
.receipt-lead button {margin-bottom: 0;}
.bill-detail {padding: 0 var(--space-lg) var(--space-lg); margin: var(--space-lg) 0; background: var(--paper); border-radius: var(--radius);}
.fee-line {padding: var(--space-lg) 0; border-bottom: 1px solid var(--line);}
.fee-line p {margin: var(--space-sm) 0 0;}
.due-total {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: var(--space-lg);}
.due-total strong {color: var(--amber); font-size: 20px; font-variant-numeric: tabular-nums;}
.due-total.settled strong {color: var(--green-deep);}
.receipt-row,.member-row,.notification,.audit-row {padding: var(--space-lg) 0; border-bottom: 1px solid var(--line);}
.receipt-row p,.member-row p {margin-bottom: var(--space-xs);}
.receipt-row .text-button {width: auto; padding-left: 0; margin-bottom: 0;}
.unit-buttons {display: flex; flex-wrap: wrap; gap: var(--space-sm);}
.unit-buttons button {margin: 0;}
.issue-sheet {padding: var(--space-lg); margin: var(--space-lg) 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);}
.issue-sheet>.notice,.issue-sheet .bill-detail {background: var(--base);}
.task-steps {display: flex; padding: 0; list-style: none; gap: var(--space-sm); margin: var(--space-lg) 0;}
.task-steps li {flex: 1; padding: var(--space-sm) 0; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 14px;}
.task-steps li[aria-current] {color: var(--green-deep); border-color: var(--green); font-weight: 650;}
.capture-layout {display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-xl); align-items: start;}
.capture-evidence {position: sticky; top: 100px;}
.capture-entry {min-width: 0;}
.photo-link {margin: 0 0 var(--space-md); border: 0; padding: 0; background: var(--paper);}
.meter-photo {display: block; width: 100%; height: 360px; object-fit: contain; background: var(--paper); border-radius: var(--radius);}
.photo-empty {display: flex; align-items: center; justify-content: center; text-align: center; min-height: 260px; padding: var(--space-lg); background: var(--paper); border: 1px dashed var(--input-line); border-radius: var(--radius); color: var(--muted);}
.photo-buttons {display: flex; gap: var(--space-sm); margin: var(--space-md) 0;}
.file-button {position: relative; display: flex; justify-content: center; align-items: center; flex: 1; min-height: 50px; border-radius: var(--radius); padding: 12px; overflow: hidden; cursor: pointer; font-weight: 600;}
.file-button input {position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;}
.file-button:focus-within {outline: 3px solid var(--green); outline-offset: 3px;}
.reading-anchor {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: var(--softgreen); padding: var(--space-md); margin: 0 0 var(--space-lg); border-radius: var(--radius);}
.reading-anchor>span {font-size: 14px; color: var(--muted);}
.capture-entry input[data-field=value] {font-size: 28px; font-variant-numeric: tabular-nums;}
.candidates {border-top: 1px solid var(--line); padding-top: var(--space-md); margin: var(--space-lg) 0;}
.candidates>p {font-size: 14px; color: var(--muted);}
.candidates button {text-align: left; margin: var(--space-sm) 0; font-size: 16px;}
.ocr-metadata {display: flex; flex-direction: column; gap: 4px; padding: 12px; margin: var(--space-sm) 0; font-size: 14px; color: var(--muted); background: var(--base);}
.metadata-details summary,.optional-note summary {font-size: 14px; color: var(--muted); font-weight: 500;}
.photo-dialog {position: fixed; inset: 0; z-index: 60; background: var(--ink); padding: var(--space-lg); overflow: auto;}
.photo-dialog button {position: sticky; top: 0; margin-top: 0; width: auto;}
.photo-dialog img {display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto;}
.house-mark {display: grid; place-items: center; width: 60px; height: 68px; color: var(--paper); background: var(--ink); border-radius: var(--radius); margin: 0 0 var(--space-lg); font-size: 32px;}
.local-badge {color: var(--muted); font-size: 14px; margin-bottom: var(--space-md);}
.saving {position: fixed; left: var(--nav); right: 0; bottom: 0; z-index: 50; padding: 12px var(--space-lg) max(12px,env(safe-area-inset-bottom)); color: var(--paper); background: var(--ink); text-align: center; font-size: 14px;}
footer {display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-top: 1px solid var(--line); margin-top: var(--space-section); padding-top: var(--space-md); font-size: 14px; color: var(--muted);}
footer button {width: auto; margin: 0; font-size: 14px;}
.mobile-only,.mobile-nav {display: none;}
.large-type {font-size: 20px;}
.large-type h1 {font-size: 28px;}
.large-type h2 {font-size: 24px;}
.large-type button {min-height: 60px; font-size: 20px;}
.large-type .body-copy,.large-type .muted,.large-type .field>span,.large-type .field input,.large-type .field select,.large-type .field textarea,.large-type .check,.large-type .task-copy>strong,.large-type .task-copy>span,.large-type .task-tail,.large-type .future-row>span {font-size: 20px;}
.large-type .task-row {flex-wrap: wrap; gap: var(--space-sm);}
.large-type .task-copy {flex-basis: 100%;}
.large-type .task-tail {flex: 1; text-align: left;}
.large-type .task-steps li {font-size: 16px;}
.large-type .topbar button,.large-type footer button {font-size: 16px; min-height: 44px;}
@media (hover:hover) {
  .primary:hover {background: var(--green-deep);}
  .light:hover,.task-row:hover,.action-row:hover,.bill-row:hover {background: var(--softgreen);}
  .text-button:hover {text-decoration: underline; text-underline-offset: 4px;}
}
@media (max-width:1100px) {
  .work-columns,.building-split {grid-template-columns: 1fr;}
  .capture-layout {grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-lg);}
}
@media (max-width:900px) {
  .sidebar {display: none;}
  .authenticated .app-body {margin-left: 0;}
  .screen {max-width: 720px; padding: var(--space-lg) var(--space-lg) calc(112px + env(safe-area-inset-bottom));}
  .topbar {padding: 10px var(--space-lg); min-height: 66px; gap: var(--space-sm);}
  .topbar>div {gap: var(--space-sm);}
  .topbar .active-role,.period span {display: none;}
  .topbar strong {font-size: 16px;}
  .period input {width: 144px;}
  .mobile-nav {position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-around; gap: 4px; background: var(--paper); border-top: 1px solid var(--line); padding: 5px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));}
  .mobile-nav button {flex: 1; width: auto; min-width: 0; min-height: 54px; margin: 0; padding: 8px 2px; font-size: 14px; background: transparent; color: var(--muted); font-weight: 600;}
  .mobile-nav button>span {display: block;}
  .mobile-nav button[aria-current] {background: var(--softgreen); color: var(--green-deep);}
  #app.editing .mobile-nav {display: none;}
  .saving {left: 0; bottom: 64px;}
  #app.editing .saving {bottom: 0;}
  .mobile-only {display: block;}
  .desktop-only {display: none;}
  .meter-grid {grid-template-columns: 1fr; gap: var(--space-lg);}
  .meter-grid .floor:last-child:nth-child(odd) {grid-column: auto;}
  .capture-layout {grid-template-columns: 1fr;}
  .capture-evidence {position: static;}
  .photo-empty {min-height: 200px;}
  .meter-photo {height: auto; max-height: 320px;}
  .bill-list {grid-template-columns: 1fr;}
  .room-detail {display: none;}
  .room-expanded>.building {display: none;}
  .room-expanded>.room-detail {display: block;}
  .large-type .mobile-nav button {font-size: 16px; min-height: 60px;}
  .large-type .screen {max-width: 640px;}
  .large-type .page-receipt {padding-top: var(--space-md);}
  .large-type .page-receipt .back-button {margin-bottom: var(--space-sm);}
  .large-type .page-receipt h1 {margin-bottom: 4px;}
  .large-type .page-receipt .body-copy {margin-bottom: 12px;}
  .large-type .page-receipt .field {margin: 12px 0;}
  .large-type .page-receipt .check {margin: 12px 0;}
}
@media (max-width:350px) {
  .screen {padding-left: var(--space-md); padding-right: var(--space-md);}
  .topbar {padding-left: 12px; padding-right: 12px;}
  .topbar strong {font-size: 14px;}
  .period input {width: 132px;}
  .topbar button {padding: 8px 2px;}
  .rooms {grid-template-columns: repeat(2,minmax(0,1fr));}
  .panel,.unit-section,.receipt-lead,.bill-detail,.issue-sheet {padding-left: var(--space-md); padding-right: var(--space-md);}
  .large-type .future-row {grid-template-columns: 1fr;}
  .large-type .future-row>span:last-child {grid-column: 1; grid-row: auto;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration: .01ms; transition-duration: .01ms; scroll-behavior: auto;}
}
@media print {
  .sidebar,.topbar,.mobile-nav,footer,button,.utility-links {display: none;}
  .authenticated .app-body {margin-left: 0;}
  .screen {padding: 0; max-width: none;}
  body {background: var(--paper);}
}
/* Small, task-triggered feedback; no page-load choreography. */
.unit-section:not([hidden]) {animation: section-reveal var(--motion-medium) var(--ease-out);}
.notice.success {animation: save-feedback var(--motion-medium) var(--ease-out);}
.task-tail.pending-text {color: var(--amber);}
@keyframes section-reveal {from {transform: translateY(4px);} to {transform: translateY(0);}}
@keyframes save-feedback {from {opacity: .65;} to {opacity: 1;}}
@media (prefers-reduced-motion:reduce) {.unit-section:not([hidden]),.notice.success {animation: none;}}