@layer reset, tokens, base, components, shell, features, states, legacy, overrides;

@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --fc {
  syntax: "<color>";
  inherits: true;
  initial-value: #17211d;
}

@property --bc {
  syntax: "<color>";
  inherits: true;
  initial-value: #d5dfda;
}

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  src: url("/assets/PretendardVariable.woff2") format("woff2-variations");
  font-display: swap;
}

@layer tokens {
:root {
  color-scheme: light;
  --font-sans-ko: "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  --font-sans: var(--font-sans-ko);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;

  --bg-0: #ffffff;
  --bg-1: #f4f7f5;
  --bg-2: #e8efeb;
  --bg-3: #fbf7f2;
  --fc-0: #17211d;
  --fc-1: #52605a;
  --fc-2: #78857f;
  --bc-0: #d5dfda;
  --bc-1: #c5d1cb;
  --bc-2: var(--bc-1);

  --primary: #087f78;
  --primary-strong: #075f5a;
  --primary-soft: #dcefed;
  --primary-surface: #f3fbf8;
  --primary-border: #b8d9d1;
  --success: #2f7d5c;
  --success-soft: #e5f3ec;
  --warning: #9b671a;
  --warning-soft: #f8efdc;
  --info: #3f6f8f;
  --info-soft: #e5eff5;
  --danger: #c9513d;
  --danger-soft: #fff2ef;
  --focus: #1769aa;
  --on-strong: #ffffff;
  --backdrop: rgb(23 33 29 / .46);
  --surface-glass: rgb(255 255 255 / .96);

  --fs-caption: .75rem;
  --fs-small: .8125rem;
  --fs-body: .9375rem;
  --fs-emphasis: 1rem;
  --fs-title-sm: 1.125rem;
  --fs-title-lg: 2rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --control-compact: 2.25rem;
  --control-default: 2.75rem;
  --control-large: 3rem;
  --control-border-width: 1px;
  --radius: .5rem;
  --shadow-soft: 0 .3125rem 1.125rem rgb(23 33 29 / .07);
  --shadow-layer: 0 1.25rem 3rem rgb(23 33 29 / .16);
  --focus-ring: .1875rem solid var(--focus);
  --focus-offset: .1875rem;
  --nav-width: clamp(15rem, 18%, 18rem);

  --bg: var(--bg-0);
  --fc: var(--fc-0);
  --bc: var(--bc-0);
  --fs: 1rem;
  --icon-size: 1.25em;

  /* 첫 Source에서 사용하던 이름은 소비 지점을 단계적으로 옮길 때까지 역할 Alias로 유지한다. */
  --surface: var(--bg-0);
  --surface-soft: var(--bg-1);
  --text: var(--fc-0);
  --muted: var(--fc-1);
  --line: var(--bc-0);
  --radius-sm: var(--radius);
  --radius-lg: var(--radius);
}

}

@layer base {

*,
*::before,
*::after { box-sizing: border-box; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html, body { min-height: 100%; margin: 0; }
html { background: var(--bg-1); }
body {
  min-width: min(20rem, 100%);
  background: var(--bg-1);
  color: var(--fc);
  font-size: var(--fs);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea {
  margin: 0;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
button, a { -webkit-tap-highlight-color: transparent; }
button {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; }
fieldset { min-width: 0; padding: 0; border: 0; }
img { display: block; max-width: 100%; }
svg.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  pointer-events: none;
}
::placeholder { color: var(--fc-2); opacity: 1; }
::selection { background: var(--primary-soft); color: var(--primary-strong); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}
[hidden] { display: none !important; }

}

@layer legacy {

.service-shell {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  min-height: 100vh;
}

.shell-side {
  display: flex;
  position: sticky;
  top: 0;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  padding: var(--space-5) 8%;
  border-right: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}

.shell-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.brand,
.mobile-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.brand-mark,
.mobile-brand img {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 22%;
}

.brand > span {
  display: grid;
  min-width: 0;
}

.brand strong {
  color: var(--fc-0);
  font-size: 1.0625rem;
  line-height: 1.35;
}

.brand small {
  overflow: hidden;
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button.mobile-menu-close { display: none; }

.primary-nav {
  flex: 1;
  min-height: 0;
  margin-top: var(--space-6);
  overflow-y: auto;
}

.nav-group {
  display: grid;
  gap: .3rem;
}

.nav-group + .nav-group { margin-top: var(--space-5); }

.nav-label {
  padding: 0 var(--space-3) .45rem;
  color: var(--fc-2);
  font-size: var(--fs-caption);
  font-weight: 750;
}

.nav-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 2.875rem;
  padding: .65rem var(--space-3);
  gap: var(--space-3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fc-1);
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-1);
  color: var(--fc-0);
}

.nav-item[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
}

.nav-item .icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

.side-bottom {
  flex: 0 0 auto;
  padding-top: var(--space-4);
  border-top: var(--control-border-width) solid var(--bc-0);
}

.logout-button {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: .7rem var(--space-3);
  gap: var(--space-3);
  border-radius: var(--radius);
  color: var(--fc-1);
  text-align: left;
}

.logout-button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.logout-button > span { display: grid; min-width: 0; }
.logout-button strong { font-size: var(--fs-small); line-height: 1.4; }
.logout-button small {
  overflow: hidden;
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-stage {
  min-width: 0;
  min-height: 100vh;
  background: var(--bg-1);
}

.mobile-bar { display: none; }

.view-mount {
  min-height: 100vh;
  padding: 2.5rem 5%;
}

.view {
  width: min(100%, 73.75rem);
  margin: 0 auto;
}

.view-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-6);
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}

h1 {
  font-size: var(--fs-title-lg);
  line-height: 1.25;
  letter-spacing: -.025em;
}

h2 {
  font-size: var(--fs-title-sm);
  line-height: 1.35;
  letter-spacing: -.015em;
}

.view-head p:not(.eyebrow),
.dialog p,
.empty-card p,
.buddy-panel p {
  color: var(--fc-1);
}

.button {
  --control-height: var(--control-default);
  --control-padding: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: .5rem var(--control-padding);
  gap: var(--space-2);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.button:hover {
  border-color: var(--primary-border);
  color: var(--fc-0);
}

.button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-strong);
}

.button.primary:hover {
  border-color: var(--primary-strong);
  background: var(--primary-strong);
  color: var(--on-strong);
}

.button.secondary,
.button.subtle { background: var(--bg-0); color: var(--fc-1); }

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

.icon-button {
  display: inline-grid;
  width: var(--control-default);
  height: var(--control-default);
  min-height: var(--control-default);
  aspect-ratio: 1;
  place-items: center;
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
}

.icon-button:hover { background: var(--bg-1); }
.icon-button .icon { width: 1.35rem; height: 1.35rem; }

.buddy-panel {
  display: flex;
  align-items: flex-start;
  padding: var(--space-5);
  gap: var(--space-4);
  border: var(--control-border-width) solid var(--primary-border);
  border-left: .35rem solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-surface);
}

.buddy-dot {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 850;
}

.content-section { margin-top: var(--space-6); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-4);
}
.count-chip {
  min-width: 1.8rem;
  padding: .15rem var(--space-2);
  border-radius: 999rem;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
  text-align: center;
}
.empty-card {
  display: grid;
  min-height: 14rem;
  place-items: center;
  align-content: center;
  padding: var(--space-6);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  text-align: center;
}
.empty-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.layer-root { position: relative; z-index: 120; }
.layer-backdrop {
  display: grid;
  position: fixed;
  z-index: 120;
  inset: 0;
  place-items: center;
  padding: var(--space-6) 5%;
  background: var(--backdrop);
}
.dialog {
  width: min(100%, 31rem);
  padding: var(--space-5) 6%;
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  box-shadow: var(--shadow-layer);
}
.dialog-copy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.dialog-copy > div { min-width: 0; flex: 1; }
.dialog-kicker {
  margin-bottom: var(--space-2);
  color: var(--primary);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.dialog h2 { overflow-wrap: anywhere; }
.dialog h2 + p {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--space-5);
  gap: var(--space-2);
}
.dialog-actions > .button { min-width: 6rem; }
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border: .18rem solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast-root {
  display: grid;
  position: fixed;
  z-index: 240;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  width: min(30rem, calc(100vw - 2rem));
  gap: var(--space-2);
  transform: translateX(-50%);
}
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--fc-0);
  color: var(--on-strong);
  box-shadow: var(--shadow-layer);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.sign-shell {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 100vh;
  background: var(--bg-0);
}

.sign-brand-panel {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 8% 10%;
  background: var(--primary-soft);
}

.sign-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sign-brand img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
}

.sign-brand > span,
.sign-brand strong,
.sign-brand small { display: block; }

.sign-brand strong { font-size: var(--fs-title-sm); line-height: 1.35; }
.sign-brand small {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}

.sign-brand-copy {
  max-width: 32rem;
  min-width: 0;
}

.sign-brand-copy > h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.sign-brand-copy > p {
  margin-top: var(--space-4);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.sign-brand-points {
  display: grid;
  margin-top: var(--space-6);
  gap: var(--space-3);
}

.sign-brand-points > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.sign-brand-points > div > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .72);
  color: var(--primary-strong);
}

