body.tandas {
  --td-paper: #f6f4ed;
  --td-white: #fffefa;
  --td-deep: #143f35;
  --td-ivory: #fbf8ed;
  --td-shadow: 0 12px 36px -25px rgb(22 55 43 / .4);
  --td-ink: #192d27;
  --td-green: #235e51;
  --td-muted: #51645b;
  --td-line: #d7ded4;
  --td-tint: #e7efe6;
  --td-red: #8c3722;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 82% 0%, #e9ede2, transparent 35rem), var(--td-paper);
  color: var(--td-ink);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.5;
}
.tandas [hidden] { display: none !important; }
.tandas .td-shell { width: min(100% - 2rem, 69rem); margin-inline: auto; }
.tandas #workspace { max-width: none; padding: 0 0 1.5rem; }
.td-top { background: rgb(255 254 250 / .56); border-bottom: 1px solid var(--td-line); }
.tandas .td-top .install { border-radius: 999px; padding-inline: .9rem; }
.td-top-inner { min-height: 3.9rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.td-home { color: var(--td-green); text-decoration: none; font-weight: 700; padding-block: .7rem; }
.td-home:hover { text-decoration: underline; }
.td-heading { display: flex; align-items: center; gap: clamp(.85rem, 2.5vw, 1.4rem); padding-block: clamp(1.65rem, 5vw, 3.35rem); }
.td-mark { display: grid; flex: 0 0 auto; place-items: center; width: clamp(3.5rem, 10vw, 5rem); aspect-ratio: 1; }
.td-mark img { display: block; width: 100%; height: auto; border-radius: 23%; box-shadow: 0 10px 24px -13px #153e36; }
.tandas .td-heading h1, .tandas #app h2, .tandas #td-dialog h2 {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  line-height: 1.04;
  overflow-wrap: anywhere;
}
.tandas .td-heading h1 { font-size: clamp(2.55rem, 7vw, 5.05rem); letter-spacing: -.04em; }
.tandas #app h2, .tandas #td-dialog h2 { font-size: clamp(1.95rem, 4vw, 3.15rem); }
.td-heading p, .td-round-heading p { margin: .45rem 0 0; color: var(--td-muted); }
.td-heading p { max-width: 43ch; }
.tandas #app { padding-bottom: 2.5rem; }
.td-notice:not(:empty) { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--td-tint); border-left: 4px solid var(--td-green); }
.td-notice:empty, .td-message:empty { margin: 0; height: 0; }
.td-notice.td-error:not(:empty) { background: #fae9df; border-color: var(--td-red); }
.td-error { color: var(--td-red); font-weight: 600; }

.td-welcome {
  border-radius: 1.45rem;
  padding: clamp(1.55rem, 5vw, 3.65rem);
  background: repeating-radial-gradient(circle at 112% 100%, transparent 0 29px, rgb(235 247 228 / .1) 30px 31px, transparent 32px 54px), linear-gradient(115deg, var(--td-deep) 18%, var(--td-green));
  color: #fffefa;
  box-shadow: 0 16px 32px -26px #143f35;
}
.td-welcome p { max-width: 39ch; margin-block: .75rem 1.3rem; color: #edf3e9; }
.td-welcome .td-plan { margin: 0 0 .55rem; color: #edf3e9; font-size: .84rem; font-weight: 700; }
.td-home-actions { gap: .65rem 1.15rem; }
.tandas .td-pro-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fffefa;
  font-weight: 700;
  text-underline-offset: .23em;
}
.tandas .td-pro-link:focus-visible { outline-color: #f2d2a0; }
.td-capacity {
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--td-tint);
  color: var(--td-deep);
  font-size: .86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.td-active .td-list { margin-top: .55rem; }
.tandas .td-welcome .td-primary { background: #fffefa; border-color: #fffefa; color: var(--td-green); }
.tandas .td-welcome .td-primary:hover { background: #e7efe6; }
.td-section, .td-rounds {
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid var(--td-line);
  border-radius: 1.1rem;
  background: var(--td-white);
  box-shadow: var(--td-shadow);
}
#app > .td-section:first-child { margin-top: 0; }
.td-section-head, .td-dialog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.td-section-head h3, .td-rounds h3, .td-label { margin: 0; }
.td-section-head h3, .td-rounds h3 { font: 400 clamp(1.55rem, 2vw, 1.9rem) / 1.08 var(--font-display); color: var(--td-deep); }
.td-muted { color: var(--td-muted); }
.td-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.tandas .td-btn, .tandas .td-round-link {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  color: var(--td-green);
  font: inherit;
  font-weight: 700;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.tandas .td-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  max-width: 100%;
  padding: .52rem .82rem;
  border: 1px solid #acb9aa;
  border-radius: .66rem;
  background: var(--td-white);
}
.tandas .td-btn:disabled { opacity: .56; cursor: default; }
.tandas .td-btn:not(:disabled):hover { background: var(--td-tint); }
.tandas .td-primary { background: var(--td-green); border-color: var(--td-green); color: #fffefa; }
.tandas .td-primary:not(:disabled):hover { background: #17483d; }
.td-btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.tandas .td-icon { padding: .45rem; }
.tandas :is(button, input, select, textarea, a):focus-visible { outline: 3px solid #aa6023; outline-offset: 3px; }
.tandas [tabindex="-1"]:focus { outline: none; }

.td-fields { display: grid; gap: .85rem; }
.td-section .td-fields { margin-top: 1rem; }
.td-field { display: grid; min-width: 0; gap: .3rem; color: var(--td-ink); font-weight: 700; }
.tandas .td-field :is(input, select) { margin-top: 0; }
.tandas :is(.td-field input, .td-field select, #td-summary) {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: .55rem .65rem;
  border: 1px solid #98ac9e;
  border-radius: .62rem;
  background: #fcfcf8;
  color: var(--td-ink);
  font: inherit;
  font-weight: 400;
}
.td-numbers { min-width: 0; margin: 1.35rem 0 1rem; padding: 0; border: 0; }
.td-numbers legend { padding: 0; font-weight: 700; }
.td-numbers p { margin: .35rem 0 .75rem; }
.td-number { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; margin-bottom: .65rem; }
.td-order { display: flex; gap: .5rem; }
.td-storage-note { margin-block: 1rem; }

.td-round-heading { margin-bottom: 1.15rem; }
.tandas #app .td-round-heading h2 { margin-top: .85rem; }
.td-board { display: grid; gap: 1rem; }
.td-rounds { margin: 0; }
.td-rounds ol, .td-list, .td-preview-list { margin: .75rem 0 0; padding: 0; list-style: none; }
.td-rounds ol { display: grid; gap: .5rem; }
.tandas .td-round-link {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  background: var(--td-white);
  color: var(--td-ink);
  border: 1px solid var(--td-line);
  border-radius: .65rem;
  text-align: left;
}
.td-round-link[aria-current] { border-color: var(--td-green); background: var(--td-tint); box-shadow: inset 3px 0 var(--td-green); }
.td-round-link:hover { border-color: var(--td-green); }
.td-round-number { display: grid; place-items: center; min-width: 1.6rem; color: var(--td-green); font-size: .8rem; font-variant-numeric: tabular-nums; }
.td-round-details { display: grid; overflow-wrap: anywhere; line-height: 1.2; }
.td-round-details span { color: var(--td-muted); font-size: .86rem; font-weight: 500; }
.td-round-panel {
  min-width: 0;
  overflow: hidden;
  background: var(--td-white);
  border: 1px solid var(--td-line);
  border-radius: 1.15rem;
  box-shadow: var(--td-shadow);
}
.td-round-top { display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-start; justify-content: space-between; padding: clamp(1rem, 3vw, 1.55rem); background: repeating-radial-gradient(circle at 106% 100%, transparent 0 27px, rgb(235 247 228 / .11) 28px 29px, transparent 30px 48px), linear-gradient(105deg, var(--td-deep), var(--td-green)); color: #fffefa; }
.td-round-top p { margin: 0 0 .3rem; color: #edf3e9; font-size: .86rem; }
.td-round-top h3 { margin: 0; font: 400 clamp(1.85rem, 5vw, 3rem) / 1 var(--font-display); overflow-wrap: anywhere; }
.td-pill { display: inline-block; white-space: nowrap; border-radius: 999px; padding: .18rem .5rem; background: #edf1ea; color: #3e5247; font-size: .78rem; font-weight: 700; }
.td-pill.td-late { background: #fae9df; color: #83331e; }
.td-pill.td-done { background: #dbeee2; color: #1a5940; }
.td-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: .6rem; border-bottom: 1px solid var(--td-line); }
.td-totals div { min-width: 0; padding: .6rem .4rem; border-radius: .65rem; background: #f1f3ec; }
.td-totals .td-totals-pending { background: #f6eee2; color: #6b451f; }
.td-totals .td-totals-pending dt { color: #6b451f; }
.td-totals dt { color: var(--td-muted); font-size: clamp(.75rem, 2.5vw, .95rem); }
.td-totals dd { margin: 0; font-size: clamp(.94rem, 3.6vw, 1.55rem); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.td-round-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--td-line); }
.td-round-tools p { margin: 0; color: var(--td-muted); }
.td-round-panel .td-label { padding: .9rem 1rem 0; }
.td-round-panel .td-list { margin: .25rem 1rem 1rem; }
.td-list-row, .td-preview-list li {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--td-line);
}
.td-list-row:last-child, .td-preview-list li:last-child { border-bottom: 0; }
.td-list-row > div:first-child, .td-preview-list li > div { display: grid; min-width: 0; overflow-wrap: anywhere; }
.td-preview-list strong { min-width: 0; overflow-wrap: anywhere; }
.td-list-row span, .td-preview-list span { font-size: .9rem; color: var(--td-muted); }
.td-close p { margin: .35rem 0 0; color: var(--td-muted); }

.tandas #td-dialog {
  width: min(100% - 1.5rem, 36rem);
  max-height: calc(100% - 2rem);
  box-sizing: border-box;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--td-line);
  border-radius: 1.2rem;
  background: var(--td-white);
  color: var(--td-ink);
  box-shadow: 0 24px 90px -20px rgb(19 47 37 / .48);
}
.tandas #td-dialog::backdrop { background: rgb(17 41 33 / .53); }
.td-callout { padding: .75rem; border-left: 4px solid var(--td-green); background: var(--td-tint); }
.td-check { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .25rem; }
.td-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--td-green); }
.tandas #td-summary { display: block; margin: .25rem 0 .75rem; resize: vertical; }
.td-preview-list + form { margin-top: 1rem; }
@media (min-width: 38rem) {
  .td-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-wide { grid-column: 1 / -1; }
  .td-totals { gap: .6rem; padding: .8rem; }
  .td-totals div { padding: .75rem 1rem; }
}
@media (min-width: 54rem) {
  .td-board { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}
@media (max-width: 25rem) {
  .td-order { gap: .35rem; }
  .td-totals dt { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tandas .td-btn, .tandas .td-round-link { transition: none; }
}