.sign-brand-points p { min-width: 0; }
.sign-brand-points strong,
.sign-brand-points small { display: block; }
.sign-brand-points strong { font-size: var(--fs-small); line-height: 1.4; }
.sign-brand-points small {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.sign-brand-foot { color: var(--fc-2); font-size: var(--fs-caption); }

.sign-workspace {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6% 8%;
  background: var(--bg-0);
}

.sign-card { width: min(30rem, 100%); }

.sign-context {
  display: inline-flex;
  min-height: var(--control-compact);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.sign-session-note {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: .25rem solid var(--warning);
  border-radius: var(--radius);
  background: var(--warning-soft);
}

.sign-session-note strong,
.sign-session-note span { display: block; }
.sign-session-note strong { font-size: var(--fs-small); }
.sign-session-note span {
  margin-top: var(--space-1);
  color: var(--fc-1);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.sign-copy { margin-bottom: var(--space-5); }
.sign-copy .eyebrow { margin-bottom: var(--space-2); }
.sign-copy h2 { font-size: 1.75rem; line-height: 1.3; }
.sign-copy > p:last-child {
  margin-top: var(--space-2);
  color: var(--fc-2);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.sign-form { display: grid; gap: var(--space-4); }
.oauth-buttons {
  display: grid;
  gap: var(--space-2);
}
.oauth-button {
  --oauth-fill: var(--bg-0);
  --oauth-image-offset: 0;
  --oauth-mask-start: 2.75rem;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: var(--control-large);
  padding: 0 var(--space-4) 0 var(--oauth-mask-start);
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--oauth-fill);
  color: var(--fc-0);
}
.oauth-button::before {
  position: absolute;
  z-index: 1;
  inset: 1px auto 1px 1px;
  width: calc(var(--oauth-mask-start) - 1px);
  background:
    linear-gradient(var(--oauth-fill), var(--oauth-fill)) top / 100% 2px no-repeat,
    linear-gradient(var(--oauth-fill), var(--oauth-fill)) bottom / 100% 2px no-repeat,
    linear-gradient(var(--oauth-fill), var(--oauth-fill)) left / 2px 100% no-repeat;
  content: "";
}
.oauth-button::after {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 var(--oauth-mask-start);
  background: var(--oauth-fill);
  content: "";
}
.oauth-official-button {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  height: 100%;
  pointer-events: none;
}
.oauth-official-button img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  transform: translateX(var(--oauth-image-offset));
}
.oauth-button-label {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-left: 1rem;
  gap: var(--space-3);
}
.oauth-kakao {
  --oauth-fill: #fee500;
  --oauth-image-offset: .125rem;
  border-color: #fee500;
  color: rgb(0 0 0 / .85);
}
.oauth-naver {
  --oauth-fill: #03c75a;
  --oauth-image-offset: -.75rem;
  border-color: #03c75a;
  color: white;
}
.oauth-google {
  --oauth-fill: #fff;
  border-color: #747775;
  color: #1f1f1f;
}
.oauth-google .oauth-official-button {
  display: grid;
  width: 3.25rem;
  place-items: center;
}
.oauth-google .oauth-official-button img {
  width: 1.5rem;
  height: 1.5rem;
  transform: none;
}
.oauth-button strong { text-align: left; }
.oauth-button small { color: var(--fc-2); font-size: var(--fs-caption); }
.oauth-naver small { color: rgb(255 255 255 / .82); }
.oauth-kakao small { color: rgb(0 0 0 / .65); }
.oauth-button:not(.is-unavailable):hover {
  box-shadow: 0 0 0 .125rem rgb(8 127 120 / .18);
}
.oauth-button.is-unavailable { cursor: not-allowed; opacity: .68; }
.oauth-availability {
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.sign-field { display: grid; gap: var(--space-2); }
.sign-field label {
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.sign-field input {
  width: 100%;
  min-height: var(--control-large);
  padding: 0 var(--space-4);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font-size: var(--fs-body);
}
.sign-field input:hover { border-color: var(--fc-2); }
.sign-field input:focus { border-color: var(--focus); }
.sign-submit { --control-height: var(--control-large); margin-top: var(--space-1); }
.wide { width: 100%; }

.sign-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
  gap: var(--space-2) var(--space-4);
}

.text-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1);
  gap: var(--space-1);
  color: var(--primary-strong);
  font-size: var(--fs-small);
  font-weight: 750;
}
.text-button:hover { text-decoration: underline; text-underline-offset: .2rem; }

.sign-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: var(--space-5) 0;
  gap: var(--space-3);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.sign-divider::before,
.sign-divider::after {
  content: "";
  height: var(--control-border-width);
  background: var(--bc-0);
}
.sign-join { --control-height: var(--control-large); }

.form-error {
  padding: var(--space-3) var(--space-4);
  border-left: .25rem solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.55;
}

.sign-result { display: grid; outline: 0; gap: var(--space-3); }
.sign-result-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.sign-result-icon .icon { width: 1.8rem; height: 1.8rem; }
.sign-result h2 { margin-top: var(--space-2); font-size: 1.75rem; }
.sign-result > p:not(.eyebrow) {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.schedule-list {
  display: grid;
  gap: var(--space-2);
}
.schedule-card {
  --schedule-accent: var(--primary);
  display: grid;
  grid-template-columns: minmax(4.5rem, 12%) minmax(0, 1fr) auto;
  align-items: center;
  min-height: 5rem;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-0);
  border-left: .3rem solid var(--schedule-accent);
  border-radius: var(--radius);
  background: var(--bg-0);
  box-shadow: var(--shadow-card);
}
.schedule-card[data-state="paused"] { --schedule-accent: var(--warning); }
.schedule-card[data-state="done"] { --schedule-accent: var(--success); }
.schedule-card[data-state="canceled"] { --schedule-accent: var(--fc-2); }
.schedule-card[data-variant="today"] {
  min-height: 7rem;
  padding: var(--space-4) var(--space-5);
}
.schedule-card:hover {
  border-top-color: var(--bc-1);
  border-right-color: var(--bc-1);
  border-bottom-color: var(--bc-1);
}
.schedule-open {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.schedule-open strong,
.schedule-summary {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.schedule-open strong {
  color: var(--fc-0);
  font-size: var(--fs-emphasis);
  line-height: 1.45;
}
.schedule-summary {
  margin-top: var(--space-1);
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.schedule-date {
  color: var(--primary-strong);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.4;
}
.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  gap: var(--space-1);
}
.status-chip,
.repeat-chip {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  font-weight: 750;
  white-space: nowrap;
}
.repeat-chip {
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}
.text-action {
  min-height: var(--control-compact);
  padding: 0 var(--space-2);
  border: var(--control-border-width) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 750;
  white-space: nowrap;
}
.text-action:hover { background: var(--primary-soft); }
.text-action:active { background: var(--primary-surface); }
.empty-card.small { min-height: 8rem; }

.today-view { --today-gap: var(--space-6); }
.today-head {
  align-items: center;
  margin-bottom: var(--space-5);
}
.today-head > div:first-child { max-width: 42rem; }
.today-date {
  margin-bottom: var(--space-2);
  color: var(--primary-strong);
  font-size: var(--fs-small);
  font-weight: 850;
}
.today-head h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
}
.today-lead {
  margin-top: var(--space-3);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.today-head-actions {
  display: grid;
  width: min(23rem, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.today-head-actions .command {
  --control-height: var(--control-large);
  justify-content: center;
  padding: 0 var(--space-3);
}
.today-guidance {
  margin-bottom: var(--today-gap);
  padding: var(--space-4) var(--space-5);
  border-left: .3rem solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-surface);
}
.today-guidance strong {
  color: var(--primary-strong);
  font-size: var(--fs-small);
}
.today-guidance p {
  margin-top: var(--space-1);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.today-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(16rem, .9fr);
  align-items: start;
  gap: var(--today-gap);
}
.today-main,
.today-aside {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}
.today-section {
  display: grid;
  gap: var(--space-3);
}
.today-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.today-section-head h2,
.today-aside-section h2 {
  font-size: var(--fs-title-sm);
  line-height: 1.4;
}
.today-section-head > span {
  color: var(--fc-2);
  font-size: var(--fs-small);
  font-weight: 750;
}
.today-aside-section {
  min-width: 0;
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  box-shadow: var(--shadow-card);
}
.today-aside-section > p {
  margin-top: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.today-weather {
  background: linear-gradient(145deg, var(--primary-surface), var(--bg-0) 72%);
}
.today-weather-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.today-weather-head > div { min-width: 0; }
.today-weather-head p {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.today-weather-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.today-weather-icon .icon { width: 1.45rem; height: 1.45rem; }
.today-weather-now {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-4);
  gap: var(--space-3);
}
.today-weather-now strong { font-size: var(--fs-title-sm); }
.today-weather-now span {
  color: var(--primary-strong);
  font-size: var(--fs-title);
  font-weight: 850;
}
.today-weather .today-weather-meta { font-size: var(--fs-caption); }
.today-weather-location { margin-top: var(--space-4); }
.today-weather .button.today-weather-location { width: 100%; justify-content: center; }
.today-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4);
  gap: var(--space-2);
}
.today-flow-grid > div {
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  background: var(--bg-2);
  text-align: center;
}
.today-flow-grid strong,
.today-flow-grid span { display: block; }
.today-flow-grid strong {
  color: var(--primary-strong);
  font-size: var(--fs-title-sm);
}
.today-flow-grid span {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.today-review-button,
.next-schedule-button {
  display: flex;
  width: 100%;
  min-height: var(--control-large);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding: var(--space-3);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fc-0);
  text-align: left;
}
.today-review-button:hover,
.next-schedule-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.today-review-button > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.today-review-button > .icon { color: var(--fc-2); }
.next-schedule-button {
  display: grid;
  justify-content: stretch;
}
.next-schedule-button strong,
.next-schedule-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.next-schedule-button span {
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.today-empty {
  display: grid;
  min-height: 24rem;
  place-items: center;
  padding: var(--space-7);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  text-align: center;
}
.today-empty > div { max-width: 28rem; }
.today-empty-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.today-empty-icon .icon { width: 1.75rem; height: 1.75rem; }
.today-empty h2 { font-size: var(--fs-title); }
.today-empty p {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--fc-1);
  line-height: 1.65;
}
.component-head {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 4%;
  gap: var(--space-4);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.component-head > div:first-child { min-width: 0; }
.component-head > .icon-button { flex: 0 0 auto; }
.component-head h2 {
  font-size: var(--fs-emphasis);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.component-head p:not(.eyebrow) {
  margin-top: var(--space-1);
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.component-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}
.schedule-detail-backdrop { padding: var(--space-6) 4%; }
.detail-dialog {
  display: grid;
  width: min(100%, 64rem);
  max-height: calc(100vh - var(--space-8));
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.schedule-detail-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.schedule-detail-main { padding: var(--space-7) 7%; }
.schedule-state {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.schedule-state[data-state="paused"] {
  background: var(--warning-soft);
  color: var(--warning);
}
.schedule-state[data-state="done"] {
  background: var(--success-soft);
  color: var(--success);
}
.schedule-state[data-state="canceled"] {
  background: var(--danger-soft);
  color: var(--danger);
}
.schedule-detail-main > h1 {
  margin-top: var(--space-3);
  font-size: var(--fs-title-lg);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.schedule-detail-summary {
  max-width: 46rem;
  margin-top: var(--space-3);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  gap: var(--space-2);
}
.detail-block {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.detail-block > h3 { font-size: var(--fs-small); }
.schedule-related .detail-block-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.schedule-related .detail-block-head > div:first-child > span {
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.schedule-related-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.schedule-related-list {
  display: grid;
  margin-top: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  overflow: hidden;
}
.schedule-related-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-compact);
  align-items: center;
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.schedule-related-record:last-child { border-bottom: 0; }
.schedule-related-open {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
  align-items: center;
  min-width: 0;
  padding: var(--space-3);
  gap: var(--space-3);
  color: var(--fc-0);
  text-align: left;
}
.schedule-related-open:hover { background: var(--bg-1); }
.schedule-related-open > span:nth-child(2) { min-width: 0; }
.schedule-related-open small,
.schedule-related-open strong { display: block; }
.schedule-related-open small { color: var(--fc-2); font-size: var(--fs-caption); }
.schedule-related-open strong { margin-top: var(--space-1); overflow-wrap: anywhere; }
.schedule-related-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.schedule-related-remove { margin-right: var(--space-2); }
.schedule-related-empty {
  padding: var(--space-4);
  color: var(--fc-1);
  font-size: var(--fs-small);
}
.schedule-related-guide {
  margin-top: var(--space-2);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.followup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
  gap: var(--space-2);
}
.followup-result {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-small);
  font-weight: 750;
}
.detail-list { margin-top: var(--space-3); }
.detail-row {
  display: grid;
  grid-template-columns: minmax(6rem, 20%) minmax(0, 1fr);
  min-height: 3.5rem;
  align-items: center;
  padding: var(--space-2) 0;
  gap: var(--space-4);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.detail-row dt {
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.detail-row dd {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.editor-backdrop {
  justify-items: end;
  padding: 0;
}
.editor-dialog {
  display: grid;
  width: min(100%, 40rem);
  height: 100vh;
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}
.editor-dialog > form { min-width: 0; }
.schedule-form {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.schedule-form-body {
  display: grid;
  min-height: 0;
  align-content: start;
  padding: var(--space-5) 6% var(--space-6);
  gap: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.schedule-form-intro {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.65;
}
.schedule-kind-field {
  min-width: 0;
  padding: 0;
  border: 0;
}
.schedule-kind-field legend {
  margin-bottom: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.schedule-kind-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.schedule-kind-options button {
  min-width: 0;
  min-height: var(--control-default);
  padding: var(--space-2);
  border-radius: calc(var(--radius) - 0.15rem);
  background: transparent;
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
  line-height: 1.35;
}
.schedule-kind-options button:hover {
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
}
.schedule-kind-options button[aria-pressed="true"] {
  background: var(--bg-0);
  color: var(--primary-strong);
  box-shadow: 0 0 0 var(--control-border-width) var(--bc-1);
}
.schedule-repeat-field {
  min-width: 0;
  padding: 0;
  border: 0;
}
.schedule-repeat-field legend {
  margin-bottom: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.schedule-repeat-switch,
.schedule-form label.schedule-repeat-ask {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.schedule-toggle {
  display: inline-flex;
  width: 3rem;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.2rem;
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: 999px;
  background: var(--bg-2);
}
.schedule-toggle span {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--bg-0);
  box-shadow: var(--shadow-soft);
  transition: translate 160ms ease;
}
.schedule-toggle[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
}
.schedule-toggle[aria-pressed="true"] span { translate: 1.1rem 0; }
.schedule-repeat-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-3);
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.schedule-repeat-options button,
.schedule-repeat-weekdays button {
  min-width: 0;
  min-height: var(--control-compact);
  padding: var(--space-2);
  border-radius: calc(var(--radius) - 0.15rem);
  background: transparent;
  color: var(--fc-1);
  font-size: var(--fs-caption);
  font-weight: 750;
}
.schedule-repeat-options button:hover,
.schedule-repeat-weekdays button:hover {
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
}
.schedule-repeat-options button[aria-pressed="true"],
.schedule-repeat-weekdays button[aria-pressed="true"] {
  background: var(--bg-0);
  color: var(--primary-strong);
  box-shadow: 0 0 0 var(--control-border-width) var(--bc-1);
}
.schedule-repeat-help {
  margin-top: var(--space-2);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.schedule-repeat-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: var(--space-3);
  gap: var(--space-1);
}
.schedule-repeat-custom {
  display: grid;
  margin-top: var(--space-3);
  padding: var(--space-3);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--primary-soft);
}
.schedule-repeat-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.schedule-repeat-date {
  display: inline-flex;
  min-height: var(--control-compact);
  align-items: center;
  padding: 0 var(--space-2);
  gap: var(--space-1);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-1);
  font-size: var(--fs-caption);
  font-weight: 750;
}
.schedule-repeat-date[data-repeat-date-status="done"],
.schedule-repeat-date[data-repeat-date-status="canceled"] { color: var(--fc-2); }
.schedule-repeat-date button {
  display: grid;
  width: 1.5rem;
  min-height: 1.5rem;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: inherit;
}
.schedule-repeat-date button:hover { background: var(--bg-2); }
.schedule-repeat-date svg { width: 1rem; height: 1rem; }
.schedule-repeat-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
}
.schedule-form .schedule-repeat-ask input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  min-height: 1.2rem;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0.2rem;
  accent-color: var(--primary);
}
.unscheduled-notice {
  padding: var(--space-3) var(--space-4);
  border-left: 0.2rem solid var(--primary);
  background: var(--primary-soft);
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.65;
}
.schedule-form label {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.schedule-form label small {
  color: var(--fc-2);
  font-size: var(--fs-caption);
  font-weight: 500;
}
.schedule-form input,
.schedule-form select,
.schedule-form textarea {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font-size: var(--fs-body);
}
.schedule-form input:hover,
.schedule-form select:hover,
.schedule-form textarea:hover { border-color: var(--fc-2); }
.schedule-form textarea { min-height: 7rem; resize: none; }
.schedule-form-foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-4) 6% calc(var(--space-4) + env(safe-area-inset-bottom));
  gap: var(--space-2);
  border-top: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 40rem) {
  .schedule-repeat-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.result-dialog,
.decision-dialog {
  width: min(100%, 34rem);
}
.repeat-next-date {
  display: grid;
  margin-top: var(--space-4);
  gap: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.repeat-next-date input {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font-size: var(--fs-body);
}
.completion-mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.review-backdrop { padding: var(--space-6) 4%; }
.review-dialog {
  display: grid;
  width: min(100%, 52rem);
  max-height: calc(100vh - var(--space-8));
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}
.review-body {
  min-height: 12rem;
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.today-review-list {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.today-review-item {
  display: grid;
  min-height: 7.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4);
  gap: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.today-review-item[data-review-result="keep"],
.today-review-item[data-review-result="today"],
.today-review-item[data-review-result="done"] {
  border-color: var(--success);
  background: var(--success-soft);
}
.today-review-item[data-review-result="failed"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.today-review-reason {
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.today-review-item h3 { margin-top: var(--space-1); font-size: var(--fs-emphasis); }
.today-review-item p:not(.today-review-reason) {
  margin-top: var(--space-1);
  color: var(--fc-1);
  font-size: var(--fs-small);
}
.today-review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}
.today-review-actions button {
  min-height: var(--control-default);
  padding: 0 var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  font-size: var(--fs-small);
  font-weight: 750;
}
.today-review-actions button[data-review-action="today"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-strong);
}
.today-review-result {
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--success);
  font-size: var(--fs-caption);
  font-weight: 750;
}
.today-review-item[data-review-result="failed"] .today-review-result { color: var(--danger); }
.review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-4);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.review-foot p {
  color: var(--fc-2);
  font-size: var(--fs-caption);
}

.schedule-head {
  padding-bottom: var(--space-5);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.schedule-head h1 { font-size: var(--fs-title-lg); }
.schedule-lens-note {
  display: flex;
  min-height: var(--control-large);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  border-left: .25rem solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-surface);
  color: var(--fc-1);
  font-size: var(--fs-small);
}
.schedule-lens-note .icon {
  flex: 0 0 auto;
  color: var(--primary-strong);
}
.schedule-hub-body { margin-top: var(--space-5); }
.schedule-period-identity {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.schedule-period-identity > span {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary-surface);
  color: var(--primary-strong);
}
.schedule-period-identity strong,
.schedule-period-identity span { display: block; }
.schedule-period-identity div > span {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-small);
}
.schedule-week-list,
.schedule-month-selection-list {
  display: grid;
  gap: var(--space-2);
}
.schedule-hub-row {
  display: grid;
  min-height: 5.5rem;
  grid-template-columns: minmax(6rem, 14%) minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.schedule-hub-row > time,
.schedule-hub-row > span:first-child {
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.schedule-hub-row > button {
  display: grid;
  min-width: 0;
  padding: var(--space-2);
  gap: var(--space-1);
  border: 0;
  background: transparent;
  text-align: left;
}
.schedule-hub-row > button strong,
.schedule-hub-row > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-hub-row > button span { color: var(--fc-2); font-size: var(--fs-small); }
.schedule-state-label {
  padding: .35rem .6rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fc-1);
  font-size: var(--fs-caption);
  font-weight: 750;
  white-space: nowrap;
}
.schedule-list-empty {
  display: grid;
  min-height: 18rem;
  place-items: center;
  padding: var(--space-6);
  border: var(--control-border-width) dashed var(--bc-1);
  border-radius: var(--radius);
  text-align: center;
}
.schedule-list-empty p { margin: var(--space-2) 0 var(--space-4); color: var(--fc-2); }
.calendar-toolbar {
  display: grid;
  min-height: var(--control-large);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.calendar-toolbar > :first-child { justify-self: start; }
.calendar-toolbar > :last-child { justify-self: end; }
.calendar-toolbar > strong {
  font-size: var(--fs-emphasis);
  text-align: center;
}
.week-list {
  display: grid;
  gap: var(--space-3);
}
.day-group {
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-4);
}
.day-heading time {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.day-heading time strong { font-size: var(--fs-emphasis); }
.day-heading time span,
.day-empty {
  color: var(--fc-2);
  font-size: var(--fs-small);
}
.day-empty {
  min-height: 3rem;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.weekday-row,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.weekday-row {
  color: var(--fc-1);
  background: var(--bg-2);
  font-size: var(--fs-caption);
  font-weight: 750;
  text-align: center;
}
.weekday-row span { padding: var(--space-3) var(--space-2); }
.month-grid {
  overflow: hidden;
  border-top: var(--control-border-width) solid var(--bc-1);
  border-left: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.calendar-cell {
  display: grid;
  min-height: 7.5rem;
  align-content: space-between;
  padding: var(--space-3);
  gap: var(--space-2);
  border: 0;
  border-right: var(--control-border-width) solid var(--bc-1);
  border-bottom: var(--control-border-width) solid var(--bc-1);
  background: var(--bg-0);
  text-align: left;
}
.calendar-cell:hover { background: var(--primary-surface); }
.calendar-cell:disabled {
  cursor: default;
  background: var(--bg-1);
  color: var(--fc-3);
}
.calendar-cell:disabled:hover { background: var(--bg-1); }
.calendar-cell[aria-current="date"] { box-shadow: inset 0 0 0 .125rem var(--primary); }
.calendar-cell[aria-pressed="true"] { background: var(--primary-surface); }
.calendar-cell time { font-weight: 750; }
.calendar-cell span {
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.calendar-cell.outside { background: var(--bg-1); }
.month-grid[data-collapsed="true"] .calendar-cell { min-height: 5rem; }
.schedule-month-selection {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.schedule-month-selection-head,
.year-month-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}
.schedule-month-selection-head span,
.year-month-summary span { color: var(--fc-2); font-size: var(--fs-small); }
.schedule-month-selection-head h2 { margin-top: var(--space-1); }
.schedule-month-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  gap: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.schedule-month-empty span { display: block; margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-small); }
.schedule-year-view {
  display: grid;
  grid-template-columns: minmax(12rem, .28fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}
.schedule-year-summary {
  display: grid;
  min-height: 10rem;
  align-content: start;
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--primary-surface);
}
.schedule-year-summary span,
.schedule-year-summary p {
  color: var(--fc-1);
  font-size: var(--fs-small);
}
.schedule-year-summary strong {
  margin-top: var(--space-2);
  color: var(--primary-strong);
  font-size: var(--fs-title-lg);
}
.schedule-year-summary p {
  margin-top: var(--space-4);
  line-height: 1.6;
}
.year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.year-month {
  display: grid;
  min-height: 7.5rem;
  align-content: space-between;
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  text-align: left;
}
.year-month:hover {
  border-color: var(--primary-border);
  background: var(--primary-surface);
}
.year-month[data-passed="true"] {
  border-style: dashed;
  background: var(--bg-1);
  color: var(--fc-2);
}
.year-month strong { font-size: var(--fs-emphasis); }
.year-month span {
  color: var(--fc-1);
  font-size: var(--fs-small);
}
.year-month-dialog {
  display: grid;
  width: min(100%, 54rem);
  max-height: calc(100vh - var(--space-8));
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.year-month-body {
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.install-button {
  border-color: var(--primary-border);
  background: var(--bg-0);
  color: var(--primary-strong);
}
.today-head-actions .install-button { grid-column: 1 / -1; }
.install-offer-dialog { width: min(100%, 44rem); }
.install-offer-brand {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
}
.install-offer-brand img { width: 3.25rem; height: 3.25rem; }
.install-offer-brand strong,
.install-offer-brand span { display: block; }
.install-offer-brand span { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-small); }
.install-offer-dialog > p { margin-top: var(--space-3); color: var(--fc-1); line-height: 1.7; }
.install-offer-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-5) 0;
  gap: var(--space-2);
}
.install-offer-facts div {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.install-offer-facts span,
.install-offer-facts strong { display: block; }
.install-offer-facts span { color: var(--fc-2); font-size: var(--fs-caption); }
.install-offer-facts strong { margin-top: var(--space-1); font-size: var(--fs-small); }
.connection-banner,
.update-banner {
  position: fixed;
  z-index: 240;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  width: min(40rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--fc-0);
  color: var(--on-strong);
  box-shadow: var(--shadow-layer);
  transform: translateX(-50%);
}
.connection-banner strong,
.connection-banner span,
.update-banner strong,
.update-banner small { display: block; }
.connection-banner strong,
.update-banner strong { font-size: var(--fs-small); }
.connection-banner span,
.update-banner small {
  margin-top: var(--space-1);
  color: rgb(255 255 255 / .78);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.connection-banner[data-state="online"] { background: var(--primary-strong); }
.connection-banner[data-state="offline"] { border-left: .3rem solid var(--warning); }
.update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.update-banner .button {
  flex: 0 0 auto;
  min-height: var(--control-default);
}
.offline-page {
  width: min(78rem, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.offline-head {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}
.offline-brand-mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
}
.offline-head h1 {
  margin-top: var(--space-1);
  font-size: var(--fs-title-lg);
  line-height: 1.25;
}
.offline-head div > p:last-child {
  margin-top: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.offline-snapshot {
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.offline-content {
  pointer-events: none;
  filter: saturate(.55);
  opacity: .82;
}
.offline-content .view {
  width: 100%;
  padding: 0;
}
.offline-time {
  margin-bottom: var(--space-4);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.offline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-4);
  gap: var(--space-4);
}
.offline-actions p {
  color: var(--fc-2);
  font-size: var(--fs-small);
}

@media (max-width: 63.99rem) {
  .sign-shell { grid-template-columns: minmax(0, 1fr); }
  .sign-brand-panel {
    min-height: 21rem;
    padding: 6% 8%;
  }
  .sign-brand-copy > h1 { font-size: 2rem; }
  .sign-brand-points,
  .sign-brand-foot { display: none; }
  .sign-workspace {
    align-items: flex-start;
    min-height: calc(100vh - 21rem);
    padding: var(--space-7) 8%;
  }

  .service-shell { display: block; }
  .shell-side {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    width: min(20rem, 88vw);
    padding: var(--space-4);
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: var(--shadow-layer);
  }
  .service-shell[data-menu-open="true"] .shell-side { transform: translateX(0); }
  .service-shell[data-menu-open="true"]::after {
    content: "";
    position: fixed;
    z-index: 80;
    inset: 0;
    background: var(--backdrop);
  }
  .icon-button.mobile-menu-close { display: inline-grid; }
  .mobile-bar {
    display: grid;
    position: sticky;
    z-index: 50;
    top: 0;
    grid-template-columns: var(--control-default) minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4rem;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
    border-bottom: var(--control-border-width) solid var(--bc-0);
    background: var(--surface-glass);
    backdrop-filter: blur(.75rem);
  }
  .mobile-brand img { width: 2rem; height: 2rem; }
  .mobile-brand span { font-weight: 850; }
  .surface-name { color: var(--fc-2); font-size: var(--fs-caption); white-space: nowrap; }
  .view-mount { min-height: calc(100vh - 4rem); padding: var(--space-6) 5% var(--space-8); }
  .view-head { align-items: stretch; flex-direction: column; gap: var(--space-4); }
  .view-head .button { align-self: flex-start; }
  .today-head-actions { width: 100%; }
  .today-head-actions .button { align-self: stretch; }
  .today-layout { grid-template-columns: minmax(0, 1fr); }
  .today-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-aside-section:first-child { grid-column: 1 / -1; }
  .schedule-year-view { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.99rem) {
  .sign-brand-panel {
    min-height: 11rem;
    padding: var(--space-5) 6%;
  }
  .sign-brand-copy > h1 { font-size: 1.5rem; }
  .sign-brand-copy > p {
    margin-top: var(--space-2);
    font-size: var(--fs-small);
  }
  .sign-workspace {
    min-height: calc(100vh - 11rem);
    padding: var(--space-5) 6% var(--space-7);
  }
  .sign-field input { font-size: 16px; }

  .layer-backdrop { place-items: end center; padding: 0; }
  .dialog {
    width: 100%;
    max-height: 100vh;
    padding: var(--space-5) 5% calc(var(--space-5) + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .schedule-detail-backdrop,
  .review-backdrop,
  .editor-backdrop,
  .year-month-backdrop {
    place-items: stretch;
    padding: 0;
  }
  .detail-dialog,
  .review-dialog,
  .editor-dialog,
  .year-month-dialog {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .schedule-detail-main { padding: var(--space-5) 5% var(--space-7); }
  .component-head { padding: var(--space-3) 5%; }
  .component-head-actions > .button { padding: 0 var(--space-2); }
  .review-foot {
    align-items: stretch;
    flex-direction: column;
    padding: var(--space-3) 5% calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  .review-foot .button { width: 100%; }
  .today-review-item { grid-template-columns: minmax(0, 1fr); }
  .today-review-actions { justify-content: stretch; }
  .today-review-actions button { flex: 1 1 8rem; }
  .schedule-card,
  .schedule-card[data-variant="today"] {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .schedule-date { grid-column: 1 / -1; }
  .schedule-open { grid-column: 1 / -1; }
  .schedule-card .card-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: var(--space-2);
    border-top: var(--control-border-width) solid var(--bc-0);
  }
  .today-head h1 { font-size: 2rem; }
  .today-head-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-guidance { padding: var(--space-4); }
  .today-aside { grid-template-columns: minmax(0, 1fr); }
  .today-aside-section:first-child { grid-column: auto; }
  .today-empty { min-height: 19rem; padding: var(--space-6) var(--space-4); }
  .split { grid-template-columns: 1fr; }
  .calendar-toolbar { gap: var(--space-1); }
  .calendar-toolbar > strong { font-size: var(--fs-small); }
  .calendar-cell { min-height: 4.5rem; padding: .4rem; flex-direction: column; }
  .calendar-cell span { font-size: .7rem; }
  .schedule-hub-row {
    grid-template-columns: minmax(4.75rem, 22%) minmax(0, 1fr);
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .schedule-hub-row .schedule-state-label { grid-column: 2; justify-self: start; }
  .schedule-month-selection-head,
  .schedule-month-empty { align-items: stretch; flex-direction: column; }
  .year-grid { grid-template-columns: repeat(2, 1fr); }
  .calendar-toolbar .button { min-height: 2.5rem; padding: .45rem .65rem; font-size: .8rem; }
  .update-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .install-offer-facts { grid-template-columns: minmax(0, 1fr); }
  .update-banner .button { width: 100%; }
  .offline-page { padding: var(--space-5) 5% var(--space-7); }
  .offline-head {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-3);
  }
  .offline-brand-mark { width: 2.75rem; height: 2.75rem; }
  .offline-head h1 { font-size: var(--fs-title); }
  .offline-snapshot { padding: var(--space-3); }
  .offline-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .offline-actions .button { width: 100%; }
}

.history-view { width: min(100%, 73.75rem); margin-inline: auto; padding: var(--space-6); }
.history-controls { margin-top: var(--space-5); }
.history-range,
.history-statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.history-range button,
.history-statuses button {
  min-height: var(--control-compact);
  padding-inline: var(--space-3);
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-1);
  font-weight: 720;
}
.history-range button[aria-pressed="true"],
.history-statuses button[aria-pressed="true"] {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.history-toolbar { display: grid; align-items: end; margin-top: var(--space-4); gap: var(--space-3); }
.history-period-navigation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-3);
  gap: var(--space-2);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.history-period-navigation[data-has-current="false"] { grid-template-columns: auto minmax(0, 1fr) auto; }
.history-period-navigation > .icon-button {
  width: var(--control-large);
  height: auto;
  min-height: var(--control-large);
  align-self: stretch;
}
.history-period-picker {
  position: relative;
  min-width: 0;
  display: block;
}
.history-period-trigger {
  --control-height: var(--control-large);
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-2) var(--space-4);
  border-color: transparent;
  text-align: center;
}
.history-period-trigger:hover,
.history-period-trigger[aria-expanded="true"] {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
.history-period-trigger > .icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--primary-strong);
}
.history-period-trigger span {
  grid-column: 1;
  overflow: hidden;
  color: var(--fc-0);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-period-trigger small {
  grid-column: 1;
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
}
.history-date-popover {
  position: absolute;
  z-index: 90;
  width: min(26rem, calc(100vw - 2rem));
  top: calc(100% + var(--space-2));
  right: 50%;
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  box-shadow: var(--shadow-layer);
  transform: translateX(50%);
}
.history-date-popover h2 { color: var(--fc-0); font-size: var(--fs-emphasis); }
.history-date-fields {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  margin-top: var(--space-3);
  gap: var(--space-2);
}
.history-date-fields label {
  display: grid;
  color: var(--fc-1);
  font-size: var(--fs-caption);
  font-weight: 750;
  gap: var(--space-1);
}
.history-date-fields input,
.history-date-fields select {
  width: 100%;
  min-height: var(--control-default);
  padding: .5rem var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font: inherit;
}
.history-date-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  gap: var(--space-2);
}
.history-toolbar { grid-template-columns: minmax(15rem, 1fr) auto; }
.history-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
}
.history-search label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: var(--control-default);
  padding-inline: var(--space-3);
  border: 1px solid var(--bc-1);
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg-0);
  color: var(--fc-2);
  gap: var(--space-2);
}
.history-search input { min-width: 0; border: 0; outline: 0; background: transparent; }
.history-search button {
  padding-inline: var(--space-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--primary);
  color: white;
  font-weight: 760;
}
.history-results { margin-top: var(--space-6); }
.history-results > header,
.history-day > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.history-results > header span,
.history-day > header span { color: var(--fc-2); font-size: var(--fs-small); }
.history-day-list { display: grid; margin-top: var(--space-4); gap: var(--space-5); }
.history-event-list {
  margin-top: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.history-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--bc-0);
  gap: var(--space-3);
}
.history-event:first-child { border-top: 0; }
.history-event-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.history-event > button { min-width: 0; text-align: left; }
.history-event-title { display: grid; min-width: 0; gap: var(--space-1); }
.history-event-title strong,
.history-event-title small { overflow-wrap: anywhere; }
.history-event-title small,
.history-event-meta time { color: var(--fc-2); }
.history-event-meta { display: grid; justify-items: end; font-size: var(--fs-small); gap: var(--space-1); }
.history-empty { margin-top: 0; }
.history-event-context {
  display: grid;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--primary-soft);
  gap: var(--space-2);
}
.history-event-context time,
.history-event-context p { color: var(--fc-1); }

/* Project는 원본 기록의 소유 폴더가 아니라 기록을 함께 보는 분류 문맥이다. */
.projects-view { width: min(100%, 78rem); }
.projects-head { align-items: flex-start; }
.projects-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: var(--space-5);
  gap: var(--space-3);
}
.project-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: var(--control-large);
  padding: 0 var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-2);
}
.project-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fc-0);
  font-size: var(--fs-body);
}
.project-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-6);
  gap: var(--space-3);
}
.project-list-head span { color: var(--fc-2); font-size: var(--fs-small); }
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4);
  gap: var(--space-4);
}
.project-list-card {
  display: flex;
  min-width: 0;
  min-height: 18rem;
  flex-direction: column;
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.project-list-card:hover { border-color: var(--primary-border); }
.project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.project-card-symbol,
.project-detail-symbol {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.project-card-symbol { width: 2.75rem; height: 2.75rem; }
.project-detail-symbol { width: 3.5rem; height: 3.5rem; }
.project-card-tools { display: inline-flex; align-items: center; gap: var(--space-2); }
.project-achievement {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.project-manage-button { width: var(--control-compact); height: var(--control-compact); }
.project-card-open {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0;
  color: inherit;
  text-align: left;
}
.project-card-open:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.project-card-open h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-title-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.project-card-description {
  display: -webkit-box;
  min-height: 3.2em;
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.project-card-goal {
  min-height: 4.6em;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.project-card-goal span,
.project-next-fact span { color: var(--fc-2); font-size: var(--fs-caption); }
.project-card-goal p {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--fc-1);
  font-size: var(--fs-small);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.project-fact-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  gap: var(--space-2);
}
.project-fact {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: baseline;
  padding: 0 var(--space-2);
  gap: var(--space-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fc-1);
  font-size: var(--fs-caption);
}
.project-fact strong { color: var(--fc-0); font-size: var(--fs-small); }
.project-next-fact {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-4);
  gap: var(--space-2);
}
.project-next-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fc-1);
}
.project-next-fact strong {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.project-card-enter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--control-border-width) solid var(--bc-0);
  color: var(--primary-strong);
  font-size: var(--fs-small);
  font-weight: 750;
}
.project-card-enter .icon { width: 1.1rem; height: 1.1rem; }
.project-empty { margin-top: var(--space-4); }
.project-empty .button { margin-top: var(--space-4); }
.project-detail-backdrop { justify-items: end; padding: 0 0 0 var(--nav-width); }
.project-detail-dialog {
  display: grid;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
.component-head-title { display: flex; align-items: center; gap: var(--space-3); }
.project-detail-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.project-page {
  width: min(100%, 92rem);
  margin: 0 auto;
  padding: var(--space-6) clamp(1.5rem, 3.5vw, 4rem) var(--space-8);
}
.project-detail-intro {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}
.project-detail-intro h1 {
  margin-top: var(--space-1);
  font-size: var(--fs-title-lg);
  overflow-wrap: anywhere;
}
.project-detail-description {
  max-width: 48rem;
  margin-top: var(--space-3);
  color: var(--fc-1);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.project-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.project-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-5);
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.project-overview-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 5.5rem;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
  border-right: var(--control-border-width) solid var(--bc-0);
}
.project-overview-item:last-child { border-right: 0; }
.project-overview-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-0);
  color: var(--primary-strong);
}
.project-overview-item strong { display: block; font-size: var(--fs-title-sm); }
.project-overview-item span:last-child { color: var(--fc-2); font-size: var(--fs-caption); }
.project-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr);
  align-items: start;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  gap: var(--space-6);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.project-detail-section + .project-detail-section {
  padding-left: var(--space-6);
  border-left: var(--control-border-width) solid var(--bc-0);
}
.project-detail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.project-detail-section-head span { color: var(--fc-2); font-size: var(--fs-caption); }
.project-goal-card {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--primary-border);
  border-left: .25rem solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary-surface);
}
.project-goal-card > span { color: var(--primary-strong); font-size: var(--fs-caption); font-weight: 800; }
.project-goal-card h3 { margin-top: var(--space-2); line-height: 1.5; overflow-wrap: anywhere; }
.project-goal-card p { margin-top: var(--space-3); color: var(--fc-1); font-size: var(--fs-caption); line-height: 1.6; }
.project-next-list {
  overflow: hidden;
  margin-top: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
}
.project-linked-record {
  display: grid;
  width: 100%;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4);
  gap: var(--space-3);
  border-bottom: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
  text-align: left;
}
.project-linked-record:last-child { border-bottom: 0; }
.project-linked-record:hover { background: var(--bg-1); }
.project-linked-record-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
}
.project-linked-record-copy { min-width: 0; }
.project-linked-record-copy span { color: var(--fc-2); font-size: var(--fs-caption); }
.project-linked-record-copy strong { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; }
.project-detail-empty {
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
  text-align: center;
}
.project-detail-empty p { margin-top: var(--space-2); color: var(--fc-1); font-size: var(--fs-caption); }
.project-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.project-form-body {
  display: grid;
  min-height: 0;
  align-content: start;
  padding: var(--space-5) 6% var(--space-6);
  gap: var(--space-5);
  overflow-y: auto;
}
.project-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--fc-1);
  font-size: var(--fs-small);
  font-weight: 750;
}
.project-form input,
.project-form textarea {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  font: inherit;
}
.project-form textarea { min-height: 7rem; resize: none; }
.project-form-management {
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
}
.project-form-management p { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-caption); line-height: 1.6; }
.detail-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.project-link-chips { display: flex; flex-wrap: wrap; margin-top: var(--space-3); gap: var(--space-2); }
.project-link-chip {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 750;
}
.project-link-empty { color: var(--fc-2); font-size: var(--fs-small); }
.project-link-dialog {
  display: grid;
  width: min(100%, 42rem);
  max-height: calc(100vh - var(--space-8));
  padding: 0;
  overflow: hidden;
}
.project-link-dialog form { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.project-link-body { min-height: 0; padding: var(--space-5); overflow-y: auto; }
.project-link-body > p { line-height: 1.65; }
.checkpoint-record {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4);
  gap: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.checkpoint-record > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-0);
  color: var(--primary-strong);
}
.checkpoint-record strong { min-width: 0; overflow-wrap: anywhere; }
.project-options { display: grid; margin-top: var(--space-5); padding: 0; gap: var(--space-2); border: 0; }
.project-options legend { margin-bottom: var(--space-2); color: var(--fc-1); font-size: var(--fs-small); font-weight: 750; }
.project-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
}
.project-option:has(input:checked) { border-color: var(--primary); background: var(--primary-surface); }
.project-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.project-option strong,
.project-option small { display: block; overflow-wrap: anywhere; }
.project-option small { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-caption); font-weight: 500; }

.notes-view { padding: var(--space-7); }
.notes-head { align-items: flex-start; }
.notes-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto;
  margin-top: var(--space-6);
  padding: var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
}
.note-search {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}
.note-search .icon { flex: 0 0 auto; color: var(--fc-2); }
.note-search input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-default);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fc-0);
  font: inherit;
}
.note-filter-list {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.note-filter-list button {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fc-1);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
}
.note-filter-list button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.note-list-head,
.note-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.note-section-head > h3,
.note-section-head > div { min-width: 0; }
.note-section-head > .button { flex: 0 0 auto; }
.note-list-head { margin: var(--space-7) 0 var(--space-3); }
.note-list-head span,
.note-section-head > span { color: var(--fc-2); font-size: var(--fs-small); }
.note-list { display: grid; gap: var(--space-3); }
.note-card {
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
  box-shadow: var(--shadow-soft);
}
.note-card-open {
  display: block;
  width: 100%;
  padding: var(--space-5);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.note-card-open:hover { background: var(--primary-surface); }
.note-card-time,
.note-origin-time { color: var(--fc-2); font-size: var(--fs-caption); }
.note-card h3 { margin: var(--space-2) 0; font-size: var(--fs-title-sm); overflow-wrap: anywhere; }
.note-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--fc-1); line-height: 1.65; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.note-card-marks { display: flex; flex-wrap: wrap; margin-top: var(--space-4); gap: var(--space-2); }
.note-card-marks > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.note-card-marks .icon { width: 1rem; height: 1rem; }
.note-empty { margin-top: var(--space-3); }
.note-form-dialog,
.note-append-dialog {
  display: grid;
  width: min(100%, 48rem);
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
}
.note-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.note-form-body { min-height: 0; padding: var(--space-5); overflow-y: auto; }
.note-form label { display: grid; margin-top: var(--space-5); gap: var(--space-2); color: var(--fc-1); font-weight: 750; }
.note-form input,
.note-form textarea {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font: inherit;
  line-height: 1.65;
}
.note-form textarea { resize: none; }
.note-start-context {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  border-radius: var(--radius);
  background: var(--primary-surface);
}
.note-start-context > span { color: var(--primary-strong); }
.note-start-context small,
.note-start-context strong { display: block; overflow-wrap: anywhere; }
.note-start-context small { color: var(--fc-2); font-size: var(--fs-caption); }
.note-detail-backdrop { padding: var(--space-6) 4%; }
.note-detail-dialog {
  display: grid;
  width: min(100%, 64rem);
  height: min(90vh, 58rem);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}
.note-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.note-detail-body { min-height: 0; overflow-y: auto; }
.note-detail-main { padding: var(--space-7) 8%; }
.note-origin-content {
  margin-top: var(--space-4);
  color: var(--fc-0);
  font-size: var(--fs-body-lg);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.note-entry-section,
.note-relation-section,
.note-detail-management {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--control-border-width) solid var(--bc-0);
}
.note-entry-list { display: grid; margin-top: var(--space-4); gap: var(--space-3); }
.note-entry {
  padding: var(--space-4);
  border-left: .25rem solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--primary-surface);
}
.note-entry time { color: var(--fc-2); font-size: var(--fs-caption); }
.note-entry p { margin: var(--space-2) 0 0; line-height: 1.75; overflow-wrap: anywhere; }
.note-related-list { display: grid; margin-top: var(--space-3); gap: var(--space-2); }
.note-related-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.note-related-button {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: inherit;
  text-align: left;
}
.note-related-button:hover { border-color: var(--primary); background: var(--primary-surface); }
.note-related-button small,
.note-related-button strong { display: block; overflow-wrap: anywhere; }
.note-related-button small { color: var(--fc-2); font-size: var(--fs-caption); }
.note-related-button > .icon:first-child { color: var(--primary-strong); }
.note-related-button > .icon:last-child { color: var(--fc-2); }
.note-relation-empty,
.note-detail-management p { color: var(--fc-2); line-height: 1.65; }
.note-detail-management .danger { margin-top: var(--space-3); }

.money-view { padding: var(--space-7); }
.money-head { align-items: flex-start; }
.money-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.money-pending-receipts {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius-lg);
  background: var(--primary-surface);
}
.money-pending-receipts .money-list-head { margin: 0 0 var(--space-3); }
.money-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto;
  margin-top: var(--space-6);
  padding: var(--space-4);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
}
.money-toolbar input,
.money-form input,
.money-form select,
.money-form textarea,
.receipt-review-dialog input,
.receipt-review-dialog select,
.receipt-review-dialog textarea,
.money-summary-controls input {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-2) var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
  font: inherit;
}
.money-direction-list {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.money-direction-list button,
.money-direction-field button,
.money-summary-controls button {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: var(--control-border-width) solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fc-1);
  font: inherit;
  font-weight: 700;
}
.money-direction-list button[aria-pressed="true"],
.money-direction-field button[aria-pressed="true"],
.money-summary-controls button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.money-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-7) 0 var(--space-3);
}
.money-list-head span { color: var(--fc-2); font-size: var(--fs-small); }
.money-list { display: grid; gap: var(--space-2); }
.money-card {
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.money-card > button {
  display: grid;
  width: 100%;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4);
  gap: var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.money-card > button:hover { background: var(--primary-surface); }
.money-card-date,
.money-card-copy small { color: var(--fc-2); font-size: var(--fs-caption); }
.money-card-copy strong,
.money-card-copy small { display: block; overflow-wrap: anywhere; }
.money-card-amount { font-weight: 850; white-space: nowrap; }
.money-card[data-direction="income"] .money-card-amount { color: var(--success); }
.money-card[data-direction="expense"] .money-card-amount { color: var(--danger); }
.money-form-dialog {
  display: grid;
  width: min(100%, 48rem);
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
}
.money-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.money-form-body { min-height: 0; padding: var(--space-5); overflow-y: auto; }
.money-form label { display: grid; margin-top: var(--space-4); gap: var(--space-2); color: var(--fc-1); font-weight: 750; }
.money-form textarea { min-height: 7rem; resize: none; line-height: 1.65; }
.money-direction-field {
  display: flex;
  margin-top: var(--space-5);
  padding: 0;
  gap: var(--space-2);
  border: 0;
}
.money-direction-field legend { width: 100%; margin-bottom: var(--space-2); font-weight: 750; }
.money-detail-backdrop,
.money-summary-backdrop { padding: var(--space-6) 4%; }
.money-detail-dialog {
  display: grid;
  width: min(100%, 52rem);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}
.money-detail-body { min-height: 0; overflow-y: auto; }
.money-detail-body main { padding: var(--space-7) 8%; }
.money-detail-kind { display: block; color: var(--fc-2); font-weight: 700; }
.money-detail-amount { display: block; margin: var(--space-2) 0; font-size: var(--fs-display); overflow-wrap: anywhere; }
.money-detail-body time { color: var(--fc-2); }
.money-detail-memo { margin-top: var(--space-6); line-height: 1.8; overflow-wrap: anywhere; }
.money-summary-dialog {
  display: grid;
  width: min(100%, 58rem);
  height: min(82vh, 48rem);
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.money-summary-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.money-summary-controls > div { display: flex; gap: var(--space-2); }
.money-summary-controls input { width: min(12rem, 45%); }
.money-summary-body { min-height: 0; padding: var(--space-6); overflow-y: auto; }
.money-day-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.money-day-summary article { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-1); }
.money-day-summary span,
.money-day-summary strong { display: block; }
.money-day-summary strong { margin-top: var(--space-2); font-size: var(--fs-title-lg); }
.money-month-summary { display: flex; align-items: center; justify-content: center; padding: var(--space-7); gap: var(--space-7); }
.money-donut {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0 var(--income), var(--danger) var(--income) 100%);
  box-shadow: inset 0 0 0 3.5rem var(--bg-0);
}
.money-month-summary p { margin: var(--space-3) 0; }
.money-month-summary strong { display: block; margin-top: var(--space-1); font-size: var(--fs-title-sm); }
.money-year-chart {
  display: grid;
  height: 20rem;
  grid-template-columns: repeat(12, minmax(2rem, 1fr));
  align-items: end;
  gap: var(--space-2);
  overflow-x: auto;
}
.money-year-bar {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2px;
}
.money-year-bar span { grid-column: 1 / -1; text-align: center; color: var(--fc-2); font-size: var(--fs-caption); }
.money-year-bar i { display: block; min-height: 2px; border-radius: .25rem .25rem 0 0; }
.money-year-bar .income { background: var(--success); }
.money-year-bar .expense { background: var(--danger); }

.money-form-receipts {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.money-form-receipts .note-section-head { align-items: flex-start; }
.money-form-receipts .note-section-head p {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.money-receipt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.money-receipt-analysis-list { display: grid; gap: var(--space-2); }
.money-receipt-analysis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  gap: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.money-receipt-analysis strong,
.money-receipt-analysis small { display: block; overflow-wrap: anywhere; }
.money-receipt-analysis small { margin-top: var(--space-1); color: var(--fc-2); }
.money-receipt-analysis[data-analysis-state="failed"] { border-color: var(--warning); }
.receipt-start-backdrop { padding: var(--space-6) 4%; }
.receipt-start-dialog {
  display: grid;
  width: min(100%, 40rem);
  max-height: calc(100vh - var(--space-8));
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr);
}
.receipt-start-body {
  display: grid;
  min-height: 0;
  padding: var(--space-5);
  gap: var(--space-4);
  overflow-y: auto;
}
.receipt-start-body > p { color: var(--fc-2); line-height: 1.7; }
.receipt-start-body > .money-receipt-actions { justify-content: stretch; }
.receipt-start-body > .money-receipt-actions .button { flex: 1; }
.receipt-review-backdrop { padding: var(--space-6) 4%; }
.receipt-review-dialog {
  display: grid;
  width: min(100%, 44rem);
  max-height: calc(100vh - var(--space-8));
  padding: 0;
  overflow: hidden;
}
.receipt-review-dialog form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.receipt-review-body { min-height: 0; padding: var(--space-5); overflow-y: auto; }
.receipt-review-body > p {
  padding: var(--space-3);
  border-left: .25rem solid var(--primary);
  background: var(--primary-soft);
  color: var(--fc-1);
  line-height: 1.6;
}
.receipt-review-body > .receipt-date-notice {
  border-left-color: var(--warning);
  background: var(--warning-soft);
}
.receipt-review-body label {
  display: grid;
  margin-top: var(--space-4);
  gap: var(--space-2);
  color: var(--fc-1);
  font-weight: 750;
}
.receipt-review-body textarea { min-height: 6rem; resize: none; line-height: 1.65; }
.receipt-attachment-status {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.receipt-attachment-status p { margin: var(--space-2) 0 var(--space-3); color: var(--fc-2); line-height: 1.6; }
.receipt-attachment-status[data-receipt-state="failed"] { border-color: var(--warning); }

.nav-count,
.messages-tab-badge {
  display: inline-grid;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .4rem;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: var(--fs-caption);
  font-weight: 800;
}
.nav-count { margin-left: auto; }
.messages-view {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: var(--space-6);
  gap: var(--space-5);
}
.messages-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}
.messages-head h1 { margin-top: var(--space-2); }
.messages-head p:last-child { margin-top: var(--space-2); color: var(--fc-2); line-height: 1.6; }
.messages-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.messages-tab {
  display: inline-flex;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  border-bottom: .18rem solid transparent;
  color: var(--fc-2);
  font-weight: 750;
}
.messages-tab[aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.messages-list {
  display: grid;
  align-content: start;
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-0);
}
.message-row {
  display: grid;
  width: 100%;
  min-height: 6rem;
  padding: var(--space-4);
  grid-template-columns: .65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  border-bottom: var(--control-border-width) solid var(--bc-0);
  text-align: left;
}
.message-row:last-child { border-bottom: 0; }
.message-row:hover { background: var(--bg-1); }
.message-row-marker {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: transparent;
}
.message-row[data-unread="true"] .message-row-marker { background: var(--primary); }
.message-row-copy { min-width: 0; }
.message-row-copy strong,
.message-row-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-row-copy span { margin-top: var(--space-1); color: var(--fc-2); }
.message-row-meta { display: grid; justify-items: end; gap: var(--space-2); color: var(--fc-2); }
.message-detail-dialog {
  width: min(100%, 52rem);
  max-height: calc(100vh - var(--space-8));
}
.message-detail-body {
  min-height: 0;
  padding: var(--space-5);
  overflow-y: auto;
}
.message-detail-page > header { padding-bottom: var(--space-4); border-bottom: var(--control-border-width) solid var(--bc-0); }
.message-detail-page > header h3 { margin: var(--space-2) 0; font-size: var(--fs-heading); }
.message-detail-page > header time { color: var(--fc-2); }
.message-detail-content { margin-top: var(--space-5); line-height: 1.8; white-space: normal; }
.message-notice-image {
  display: block;
  width: min(100%, 45rem);
  height: auto;
  margin: var(--space-5) auto 0;
  border-radius: var(--radius);
}
.message-thread { display: grid; margin-top: var(--space-5); gap: var(--space-3); }
.message-thread-entry {
  width: min(88%, 38rem);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.message-thread-entry[data-author="requester"] { margin-left: auto; background: var(--primary-soft); }
.message-thread-entry strong,
.message-thread-entry time { display: block; }
.message-thread-entry time { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-caption); }
.message-thread-entry p { margin-top: var(--space-3); line-height: 1.7; }
.message-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-5);
  gap: var(--space-2);
}
.message-inquiry-form {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
.message-inquiry-form label,
.message-reply-form label {
  display: grid;
  margin-top: var(--space-4);
  gap: var(--space-2);
  color: var(--fc-1);
  font-weight: 750;
}
.message-inquiry-form input,
.message-inquiry-form select,
.message-inquiry-form textarea,
.message-reply-form textarea {
  width: 100%;
  min-height: var(--control-default);
  padding: var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  color: var(--fc-0);
}
.message-inquiry-form textarea,
.message-reply-form textarea { min-height: 8rem; resize: none; line-height: 1.65; }
.message-reply-form { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--control-border-width) solid var(--bc-0); }
.message-inquiry-images {
  display: flex;
  margin-top: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.message-inquiry-image {
  width: 7rem;
  height: 7rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-1);
}
.message-inquiry-image img { width: 100%; height: 100%; object-fit: cover; }

.archive-view {
  display: grid;
  padding: var(--space-6);
  gap: var(--space-6);
}
.archive-head,
.archive-tools,
.archive-results > header,
.archive-storage > div:first-child,
.upload-progress > div:first-child,
.pending-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.archive-head > div { min-width: 0; }
.archive-head h1 { margin-top: var(--space-1); font-size: var(--fs-title-lg); overflow-wrap: anywhere; }
.archive-head p:last-child { margin-top: var(--space-2); color: var(--fc-1); }
.archive-storage,
.archive-results {
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.archive-storage-track,
.upload-progress-track {
  height: .65rem;
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-2);
}
.archive-storage-track span,
.upload-progress-track span {
  display: block;
  width: var(--usage, var(--progress, 0%));
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.archive-storage > p {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-left: .25rem solid var(--warning);
  background: var(--warning-soft);
}
.archive-tools form {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: var(--space-2);
}
.archive-tools form label {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.archive-tools input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-default);
  border: 0;
  outline: 0;
  background: transparent;
}
.archive-results > header { margin-bottom: var(--space-4); }
.archive-file-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.archive-file-card {
  min-width: 0;
  border: var(--control-border-width) solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
}
.archive-file-card > button {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  text-align: left;
}
.archive-file-preview {
  display: grid;
  height: 10rem;
  grid-column: 1 / -1;
  place-items: center;
  overflow: hidden;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.archive-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.archive-file-icon svg { width: 2.5rem; height: 2.5rem; }
.archive-file-copy { min-width: 0; padding: 0 0 var(--space-4) var(--space-4); }
.archive-file-copy strong,
.archive-file-copy small { display: block; overflow-wrap: anywhere; }
.archive-file-copy small { margin-top: var(--space-1); color: var(--fc-2); }
.archive-file-card > button > svg { margin: var(--space-2) var(--space-4) var(--space-4) 0; align-self: center; }
.archive-empty { padding: var(--space-7) var(--space-5); text-align: center; }
.archive-empty p { margin-top: var(--space-2); color: var(--fc-1); }

.archive-filter-dialog,
.upload-dialog,
.attachment-detail-dialog { width: min(100%, 44rem); }
.archive-filter-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-5);
  gap: var(--space-4);
}
.archive-filter-body label { display: grid; gap: var(--space-2); font-weight: 700; }
.archive-filter-body select { min-height: var(--control-default); padding: 0 var(--space-3); border: 1px solid var(--bc-0); background: var(--bg-0); }
.upload-body { display: grid; padding: var(--space-5); gap: var(--space-4); }
.upload-body > p { padding: var(--space-3); border-left: .25rem solid var(--primary); background: var(--primary-soft); }
.upload-picker {
  display: flex;
  min-height: 8rem;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius);
  background: var(--primary-surface);
  color: var(--primary-strong);
  font-weight: 800;
}
.upload-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-selected,
.upload-progress { padding: var(--space-4); border: 1px solid var(--bc-0); border-radius: var(--radius); }
.upload-selected strong,
.upload-selected span { display: block; overflow-wrap: anywhere; }
.upload-selected span,
.upload-progress p { margin-top: var(--space-2); color: var(--fc-1); }
.attachment-detail-body { max-height: min(75vh, 48rem); overflow: auto; padding: var(--space-5); }
.attachment-preview {
  display: grid;
  min-height: 20rem;
  place-items: center;
  overflow: hidden;
  background: var(--bg-1);
}
.attachment-preview img { width: 100%; max-height: 60vh; object-fit: contain; }
.attachment-detail-icon svg { width: 4rem; height: 4rem; color: var(--primary); }
.note-detail-management { display: flex; flex-wrap: wrap; margin-top: var(--space-5); gap: var(--space-3); }
.note-detail-management h3,
.note-detail-management p { width: 100%; }
.origin-file-list,
.pending-files { display: grid; gap: var(--space-2); }
.origin-file-row,
.pending-file-row { border: 1px solid var(--bc-0); border-radius: var(--radius); background: var(--bg-0); }
.origin-file-row > button {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-3);
  gap: var(--space-3);
  text-align: left;
}
.origin-file-row strong,
.origin-file-row small,
.pending-file-row strong,
.pending-file-row small { display: block; overflow-wrap: anywhere; }
.origin-file-row small,
.pending-file-row small { color: var(--fc-2); }
.pending-file-row { padding: var(--space-3); }

.project-overview-item {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  text-align: left;
}
.project-overview-item:hover,
.project-overview-item:focus-visible { background: var(--bg-0); }
.project-overview-copy { min-width: 0; }
.project-overview-copy > span { display: block; }
.project-overview-enter {
  display: inline-flex !important;
  align-items: center;
  margin-top: var(--space-1);
  gap: var(--space-1);
  color: var(--primary-strong) !important;
  font-weight: 750;
}
.project-overview-enter .icon { width: 1rem; height: 1rem; }
.project-goal-grid { display: grid; margin-top: var(--space-4); gap: var(--space-3); }
.project-goal-grid .project-goal-card { margin-top: 0; }
.project-goal-card[data-goal-kind="achieved"] {
  border-color: var(--bc-0);
  border-left-color: var(--fc-2);
  background: var(--bg-1);
}
.project-goal-card-head,
.project-goal-actions,
.project-goal-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.project-goal-card-head { justify-content: space-between; }
.project-goal-card-head time,
.project-goal-label { color: var(--fc-2); font-size: var(--fs-caption); }
.project-goal-label { color: var(--primary-strong); font-weight: 800; }
.project-goal-facts { margin-top: var(--space-3); }
.project-goal-facts span {
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--bg-0);
  color: var(--fc-1);
  font-size: var(--fs-caption);
}
.project-goal-actions { justify-content: space-between; margin-top: var(--space-4); }
.project-goal-start-button { margin-top: var(--space-4); }
.project-goal-empty { padding: var(--space-5); border: 1px solid var(--bc-0); border-radius: var(--radius); background: var(--bg-1); }
.project-goal-empty p { margin: var(--space-2) 0 var(--space-4); color: var(--fc-1); }
.project-journey-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding: var(--space-5);
  gap: var(--space-4);
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.project-form-goal-note {
  padding: var(--space-4);
  border-left: .25rem solid var(--primary);
  background: var(--primary-soft);
  line-height: 1.65;
}
.project-goal-dialog { width: min(100%, 38rem); }
.project-goal-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.project-goal-form-body { display: grid; padding: var(--space-5); gap: var(--space-4); overflow-y: auto; }
.project-goal-form-body > p { color: var(--fc-1); line-height: 1.65; }
.project-goal-form-body label { display: grid; gap: var(--space-2); font-weight: 750; }
.project-goal-form-body textarea {
  width: 100%;
  min-height: 7rem;
  padding: var(--space-3);
  border: 1px solid var(--bc-1);
  border-radius: var(--radius);
  background: var(--bg-0);
  font: inherit;
  resize: none;
}
.project-goal-form-body fieldset { display: grid; padding: 0; gap: var(--space-2); border: 0; }
.project-goal-form-body legend { margin-bottom: var(--space-2); font-weight: 800; }
.project-goal-form-body fieldset label {
  display: flex;
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-1);
}
.project-goal-form-body input[type="radio"] { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }
.project-goal-complete-target { padding: var(--space-4); border-radius: var(--radius); background: var(--primary-soft); }
.project-goal-complete-target span,
.project-goal-complete-target strong { display: block; }
.project-goal-complete-target span { color: var(--primary-strong); font-size: var(--fs-caption); font-weight: 800; }
.project-goal-complete-target strong { margin-top: var(--space-2); line-height: 1.55; }

.project-record-list-dialog,
.project-journey-dialog {
  display: grid;
  width: min(100%, 78rem);
  height: min(92vh, 58rem);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.project-record-list-page,
.project-journey-body { min-height: 0; padding: var(--space-6); overflow-y: auto; }
.project-record-list-head h3,
.project-journey-head h3 { margin-top: var(--space-1); font-size: var(--fs-title-lg); }
.project-record-list-head p:last-child { margin-top: var(--space-2); color: var(--fc-1); }
.project-record-list { overflow: hidden; margin-top: var(--space-5); border: 1px solid var(--bc-0); border-radius: var(--radius); }
.project-journey-content { width: min(100%, 68rem); margin: 0 auto; }
.project-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}
.project-journey-scope {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-caption);
  font-weight: 750;
}
.project-journey-tabs { display: flex; padding: .2rem; border-radius: 999px; background: var(--bg-2); }
.project-journey-tab {
  min-height: var(--control-compact);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fc-1);
  font-weight: 750;
}
.project-journey-tab[aria-pressed="true"] { background: var(--bg-0); color: var(--primary-strong); box-shadow: 0 .1rem .3rem #0001; }
.project-calendar-section,
.project-photo-section { margin-top: var(--space-6); }
.project-calendar-head,
.project-calendar-actions,
.project-photo-controls,
.project-photo-range {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.project-calendar-head { justify-content: space-between; }
.project-calendar-head > strong { font-size: var(--fs-title-sm); }
.project-calendar-actions input,
.project-photo-range input {
  min-height: var(--control-compact);
  padding: 0 var(--space-2);
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  font: inherit;
}
.project-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
}
.project-calendar-weekday {
  padding: var(--space-2);
  background: var(--bg-2);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  font-weight: 750;
  text-align: center;
}
.project-calendar-day {
  min-width: 0;
  min-height: 7rem;
  padding: var(--space-2);
  border: 0;
  border-top: 1px solid var(--bc-0);
  border-right: 1px solid var(--bc-0);
  background: var(--bg-0);
  text-align: left;
}
.project-calendar-day:nth-child(7n) { border-right: 0; }
.project-calendar-day[data-outside="true"] { color: var(--fc-2); background: var(--bg-1); opacity: .68; }
button.project-calendar-day[data-has-records="true"]:hover { background: var(--primary-surface); }
.project-calendar-facts { display: grid; margin-top: var(--space-2); gap: .2rem; }
.project-calendar-facts span {
  overflow: hidden;
  color: var(--fc-1);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-photo-controls { justify-content: space-between; flex-wrap: wrap; padding: var(--space-4); border-radius: var(--radius); background: var(--bg-1); }
.project-photo-range label { display: grid; gap: var(--space-1); color: var(--fc-2); font-size: var(--fs-caption); }
.project-photo-receipts { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 750; }
.project-photo-receipts input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); }
.project-photo-list { display: grid; margin-top: var(--space-5); gap: var(--space-6); }
.project-photo-day h4 { margin-bottom: var(--space-3); }
.project-photo-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.project-photo {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bc-0);
  border-radius: var(--radius);
  background: var(--bg-0);
  text-align: left;
}
.project-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-2); }
.project-photo span { display: block; padding: var(--space-2); overflow: hidden; font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.project-date-dialog { width: min(100%, 44rem); max-height: min(90vh, 54rem); }
.project-date-body { overflow-y: auto; padding: var(--space-5); }
.project-date-section + .project-date-section { margin-top: var(--space-6); }
.project-date-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.project-date-section-head span { color: var(--fc-2); }
.project-date-records { overflow: hidden; border: 1px solid var(--bc-0); border-radius: var(--radius); }
.project-date-empty { padding: var(--space-4); border-radius: var(--radius); background: var(--bg-1); color: var(--fc-2); }
.project-photo-dialog { width: min(100%, 72rem); max-height: 94vh; overflow: hidden; }
.project-photo-view {
  display: grid;
  min-height: 24rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-3);
  background: #111;
}
.project-photo-view > img { width: 100%; max-height: 68vh; object-fit: contain; }
.project-photo-nav { color: #fff; }
.project-photo-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); gap: var(--space-4); }
.project-photo-foot > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.project-photo-foot > div:first-child { display: grid; }
.project-photo-foot span { color: var(--fc-2); font-size: var(--fs-caption); }

@media (max-width: 52rem) {
  .history-view { padding: var(--space-5); }
  .history-period-navigation { grid-template-columns: auto minmax(0, 1fr) auto; }
  .history-period-navigation > [data-history-current] { grid-column: 1 / -1; width: 100%; }
  .history-toolbar { grid-template-columns: 1fr; }
  .history-statuses { justify-content: flex-start; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-detail-intro { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .project-detail-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .project-dashboard-grid { grid-template-columns: 1fr; }
  .notes-view { padding: var(--space-5); }
  .money-view { padding: var(--space-5); }
  .archive-view { padding: var(--space-5); }
  .archive-file-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-detail-section + .project-detail-section {
    padding-top: var(--space-6);
    padding-left: 0;
    border-top: var(--control-border-width) solid var(--bc-0);
    border-left: 0;
  }
}

@media (max-width: 35rem) {
  .history-view { padding: var(--space-4); }
  .history-period-trigger { padding-inline: var(--space-3); }
  .history-period-trigger small { display: none; }
  .history-date-popover { left: 50%; right: auto; transform: translateX(-50%); }
  .history-date-fields { grid-template-columns: 1fr 1fr; }
  .history-date-fields label:first-child { grid-column: 1 / -1; }
  .history-event { grid-template-columns: auto minmax(0, 1fr); }
  .history-event-meta { grid-column: 2; justify-items: start; }
  .projects-head { align-items: stretch; }
  .projects-head .button { width: 100%; }
  .projects-toolbar { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .project-detail-backdrop { padding: 0; }
  .note-section-head { align-items: stretch; flex-direction: column; }
  .note-section-head > .button,
  .note-section-head > .money-receipt-actions { width: 100%; }
  .project-page { padding: var(--space-5) 5% var(--space-7); }
  .project-detail-intro { grid-template-columns: 1fr; }
  .project-detail-symbol { width: 3rem; height: 3rem; }
  .project-overview { grid-template-columns: 1fr; }
  .project-overview-item { border-right: 0; border-bottom: var(--control-border-width) solid var(--bc-0); }
  .project-overview-item:last-child { border-bottom: 0; }
  .project-link-backdrop { padding: 0; }
  .project-link-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .notes-view { padding: var(--space-4); }
  .notes-head { align-items: stretch; }
  .notes-head .button { width: 100%; }
  .notes-toolbar { grid-template-columns: 1fr; }
  .notes-toolbar > .button { width: 100%; }
  .note-form-backdrop,
  .note-append-backdrop,
  .note-detail-backdrop { padding: 0; }
  .note-form-dialog,
  .note-append-dialog,
  .note-detail-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .note-detail-actions { width: 100%; }
  .note-detail-actions .button { flex: 1; }
  .note-detail-main { padding: var(--space-5) 5% var(--space-7); }
  .money-view { padding: var(--space-4); }
  .money-head { align-items: stretch; }
  .money-head-actions .button { flex: 1; }
  .money-toolbar { grid-template-columns: 1fr; }
  .money-card > button { grid-template-columns: minmax(0, 1fr) auto; }
  .money-card-date { grid-column: 1 / -1; }
  .money-form-backdrop,
  .money-detail-backdrop,
  .money-summary-backdrop,
  .receipt-start-backdrop,
  .receipt-review-backdrop { padding: 0; }
  .money-form-dialog,
  .money-detail-dialog,
  .money-summary-dialog,
  .receipt-start-dialog,
  .receipt-review-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .money-form-receipts .note-section-head,
  .money-receipt-analysis { align-items: stretch; flex-direction: column; }
  .money-receipt-actions { justify-content: stretch; }
  .money-receipt-actions .button,
  .money-receipt-analysis .button { width: 100%; }
  .messages-view { padding: var(--space-4); }
  .messages-head { align-items: stretch; flex-direction: column; }
  .messages-head .button { width: 100%; }
  .message-row { grid-template-columns: .5rem minmax(0, 1fr); }
  .message-row-meta { grid-column: 2; justify-items: start; }
  .message-detail-backdrop { padding: 0; }
  .message-detail-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .message-detail-actions { align-items: stretch; flex-direction: column; }
  .message-detail-actions .button { width: 100%; }
  .money-summary-controls { align-items: stretch; flex-direction: column; }
  .money-summary-controls input { width: 100%; }
  .money-month-summary { flex-direction: column; padding: var(--space-4); gap: var(--space-4); }
  .money-donut { width: min(12rem, 70vw); }
  .archive-view { padding: var(--space-4); }
  .archive-head,
  .archive-tools { align-items: stretch; flex-direction: column; }
  .archive-tools form { width: 100%; }
  .archive-file-list,
  .archive-filter-body { grid-template-columns: 1fr; }
  .archive-filter-backdrop,
  .upload-backdrop,
  .attachment-detail-backdrop { padding: 0; }
  .archive-filter-dialog,
  .upload-dialog,
  .attachment-detail-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .project-goal-backdrop,
  .project-record-list-backdrop,
  .project-journey-backdrop,
  .project-date-backdrop,
  .project-photo-backdrop { padding: 0; }
  .project-goal-dialog,
  .project-record-list-dialog,
  .project-journey-dialog,
  .project-date-dialog,
  .project-photo-dialog { width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0; }
  .project-journey-body,
  .project-record-list-page { padding: var(--space-5) 5%; }
  .project-journey-head,
  .project-journey-entry,
  .project-photo-foot { align-items: stretch; flex-direction: column; }
  .project-journey-tabs { align-self: flex-start; }
  .project-calendar-day { min-height: 5rem; }
  .project-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-photo-controls,
  .project-photo-range { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}

/* Management: the route map is reflected directly by independent Trash and Settings views. */
.trash-view,
.settings-view {
  display: grid;
  width: min(100%, 73.75rem);
  margin: 0 auto;
  gap: var(--space-6);
}

.trash-view .view-head { margin-bottom: 0; }
.trash-list { display: grid; gap: var(--space-3); }
.trash-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.trash-icon,
.settings-row-icon {
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--primary-strong);
}
.trash-icon .icon,
.settings-row-icon .icon { width: 1.25rem; height: 1.25rem; }
.trash-card > div:nth-child(2) { min-width: 0; }
.trash-card span,
.trash-card strong,
.trash-card small { display: block; overflow-wrap: anywhere; }
.trash-card > div:nth-child(2) > span,
.trash-card small { color: var(--fc-2); font-size: var(--fs-caption); }
.trash-card strong { margin: var(--space-1) 0; }
.trash-actions,
.device-card-actions,
.settings-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.settings-head h1 { margin-top: var(--space-1); }
.settings-head p:last-child { margin-top: var(--space-2); color: var(--fc-1); }
.settings-groups { display: grid; gap: var(--space-7); }
.settings-group { display: grid; gap: var(--space-2); }
.settings-group > h2 {
  padding: 0 var(--space-2);
  color: var(--fc-2);
  font-size: var(--fs-small);
}
.settings-list {
  overflow: hidden;
  border: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.settings-nav-row,
.settings-profile-row {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
  border: 0;
  border-bottom: var(--control-border-width) solid var(--bc-0);
  border-radius: 0;
  background: var(--bg-0);
  color: inherit;
  text-align: left;
}
.settings-nav-row:last-child,
.settings-profile-row:last-child { border-bottom: 0; }
.settings-nav-row:hover,
.settings-profile-row:hover { background: var(--bg-1); }
.settings-row-value { min-width: 0; }
.settings-row-value strong,
.settings-row-value span { display: block; overflow-wrap: anywhere; }
.settings-row-value span {
  margin-top: var(--space-1);
  color: var(--fc-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.settings-row-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-strong);
  font-size: var(--fs-small);
  font-weight: 800;
  white-space: nowrap;
}
.settings-row-action .icon { width: 1.1rem; height: 1.1rem; }
.settings-usage {
  padding: var(--space-5);
  border: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.settings-plan-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}
.settings-plan-head h3 { margin: var(--space-1) 0; font-size: var(--fs-title-sm); }
.settings-plan-head p:last-child { color: var(--fc-2); }
.settings-usage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-5);
  border-top: var(--control-border-width) solid var(--bc-0);
  border-left: var(--control-border-width) solid var(--bc-0);
}
.settings-usage-grid div {
  padding: var(--space-3);
  border-right: var(--control-border-width) solid var(--bc-0);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.settings-usage-grid span,
.settings-usage-grid strong { display: block; overflow-wrap: anywhere; }
.settings-usage-grid span { color: var(--fc-2); font-size: var(--fs-caption); }
.settings-usage-grid strong { margin-top: var(--space-1); font-size: var(--fs-emphasis); }
.settings-usage progress {
  width: 100%;
  height: .65rem;
  margin-top: var(--space-4);
  accent-color: var(--primary);
}
.settings-usage > p:last-child { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-caption); }

.settings-detail-backdrop { align-items: stretch; justify-content: flex-end; padding: 0 0 0 var(--nav-width); }
.settings-detail-panel {
  display: grid;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--bg-0);
}
.component-header {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: var(--control-default) minmax(0, 1fr);
  align-items: center;
  padding: var(--space-3) clamp(1rem, 3vw, 2rem);
  gap: var(--space-3);
  border-bottom: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.component-header > strong {
  min-width: 0;
  font-size: var(--fs-title-sm);
  overflow-wrap: anywhere;
}
.settings-detail-body { min-height: 0; overflow: auto; }
.settings-detail-page {
  width: min(100%, 52rem);
  min-height: 100%;
  margin: 0 auto;
  padding: var(--space-7) clamp(1.5rem, 5vw, 4rem) var(--space-8);
}
.settings-detail-page > header h3 { margin-top: var(--space-1); font-size: var(--fs-title-lg); }
.settings-detail-page > header p:last-child { margin-top: var(--space-2); color: var(--fc-1); line-height: 1.7; }
.settings-detail-section,
.settings-device-list,
.settings-payment-list,
.settings-inline-form { display: grid; margin-top: var(--space-6); gap: var(--space-3); }
.settings-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
  border-bottom: var(--control-border-width) solid var(--bc-0);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-copy { min-width: 0; flex: 1; }
.settings-row-copy strong,
.settings-row-copy span { display: block; overflow-wrap: anywhere; }
.settings-row-copy span { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-small); line-height: 1.55; }
.settings-control { display: flex; align-items: center; gap: var(--space-2); }
.settings-control select,
.settings-control input[type="time"] {
  min-width: 10rem;
  min-height: var(--control-default);
  padding: 0 var(--space-3);
  border: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
  color: var(--fc-0);
  font: inherit;
  font-weight: 700;
}
.settings-switch {
  display: inline-grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 800;
}
.settings-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.settings-switch-track {
  display: block;
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border: var(--control-border-width) solid var(--bc-2);
  border-radius: 99rem;
  background: var(--bg-2);
}
.settings-switch-track::after {
  position: absolute;
  top: 50%;
  left: .2rem;
  width: 1.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-0);
  box-shadow: var(--shadow-soft);
  content: "";
  transform: translateY(-50%);
}
.settings-switch input:checked + .settings-switch-track { border-color: var(--primary); background: var(--primary); }
.settings-switch input:checked + .settings-switch-track::after { transform: translate(1.2rem, -50%); }
.settings-switch input:focus-visible + .settings-switch-track { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.settings-switch input:disabled + .settings-switch-track { opacity: .45; cursor: not-allowed; }
.settings-notification-groups { display: grid; margin-top: var(--space-6); gap: var(--space-6); }
.settings-notification-groups section,
.settings-notification-groups fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-notification-groups h4,
.settings-notification-groups legend {
  width: 100%;
  padding: 0 var(--space-2) var(--space-2);
  color: var(--fc-2);
  font-size: var(--fs-small);
  font-weight: 800;
}
.settings-notification-groups fieldset[disabled] .settings-list { background: var(--bg-1); opacity: .58; }
.settings-time-range { display: flex; align-items: center; gap: var(--space-2); }
.settings-device-card,
.settings-payment-card {
  padding: var(--space-4);
  border: var(--control-border-width) solid var(--bc-0);
  background: var(--bg-0);
}
.settings-device-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
}
.settings-device-card p,
.settings-payment-card p,
.settings-device-note { margin-top: var(--space-1); color: var(--fc-2); font-size: var(--fs-caption); }
.settings-badge {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0 var(--space-2);
  background: var(--bg-2);
  color: var(--fc-1);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.settings-badge[data-tone="success"] { background: var(--primary-soft); color: var(--primary-strong); }
.device-card-actions { margin-top: var(--space-4); }

@media (max-width: 48rem) {
  .settings-detail-backdrop { padding: 0; }
  .component-header { padding-inline: var(--space-4); }
  .trash-card { grid-template-columns: 2.75rem minmax(0, 1fr); padding: var(--space-4); }
  .trash-actions { grid-column: 1 / -1; }
  .trash-actions .button { flex: 1; }
  .settings-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-plan-head,
  .settings-row { align-items: stretch; flex-direction: column; }
  .settings-control,
  .settings-control select { width: 100%; }
  .settings-time-range { flex-direction: row; }
  .settings-time-range input { min-width: 0; width: 100%; }
  .settings-nav-row,
  .settings-profile-row { padding: var(--space-4); }
}
}

@layer overrides {}