/* System fonts keep the whole workspace available offline. */
:root {
  color-scheme: light;
  --bg: #fff3f7;
  --sidebar: #fbe7ef;
  --panel: #fffafb;
  --panel-hover: #f7dce8;
  --border: #d5a9bd;
  --text: #3b2431;
  --muted: #765363;
  --accent: #a23862;
  --accent-soft: #f5d8e5;
  --on-accent: #ffffff;
  --green: #316b44;
  --red: #a52d48;
  --amber: #805019;
  --assistant: #75408f;
  --pink-1: #f7d3df;
  --pink-2: #f6c1d5;
  --pink-3: #f3d8ed;
  --pink-4: #efd0df;
  --pink-5: #f8e0e7;
  --pink-6: #edd3e8;
  --shadow: 0 20px 80px #6b264320;
  font-family: ui-rounded, "Segoe UI", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-synthesis: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #21191f;
  --sidebar: #291d25;
  --panel: #30232c;
  --panel-hover: #412d39;
  --border: #69505e;
  --text: #f9eaf2;
  --muted: #c8aebe;
  --accent: #f0aac8;
  --accent-soft: #482839;
  --on-accent: #291d25;
  --green: #a0d4ac;
  --red: #ffa7b9;
  --amber: #edc17d;
  --assistant: #d3b0ee;
  --pink-1: #482332;
  --pink-2: #53243d;
  --pink-3: #482c45;
  --pink-4: #553043;
  --pink-5: #4d2c36;
  --pink-6: #44304c;
  --shadow: 0 20px 80px #0005;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a.button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 13px;
  line-height: 1.4;
  transition:
    background 0.15s,
    border-color 0.15s;
}
button:hover,
a.button:hover {
  background: var(--panel-hover);
  border-color: var(--muted);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 650;
}
button.primary:hover {
  filter: brightness(1.1);
}
button.small {
  padding: 5px 9px;
  font-size: 12px;
}
button.subtle {
  background: transparent;
}
button.success {
  color: var(--green);
  border-color: var(--green);
}
button.danger,
.danger-text {
  color: var(--red);
}
button.text-button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
button.text-button:hover {
  color: var(--accent);
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 0;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
input[type="color"] {
  height: 42px;
  padding: 4px;
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}
textarea {
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
form > label,
.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
label input,
label select,
label textarea {
  color: var(--text);
  font-size: 14px;
}
.check-label {
  display: flex !important;
  align-items: center;
  flex-direction: row !important;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.button-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.button-group label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.button-group input,
.button-group select {
  width: auto;
  max-width: 160px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 27px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.7px;
}
h2 {
  font-size: 22px;
  font-weight: 550;
  letter-spacing: -0.4px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}
p {
  line-height: 1.65;
}
.muted {
  color: var(--muted);
}
.small-text {
  font-size: 12px;
}
.block {
  display: block;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 10px;
}
.icon-button {
  background: transparent;
  border-color: transparent;
  width: 32px;
  height: 32px;
  padding: 3px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 17px;
  flex-shrink: 0;
}
.icon-button:hover {
  color: var(--text);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.loading {
  height: 100vh;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--accent);
}
.loading span {
  font-size: 16px;
  color: var(--muted);
}
.fatal {
  max-width: 600px;
  padding: 60px;
  margin: auto;
  text-align: center;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 238px;
  padding: 28px 18px 16px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 29px;
  letter-spacing: -1.7px;
  font-weight: 650;
  width: max-content;
  margin: 0 11px 36px;
}
.brand-mark {
  width: 29px;
  height: 33px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: Georgia, serif;
  font-style: italic;
  border-radius: 9px 9px 9px 2px;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -3px;
  padding-right: 3px;
}
.brand-dot {
  font-size: 15px;
  color: var(--accent);
  align-self: start;
  margin-top: 4px;
  letter-spacing: 0;
}
.workspace-label {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: var(--muted);
  margin: 0 12px 16px;
}
.sidebar nav {
  overflow-y: auto;
  min-height: 0;
}
.nav-item {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: 0;
  text-align: left;
  margin: 3px 0;
  line-height: 1.5;
}
.nav-item > span:first-child {
  width: 17px;
  flex-shrink: 0;
  font-size: 17px;
}
.nav-item:hover {
  background: var(--panel);
  color: var(--text);
}
.nav-item.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 12px;
}
.nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  padding: 13px 12px 7px;
}
.nav-heading button {
  border: 0;
  background: none;
  font-size: 18px;
  padding: 0;
  color: var(--muted);
}
.project-nav {
  font-size: 12px;
}
.project-dot {
  width: 8px !important;
  height: 8px;
  border-radius: 2px;
  margin-left: 4px;
  margin-right: 5px;
}
.new-project {
  font-size: 12px;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
}
.team-avatars {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  gap: 0;
}
.team-avatars .avatar {
  margin-right: -8px;
  border: 2px solid var(--sidebar);
}
.team-avatars > span:last-child:not(.avatar) {
  font-size: 10px;
  color: var(--muted);
  margin-left: 18px;
}
.avatar {
  --avatar: #c98b99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--avatar) 24%, var(--panel));
  color: var(--text);
  font-size: 9px;
  font-weight: 750;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--avatar) 30%, transparent);
}
.avatar.unassigned {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
}
.main-shell {
  margin-left: 238px;
  min-height: 100vh;
}
.topbar {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.topbar > .icon-button {
  display: none;
}
.global-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 600px;
}
.global-search > span {
  font-size: 24px;
  color: var(--muted);
}
.global-search input {
  border: 0;
  background: none;
  padding: 10px 4px;
  font-size: 12px;
}
.global-search input:focus {
  outline: none;
}
.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 45px;
  max-height: 60vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 40;
  padding: 8px;
}
.search-results a {
  display: block;
  padding: 11px;
  border-radius: 5px;
}
.search-results a:hover {
  background: var(--panel-hover);
}
.search-results small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.search-results p {
  padding: 12px;
  margin: 0;
}
.sync-indicator {
  color: var(--green);
  font-size: 9px;
  margin-left: auto;
  white-space: nowrap;
}
.sync-indicator span {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}
.sync-indicator.pending {
  color: var(--accent);
}
.quick-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.quick-add > span:first-child {
  font-size: 17px;
}
kbd {
  font-family: inherit;
  font-size: 9px;
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 3px;
  color: var(--muted);
  margin-left: 10px;
}
.project-header {
  padding: 27px 32px 0;
}
.project-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.project-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  font-size: 26px;
  background: color-mix(in srgb, var(--project) 13%, var(--panel));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--project) 30%, transparent);
  border-radius: 12px;
}
.project-titles {
  min-width: 0;
}
.project-titles .eyebrow {
  font-size: 9px;
  margin-bottom: 4px;
}
.project-titles h1 {
  font-size: 24px;
  margin: 0;
  overflow-wrap: anywhere;
}
.status-pill {
  font-size: 10px;
  border: 0;
  border-radius: 20px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--green) 10%, var(--bg));
  color: var(--green);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-pill i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.status-at-risk {
  color: var(--amber);
  background: #d8b77610;
}
.status-off-track {
  color: var(--red);
  background: #e3949a10;
}
.header-avatars {
  margin-left: auto;
  display: flex;
}
.header-avatars .avatar {
  margin-left: -5px;
  border: 2px solid var(--bg);
}
.project-menu {
  position: relative;
}
.project-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  padding: 8px;
}
.project-menu summary::-webkit-details-marker {
  display: none;
}
.menu {
  position: absolute;
  top: 36px;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 8px;
  padding: 6px;
  min-width: 210px;
  z-index: 20;
}
.menu button,
.menu a {
  display: block;
  text-align: left;
  width: 100%;
  border: 0;
  background: none;
  font-size: 12px;
  padding: 9px;
  border-radius: 5px;
}
.menu button:hover,
.menu a:hover {
  background: var(--panel-hover);
}
.project-tabs {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-top: 23px;
  scrollbar-width: thin;
}
.project-tabs a {
  display: block;
  padding: 12px 0;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.project-tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.project-content {
  padding: 24px 32px 40px;
}
.page-content {
  padding: 40px 32px;
  max-width: 1700px;
  margin: 0 auto;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 8px;
}
.toolbar label {
  display: block;
}
.toolbar select {
  padding: 6px 8px;
  font-size: 11px;
  border-color: transparent;
  background: transparent;
  width: auto;
  max-width: 170px;
}
.toolbar select:hover {
  border-color: var(--border);
}
.toolbar .check-label {
  font-size: 11px;
}
.toolbar input[type="checkbox"] {
  width: 13px;
  height: 13px;
}
.search-local {
  display: flex !important;
  align-items: center;
  width: 210px;
  gap: 4px;
  margin-right: auto;
}
.search-local span {
  font-size: 22px;
  color: var(--muted);
}
.search-local input {
  font-size: 11px;
  background: none;
  border: 0;
  padding: 7px;
}
.toolbar .small {
  font-size: 10px;
}
.list-view {
  padding-top: 4px;
}
.task-section {
  margin-bottom: 24px;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}
.section-toggle {
  padding: 8px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  min-width: 21px;
  height: 20px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--panel);
  font-weight: 400;
  font-size: 10px;
}
.section-tools {
  display: flex;
  gap: 0;
  margin-left: auto;
  opacity: 0;
}
.section-heading:hover .section-tools,
.section-heading:focus-within .section-tools {
  opacity: 1;
}
.section-tools .icon-button {
  font-size: 12px;
  width: 26px;
  height: 26px;
}
.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  padding: 10px 7px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.task-row:hover {
  background: var(--panel);
}
.drag-handle {
  color: var(--muted);
  opacity: 0;
  cursor: grab;
  margin-left: -4px;
}
.task-row:hover .drag-handle {
  opacity: 1;
}
.check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--on-accent);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check:hover {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 20%, transparent);
}
.check.checked {
  background: var(--green);
  border-color: var(--green);
}
.task-title {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-title > a {
  overflow-wrap: anywhere;
}
.task-title > a:hover {
  color: var(--accent);
}
.task-title input {
  padding: 3px 6px;
}
.row-meta {
  display: flex;
  gap: 7px;
  font-size: 9px;
  color: var(--muted);
  flex-shrink: 0;
}
.row-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 350px;
}
.pill {
  --pill: #9a9ab8;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--text);
  background: color-mix(in srgb, var(--pill) 13%, var(--bg));
}
.due {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  min-width: 58px;
  text-align: right;
}
.due.overdue {
  color: var(--red);
}
.is-complete .task-title > a,
.is-complete .card-title > a,
.calendar-chip.is-complete,
.is-complete.run-row a {
  text-decoration: line-through;
  color: var(--muted);
}
.edit-title {
  font-size: 12px;
  opacity: 0;
  width: 23px;
  height: 23px;
}
.task-row:hover .edit-title,
.task-row:focus-within .edit-title {
  opacity: 1;
}
.inline-add {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  color: var(--muted);
}
.inline-add input {
  border: 0;
  background: none;
  padding: 4px;
  font-size: 12px;
}
.inline-add input:focus {
  outline: 0;
}
.inline-add button {
  opacity: 0;
  font-size: 10px;
  padding: 4px 8px;
}
.inline-add:focus-within button,
.inline-add:hover button {
  opacity: 1;
}
.section-empty {
  padding: 12px 8px;
  color: var(--muted);
  font-size: 11px;
}
.add-section {
  margin-top: 5px;
}
.drop-over {
  outline: 1px dashed var(--accent);
  background: var(--accent-soft);
}
.dragging {
  opacity: 0.4;
}
.board {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 30px;
  min-height: 60vh;
}
.board-column {
  width: 300px;
  min-width: 280px;
  max-width: 340px;
  flex: 1;
  background: color-mix(in srgb, var(--panel) 45%, var(--bg));
  border-radius: 9px;
  padding: 10px;
}
.board-column > .section-heading {
  flex-wrap: wrap;
  padding: 0 3px 8px;
  font-size: 12px;
}
.board-column .section-tools {
  width: 100%;
  justify-content: flex-end;
  height: 0;
  overflow: hidden;
}
.board-column .section-heading:hover .section-tools,
.board-column .section-heading:focus-within .section-tools {
  height: 26px;
}
.board-column .count {
  margin-left: auto;
}
.task-card {
  padding: 16px 13px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  margin: 8px 0 12px;
  cursor: grab;
  box-shadow: 0 3px 7px #0001;
}
.task-card:hover {
  border-color: var(--muted);
}
.card-title {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
}
.card-title .check {
  margin-top: 2px;
}
.card-title > a {
  flex: 1;
  overflow-wrap: anywhere;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 15px 0 10px;
}
.task-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
.add-column {
  min-width: 140px;
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 25px;
  min-width: 0;
}
.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.panel-heading a {
  color: var(--accent);
  font-size: 11px;
}
.panel-heading h3 {
  margin-bottom: 20px;
}
.view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 25px;
}
.view-heading h1,
.view-heading h2 {
  margin-bottom: 5px;
}
.view-heading p {
  margin: 0;
  font-size: 12px;
}
.view-heading h2 {
  font-size: 20px;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1300px;
}
.wedding-summary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, var(--accent-soft), var(--panel) 85%);
}
.wedding-summary h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  margin: 16px 0 9px;
}
.wedding-summary p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 13px;
}
.wedding-summary .summary-date {
  color: var(--text);
}
.summary-rule {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
}
.progress-number {
  font-size: 64px;
  letter-spacing: -3px;
  line-height: 1.25;
  margin: 25px 0 20px;
  font-weight: 300;
}
.progress-number span {
  font-size: 28px;
  margin-left: 5px;
  color: var(--muted);
}
.progress {
  height: 5px;
  border-radius: 10px;
  background: var(--border);
  overflow: hidden;
}
.progress i {
  height: 100%;
  display: block;
  background: var(--accent);
  border-radius: 10px;
}
.progress + p {
  font-size: 11px;
  margin-top: 10px;
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 27px;
}
.stat-strip > div {
  border-right: 1px solid var(--border);
}
.stat-strip > div:last-child {
  border: 0;
}
.stat-strip strong,
.stat-strip span {
  display: block;
}
.stat-strip strong {
  font-size: 22px;
  font-weight: 500;
}
.stat-strip span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.upcoming-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.upcoming-row > span:last-child {
  white-space: nowrap;
  font-size: 10px;
}
.upcoming-row:last-child {
  border: 0;
}
.upcoming-row:hover {
  color: var(--accent);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.metric > span {
  color: var(--muted);
  font-size: 12px;
}
.metric strong {
  display: block;
  font-size: 44px;
  font-weight: 400;
  margin-top: 10px;
}
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.bar-chart {
  width: 100%;
  display: block;
  max-height: 380px;
}
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.donut {
  width: 170px;
  max-width: 60%;
}
.donut-wrap p {
  font-size: 12px;
}
.home-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
}
.home-intro h1 {
  font-family: Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -1px;
}
.home-intro p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.home-flower {
  font-size: 95px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.6;
  margin-right: 30px;
  transform: rotate(-15deg);
}
.home-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.home-columns .task-row {
  padding: 13px 0;
  gap: 9px;
}
.home-columns .row-pills,
.home-columns .edit-title,
.home-columns .row-meta {
  display: none;
}
.home-columns .task-title {
  min-width: 0;
}
.home-columns .task-row > .avatar {
  display: none;
}
.wedding-date-row {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 18px;
  font-size: 12px;
}
.wedding-date-row:last-child {
  margin-bottom: 0;
}
.wedding-date-row .muted {
  font-size: 11px;
  margin-top: 4px;
}
.date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 48px;
  height: 53px;
  flex-shrink: 0;
}
.date-badge small {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--accent);
}
.date-badge strong {
  font-size: 20px;
  font-weight: 450;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.project-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  background: var(--panel);
}
.project-card:hover {
  border-color: var(--accent);
}
.project-card .project-icon {
  width: 40px;
  height: 40px;
  font-size: 23px;
  margin-bottom: 20px;
}
.project-card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.project-card p {
  font-size: 11px;
  margin-bottom: 24px;
}
.project-card footer {
  font-size: 9px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin-top: 10px;
}
.new-project-card {
  min-height: 225px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--muted);
  font-size: 12px;
}
.new-project-card span {
  font-size: 30px;
  color: var(--accent);
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 45px 18px;
}
.empty-flower {
  font-size: 35px;
  color: var(--accent);
  opacity: 0.75;
}
.empty h3 {
  color: var(--text);
  font-size: 16px;
  margin: 15px 0 5px;
  font-weight: 500;
}
.empty p {
  font-size: 12px;
  max-width: 400px;
  margin: 0 auto;
}
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.activity-row > div {
  flex: 1;
}
.activity-row time {
  font-size: 10px;
  color: var(--muted);
}
.activity-row:last-child {
  border: 0;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
}
.settings-grid > .panel { min-width: 0; }
.invite-section { margin: 24px 0; }
.invite-link-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 16px; }
.invite-link-row label { flex: 1 1 180px; min-width: 0; }
.invite-link-row input { width: 100%; min-width: 0; }
.invite-section > .muted { line-height: 1.6; }
.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 18px;
}
.person-row:last-of-type {
  margin-bottom: 30px;
}
.archive-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 12px;
}
.vendor-table {
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
th {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  padding: 15px;
  background: var(--panel);
  white-space: nowrap;
}
td {
  padding: 17px 15px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
td strong {
  font-weight: 550;
}
td .muted {
  font-size: 10px;
  margin-top: 4px;
}
td a {
  color: var(--accent);
  line-height: 1.9;
}
td a:hover {
  text-decoration: underline;
}
.vendor-notes {
  white-space: pre-wrap;
  min-width: 100px;
  max-width: 250px;
}
td:last-child {
  white-space: nowrap;
}
.run-show {
  max-width: 1100px;
  margin-bottom: 50px;
}
.run-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 15px;
  border-bottom: 1px solid var(--border);
}
.run-row time {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  width: 85px;
  flex-shrink: 0;
  color: var(--accent);
}
.run-row > .check {
  width: 34px;
  height: 34px;
  font-size: 19px;
  flex-shrink: 0;
}
.run-row > div {
  flex: 1;
  min-width: 0;
}
.run-row a {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.run-row p {
  font-size: 11px;
  margin: 5px 0 0;
  white-space: pre-wrap;
}
.now-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  color: var(--red);
  font-size: 10px;
  font-weight: 650;
}
.now-line i {
  height: 1px;
  background: var(--red);
  flex: 1;
}
.calendar-scroll {
  overflow-x: auto;
}
.calendar {
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  min-width: 630px;
}
.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays {
  background: var(--panel);
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.calendar-weekdays > div {
  padding: 11px;
  border-right: 1px solid var(--border);
}
.calendar-day {
  min-height: 130px;
  padding: 7px 5px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 0;
}
.calendar-day:nth-child(7n) {
  border-right: 0;
}
.calendar-day header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 11px;
  color: var(--muted);
}
.calendar-day header > span {
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
.calendar-day header button {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
}
.calendar-day.is-today header > span {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
}
.calendar-day.outside {
  background: var(--sidebar);
}
.calendar-chip {
  display: block;
  border-left: 2px solid var(--category);
  background: color-mix(in srgb, var(--category) 15%, var(--panel));
  color: var(--text);
  font-size: 10px;
  line-height: 1.4;
  padding: 4px;
  margin: 4px 0;
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: #0004;
  z-index: 60;
}
.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 90vw);
  background: var(--panel);
  z-index: 70;
  box-shadow: var(--shadow);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  outline: none;
}
.drawer-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 15px 24px;
  z-index: 2;
}
.drawer-header > div {
  display: flex;
  gap: 8px;
}
.drawer-header > button {
  font-size: 12px;
}
.drawer-content {
  padding: 25px 28px;
}
.drawer-content h2 {
  font-size: 26px;
  line-height: 1.35;
  margin-bottom: 25px;
  overflow-wrap: anywhere;
}
.drawer-content .form-grid {
  gap: 0 14px;
}
.drawer-content form > .primary {
  font-size: 12px;
}
.drawer-content .small-text {
  font-size: 10px;
}
.detail-section {
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.detail-section h3 {
  font-size: 13px;
}
.subtask-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.subtask-row > a {
  flex: 1;
  overflow-wrap: anywhere;
}
.subtask-row .icon-button {
  font-size: 13px;
  width: 28px;
}
.comment {
  display: flex;
  gap: 10px;
  margin: 22px 0;
}
.comment > div {
  flex: 1;
  min-width: 0;
}
.comment strong {
  font-size: 12px;
}
.comment time {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}
.comment p {
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 9px 0 0;
}
.comment .icon-button {
  font-size: 11px;
}
.comments + form textarea {
  margin-bottom: 12px;
}
.like-button {
  font-size: 12px;
  margin-bottom: 22px;
}
.like-button.liked {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.task-activity p {
  font-size: 11px;
  color: var(--muted);
  margin: 15px 0;
}
.task-activity time {
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.detail-section summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  margin-top: 25px;
  border-top: 1px solid var(--border);
  font-size: 10px;
}
.detail-footer button {
  font-size: 11px;
}
.drawer-open {
  overflow: hidden;
}
dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 24px;
  width: min(530px, calc(100vw - 30px));
  max-height: calc(100dvh - 40px);
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: #0009;
  backdrop-filter: blur(3px);
}
dialog > header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
dialog h2 {
  margin: 0;
  font-size: 22px;
}
dialog h3 {
  font-size: 13px;
}
dialog .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}
.field-list {
  margin-bottom: 25px;
}
.field-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.field-list strong {
  flex: 1;
}
.field-list .muted {
  font-size: 10px;
}
#toasts {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  max-width: calc(100vw - 28px);
  width: max-content;
}
.toast {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--text);
  color: var(--bg);
  padding: 11px 14px 11px 18px;
  border-radius: 9px;
  box-shadow: var(--shadow);
  font-size: 12px;
}
.toast > button:not(.icon-button) {
  background: transparent;
  color: var(--bg);
  border-color: currentColor;
  font-size: 11px;
  padding: 4px 9px;
}
.toast .icon-button {
  color: var(--bg);
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.auth-screen {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}
.auth-story {
  padding: 50px 9%;
  background: linear-gradient(140deg, var(--sidebar), var(--accent-soft));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-story .brand {
  margin: 0 0 50px;
}
.auth-story h1 {
  font:
    400 64px/1.1 Georgia,
    serif;
  letter-spacing: -2px;
  position: relative;
  z-index: 1;
}
.auth-story p {
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.auth-story > .muted {
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-top: 65px;
}
.auth-flower {
  position: absolute;
  right: -60px;
  bottom: 70px;
  font-size: 280px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.09;
  transform: rotate(20deg);
}
.auth-form {
  width: 100%;
  max-width: 480px;
  align-self: center;
  justify-self: center;
  padding: 50px;
}
.auth-form h2 {
  font-size: 28px;
}
.auth-form > .muted {
  font-size: 12px;
  margin-bottom: 30px;
}
.auth-form button.primary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
}
.auth-form .auth-footnote {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  margin-top: 25px;
}
.form-error {
  color: var(--red);
  font-size: 12px;
  margin: 8px 0;
}
.nav-scrim {
  display: none;
}
@media (min-width: 1600px) {
  .project-content,
  .project-header {
    padding-left: 45px;
    padding-right: 45px;
  }
  .task-row {
    min-height: 58px;
  }
  .row-pills {
    max-width: 440px;
  }
  .pill {
    font-size: 10px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 210px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .main-shell {
    margin-left: 210px;
  }
  .topbar {
    padding: 0 22px;
  }
  .project-content,
  .project-header,
  .page-content {
    padding-left: 22px;
    padding-right: 22px;
  }
  .row-pills {
    max-width: 210px;
  }
  .row-pills .pill {
    max-width: 145px;
  }
  .task-row {
    gap: 8px;
  }
  .project-tabs {
    gap: 22px;
  }
  .header-avatars {
    display: none;
  }
  .project-menu {
    margin-left: auto;
  }
  .project-title-row {
    gap: 12px;
  }
  .task-title {
    min-width: 90px;
  }
  .toolbar {
    gap: 4px;
  }
  .toolbar .search-local {
    width: 170px;
  }
  .home-columns {
    grid-template-columns: 1fr 1fr;
  }
  .panel {
    padding: 20px;
  }
  .sync-indicator span {
    display: none;
  }
}
@media (max-width: 950px) {
  .row-pills {
    display: none;
  }
  .project-title-row .status-pill {
    font-size: 9px;
  }
  .project-titles h1 {
    font-size: 21px;
  }
  .project-tabs {
    gap: 20px;
  }
  .chart-grid,
  .overview-grid {
    gap: 16px;
  }
  .home-columns {
    grid-template-columns: 1fr;
  }
  .metric-grid {
    gap: 10px;
  }
  .metric {
    padding: 16px;
  }
  .auth-story h1 {
    font-size: 48px;
  }
  .auth-form {
    padding: 35px;
  }
  .auth-story {
    padding: 40px 10%;
  }
  .home-intro h1 {
    font-size: 33px;
  }
  .home-flower {
    font-size: 70px;
    margin-right: 0;
  }
  .quick-add-label {
    display: none;
  }
}
@media (max-width: 760px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 255px;
    padding-top: 24px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 29;
  }
  .main-shell {
    margin-left: 0;
  }
  .topbar {
    height: 60px;
    padding: 0 15px;
    gap: 12px;
  }
  .topbar > .icon-button {
    display: inline-grid;
  }
  .topbar .global-search {
    min-width: 0;
  }
  .global-search input {
    font-size: 11px;
  }
  .global-search > span {
    display: none;
  }
  .search-results {
    left: -40px;
    right: -75px;
  }
  .topbar .quick-add {
    padding: 2px 7px;
    border: 0;
    font-size: 22px;
  }
  .quick-add kbd,
  .quick-add-label {
    display: none;
  }
  .topbar > .avatar {
    width: 26px;
    height: 26px;
  }
  .sync-indicator {
    margin-left: 0;
  }
  .project-header {
    padding: 22px 18px 0;
  }
  .project-content {
    padding: 18px 18px 30px;
  }
  .project-title-row {
    gap: 11px;
    flex-wrap: wrap;
  }
  .project-icon {
    width: 43px;
    height: 43px;
    border-radius: 10px;
    font-size: 23px;
  }
  .project-titles {
    flex: 1;
  }
  .project-titles h1 {
    font-size: 21px;
  }
  .project-titles .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .project-title-row > .status-pill {
    order: 5;
    margin-left: 54px;
    margin-top: -6px;
  }
  .project-tabs {
    margin-top: 14px;
    gap: 24px;
    margin-right: -18px;
    padding-right: 18px;
  }
  .project-tabs a {
    font-size: 12px;
  }
  .page-content {
    padding: 28px 18px;
  }
  .toolbar {
    row-gap: 8px;
    padding-bottom: 15px;
  }
  .toolbar .search-local {
    width: 100%;
    margin-right: 0;
  }
  .toolbar select {
    padding: 6px 4px;
    max-width: 150px;
  }
  .toolbar .small {
    margin-left: auto;
  }
  .section-tools {
    opacity: 1;
  }
  .section-tools .icon-button {
    width: 30px;
    height: 32px;
  }
  .task-row {
    min-height: 59px;
    padding-left: 0;
    padding-right: 0;
    gap: 9px;
  }
  .task-title {
    font-size: 12px;
    min-width: 0;
    display: block;
  }
  .row-meta {
    margin-top: 4px;
    font-size: 8px;
  }
  .task-row > .avatar {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }
  .task-row .due {
    font-size: 9px;
    min-width: 40px;
    white-space: normal;
    max-width: 70px;
  }
  .drag-handle {
    display: none;
  }
  .edit-title {
    opacity: 1;
    width: 28px;
    height: 32px;
    flex-shrink: 0;
  }
  .task-row .check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .inline-add button {
    opacity: 1;
  }
  .inline-add input {
    padding: 10px 0;
  }
  .inline-add {
    padding-left: 0;
    padding-right: 0;
  }
  .board {
    margin-right: -18px;
    padding-right: 18px;
    gap: 12px;
  }
  .board-column {
    min-width: 285px;
    max-width: 285px;
  }
  .board-column .section-tools {
    height: 25px;
    opacity: 1;
  }
  .card-title .check {
    width: 22px;
    height: 22px;
  }
  .task-card {
    padding: 18px 14px;
  }
  .overview-grid,
  .chart-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .wedding-summary h2 {
    font-size: 32px;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric strong {
    font-size: 36px;
  }
  .view-heading {
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
  }
  .view-heading .button-group {
    width: 100%;
  }
  .view-heading h2 {
    font-size: 19px;
  }
  .view-heading h1 {
    font-size: 26px;
  }
  .view-heading > button {
    font-size: 11px;
  }
  .home-intro h1 {
    font-size: 30px;
    max-width: 260px;
    line-height: 1.2;
  }
  .home-intro p {
    font-size: 12px;
    max-width: 240px;
  }
  .home-flower {
    font-size: 60px;
  }
  .home-intro .eyebrow {
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .home-columns {
    gap: 18px;
  }
  .panel {
    padding: 20px;
  }
  .panel .task-row .due {
    max-width: 55px;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .new-project-card {
    min-height: 150px;
  }
  .activity-row {
    gap: 10px;
    flex-wrap: wrap;
  }
  .activity-row > time {
    padding-left: 38px;
    width: 100%;
    margin-top: -8px;
  }
  .vendor-table {
    overflow: visible;
    border: 0;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
  }
  thead {
    display: none;
  }
  tr {
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 15px;
    background: var(--panel);
    padding: 15px;
  }
  td {
    border: 0;
    padding: 6px 0;
    font-size: 12px;
    max-width: none !important;
    overflow-wrap: anywhere;
  }
  td[data-label] {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0 10px;
  }
  td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    grid-column: 1;
    grid-row: 1 / span 4;
  }
  td[data-label] > * {
    grid-column: 2;
  }
  td:last-child {
    text-align: right;
    padding-top: 10px;
  }
  .vendor-notes {
    white-space: pre-wrap;
  }
  .run-row {
    gap: 12px;
    padding: 18px 0;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .run-row time {
    width: 65px;
    font-size: 12px;
    padding-top: 5px;
  }
  .run-row > .check {
    width: 32px;
    height: 32px;
  }
  .run-row > div {
    width: calc(100% - 140px);
  }
  .run-row a {
    font-size: 13px;
  }
  .run-row > .avatar {
    display: none;
  }
  .run-row p {
    font-size: 10px;
  }
  .calendar-day {
    min-height: 110px;
  }
  .calendar {
    min-width: 630px;
  }
  .task-drawer {
    width: 100%;
    max-width: none;
    border: 0;
  }
  .drawer-header {
    padding: 14px 18px;
  }
  .drawer-content {
    padding: 23px 20px;
  }
  .drawer-content h2 {
    font-size: 24px;
  }
  .drawer-content .form-grid {
    gap: 0 12px;
  }
  .drawer-content .form-grid label {
    font-size: 11px;
  }
  .drawer-content input,
  .drawer-content select,
  .drawer-content textarea,
  dialog input,
  dialog textarea,
  dialog select {
    font-size: 16px;
  }
  .drawer-content .small-text {
    display: block;
    margin-top: 8px;
  }
  dialog {
    padding: 20px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  dialog h2 {
    font-size: 21px;
  }
  .modal-actions button {
    min-height: 42px;
  }
  #toasts {
    bottom: 14px;
  }
  .toast {
    gap: 10px;
    font-size: 11px;
  }
  .auth-screen {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }
  .auth-story {
    padding: 25px 25px 28px;
    min-height: 270px;
  }
  .auth-story .brand {
    font-size: 25px;
    margin-bottom: 35px;
  }
  .auth-story h1 {
    font-size: 36px;
    letter-spacing: -1px;
    margin-bottom: 10px;
  }
  .auth-story p {
    font-size: 11px;
  }
  .auth-story .eyebrow {
    font-size: 8px;
  }
  .auth-story > .muted {
    display: none;
  }
  .auth-flower {
    font-size: 200px;
    bottom: 5px;
    right: -10px;
  }
  .auth-form {
    padding: 32px 25px 25px;
    max-width: 470px;
  }
  .auth-form h2 {
    font-size: 25px;
  }
  .auth-form input {
    font-size: 16px;
  }
  .auth-form > .muted {
    margin-bottom: 23px;
  }
  .auth-form .auth-footnote {
    margin-bottom: 0;
  }
  .check-label {
    white-space: normal;
  }
  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #fff;
    --panel: #fff;
    --accent-soft: #fff;
    --pink-1: #fff; --pink-2: #fff; --pink-3: #fff;
    --pink-4: #fff; --pink-5: #fff; --pink-6: #fff;
    --text: #111;
    --muted: #555;
    --border: #ddd;
    --accent: #6d3c4c;
    --sidebar: #fff;
  }
  body {
    background: white;
    color: #111;
    font-size: 11pt;
    overflow: visible !important;
  }
  .sidebar,
  .topbar,
  .no-print,
  .project-tabs,
  .project-menu,
  .toolbar,
  #drawer-root,
  #modal,
  #toasts,
  .status-pill,
  .header-avatars,
  .section-tools,
  .edit-title,
  .inline-add,
  .add-section {
    display: none !important;
  }
  .main-shell {
    margin: 0;
  }
  .project-header {
    padding: 0 0 15px;
  }
  .project-header .project-icon {
    width: 35px;
    height: 35px;
  }
  .project-titles h1 {
    font-size: 20pt;
  }
  .project-content,
  .page-content {
    padding: 0;
  }
  .view-heading {
    margin: 20px 0 12px;
  }
  .view-heading h2 {
    font-size: 16pt;
  }
  .run-row {
    break-inside: avoid;
    padding: 12px 0;
    gap: 15px;
  }
  .run-row > .check {
    border-color: #333;
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
  .run-row time {
    font-size: 11pt;
    color: #111;
  }
  .run-row a {
    font-size: 11pt;
  }
  .run-row p {
    font-size: 9pt;
  }
  .run-show {
    margin-bottom: 25px;
  }
  .now-line {
    display: none;
  }
  .vendor-table {
    overflow: visible;
    border: 0;
  }
  table {
    display: table;
    font-size: 9pt;
  }
  thead {
    display: table-header-group;
  }
  tbody {
    display: table-row-group;
  }
  tr {
    display: table-row;
    break-inside: avoid;
    background: white;
  }
  td,
  th {
    display: table-cell !important;
    padding: 8px !important;
    border-bottom: 1px solid #ddd;
  }
  td::before {
    display: none !important;
  }
  td a {
    color: #111;
    text-decoration: none;
  }
  .vendor-notes {
    max-width: 220px;
  }
  .panel {
    box-shadow: none;
    break-inside: avoid;
  }
  a[href]::after {
    content: none;
  }
  .calendar-scroll,
  .print-dayof .empty {
    padding: 15px;
  }
  .project-title-row {
    flex-wrap: nowrap;
  }
  @page {
    margin: 14mm;
  }
}
/* Spreadsheet columns share the same grid across every section. */
.list-view {
  overflow-x: auto;
}
.list-columns,
.list-view .sheet-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) 160px 130px 170px repeat(
      var(--field-count),
      minmax(170px, 1fr)
    );
  min-width: calc(720px + var(--field-count) * 170px);
  gap: 0;
}
.list-columns {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.list-columns > * {
  padding: 0 12px;
}
.list-view .sheet-row {
  position: relative;
  padding: 0;
}
.sheet-row .task-title {
  grid-column: 1;
  grid-row: 1;
  padding: 14px 35px 14px 48px;
}
.sheet-row > .check {
  position: absolute;
  left: 12px;
  top: 16px;
}
.sheet-row > .drag-handle {
  display: none;
}
.sheet-row > .edit-title {
  position: absolute;
  left: 225px;
  top: 12px;
}
.sheet-row > .row-pills {
  display: none;
}
.list-cell {
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  min-width: 0;
  text-align: left;
  background: transparent;
}
.list-cell input,
.list-cell select {
  width: 100%;
  min-width: 0;
}
[data-task] {
  cursor: pointer;
}
@media (max-width: 760px) {
  .topbar {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--bg);
  }
  .topbar > [data-action="nav-toggle"] {
    display: inline-grid !important;
    flex: 0 0 40px;
  }
  .topbar .sync-indicator,
  .topbar > .avatar {
    display: none;
  }
  .topbar .global-search {
    flex: 1;
  }
  .topbar .quick-add {
    min-width: 44px;
  }
  .list-columns {
    display: none;
  }
  .list-view .sheet-row {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    padding: 10px 0 10px 40px;
    gap: 6px;
  }
  .sheet-row .task-title {
    flex: 1 1 80%;
    padding: 0 28px 0 0;
  }
  .sheet-row > .edit-title {
    left: auto;
    right: 0;
    top: 8px;
  }
  .sheet-row > .check {
    left: 4px;
    top: 12px;
  }
  .sheet-row > .list-cell {
    flex: 0 1 auto;
    border: 0;
    padding: 4px;
    font-size: 12px;
  }
  .list-cell .pill {
    max-width: 220px;
    white-space: normal;
  }
  .task-row .row-pills {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .sheet-row > .row-pills {
    display: none;
  }
}

/* Coordination sheets */
#offline-banner { position: sticky; top: 0; z-index: 100; padding: 12px; text-align: center; background: var(--accent); color: var(--on-accent); }
#offline-banner[hidden] { display: none; }
.project-tabs { overflow-x: auto; flex-wrap: nowrap; }
.project-tabs > * { flex-shrink: 0; white-space: nowrap; }
.project-tabs > button { border: 0; background: transparent; padding: 14px; }
.project-tabs > button.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.more-menu { display: grid; gap: 8px; padding: 20px; }
.more-menu a { padding: 12px; border-radius: 8px; background: var(--bg); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sheet-card { display: flex; justify-content: space-between; gap: 12px; }
.sheet-card p, .info-grid dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 18px; }
.info-grid dt { font-size: 12px; color: var(--muted); }
.info-grid dd { margin: 5px 0 0; }
.day-info, .next-up, .reminder-settings { margin-bottom: 20px; }
.next-up { border-left: 4px solid var(--accent); }
.shift-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 20px 0; }
.check-label { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.check-label input { width: 22px; height: 22px; flex-shrink: 0; }
.checklist-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding: 10px 0; }
.checklist-row > p { flex-basis: 100%; }
.ordered-sheet { padding-left: 28px; }
.ordered-sheet li { padding: 14px; border-bottom: 1px solid var(--border); }
.ordered-sheet li > div { display: inline-block; vertical-align: middle; min-width: 60%; }
.ordered-sheet button { min-height: 44px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 18px 0; }
.attachment { min-width: 0; overflow-wrap: anywhere; }
.attachment img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.attachment a, .attachment small { display: block; }
.pdf-icon { display: grid; place-items: center; height: 110px; background: var(--bg); }
.preserve-lines { white-space: pre-wrap; }
.run-row { display: grid; grid-template-columns: 85px 44px minmax(0, 1fr) 34px; align-items: center; gap: 16px; }
.run-row > .check { width: 44px; height: 44px; }
.run-row > .run-title { width: auto; min-width: 0; }
.run-row > .avatar { display: inline-flex; }
.run-row .run-title a { display: block; min-height: 26px; }
.client-page { max-width: 1000px; margin: auto; }
.client-schedule { padding-left: 24px; }
.client-schedule li { padding: 14px 0; }
.client-schedule time { display: inline-block; min-width: 190px; }
@media (max-width: 760px) {
  .run-row { grid-template-columns: 60px 44px minmax(0, 1fr) 28px; gap: 8px; padding: 14px 0; }
  .run-row time { width: auto; padding: 0; font-size: 12px; }
  .run-row > .avatar { width: 28px; height: 28px; font-size: 10px; }
  .run-row p { font-size: 11px; }
}
@media print {
  #offline-banner, .no-print { display: none !important; }
  .day-info, .run-row, .sheet-card, .ordered-sheet li, .checklist-row { break-inside: avoid; }
  .next-up, .attachment-grid button { display: none; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .run-row { grid-template-columns: 85px 30px minmax(0, 1fr) 30px; }
}

.day-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.day-info > h3 { margin: 0; flex: 1; }
.day-info > :not(h3):not(.button) { flex-basis: 100%; }

.assistant-entry { display: flex; flex-direction: column; gap: 5px; max-width: 300px; }
.assistant-entry button:disabled { opacity: .45; cursor: not-allowed; }
.assistant-entry .small-text { font-size: 11px; }
.assistant-working { color: var(--assistant); font-size: 12px; }
.assistant-working:empty { display: none; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.assistant-chips button { text-align: left; white-space: normal; }
.assistant-message { padding: 12px 0; overflow-wrap: anywhere; }
.assistant-message p { white-space: pre-wrap; margin: 6px 0; }
.assistant-message.from-user { border-left: 2px solid #c98b99; padding-left: 12px; }
.assistant-panel h2 { margin: 0 0 4px; font-size: 18px; }
.assistant-panel textarea { width: 100%; }
#assistant-status { color: var(--assistant); }
#assistant-error { color: var(--red); }
@media (max-width: 760px) {
  .assistant-entry { max-width: 100%; flex-basis: 100%; }
  .assistant-entry button { align-self: flex-start; min-height: 44px; }
  .assistant-panel { width: 100%; }
}
@media print { .assistant-entry, .assistant-panel, .assistant-working { display: none !important; } }

.sheet-card > .card-actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.money-tiles > .panel { display: flex; flex-direction: column; gap: 6px; }
.money-tiles > .panel > strong { font-size: 20px; }
.assistant-off { opacity: 0.45; padding: 6px 11px; }
.assistant-off:hover { opacity: 0.8; }

/* Planning sheets */
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.email-timeline { display: grid; gap: 1rem; }
.missing-field { background: #ffe49a; color: #4a3300; border-radius: .2rem; padding: .1rem .25rem; }
.email-timeline .button-group { flex-wrap: wrap; }

.paper-table { width: 100%; border-collapse: collapse; }
.paper-table th, .paper-table td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
@media print { .paper-table { font-size: 10pt; } .paper-table td, .paper-table th { border-bottom: 1px solid #bbb; } .questionnaire article { break-inside: avoid; } .consultation-sheet h3 { break-after: avoid; } .table-scroll { overflow: visible; } .answer-lines { min-height: 3em; } }

.do-by { --pill: #91b5b0; } .do-by-overdue { --pill: #ef8890; color: var(--red); border: 1px solid currentColor; }

.contacts-grid .button { min-height: 48px; padding: 12px 18px; } .contacts-grid .button-group { flex-wrap: wrap; } [data-contact-card][hidden] { display: none; }

.vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; } .vision-grid img { width: 100%; max-height: 400px; object-fit: contain; border-radius: 8px; } @media print { .vision-grid article { break-inside: avoid; } .vision-grid { grid-template-columns: 1fr 1fr; } }

.restock-list { border-left: 3px solid #dfa66c; margin: 10px 0; }
.restock-list p { margin: 6px 0 0; }
.low-toggle { margin-left: auto; font-size: 12px; color: var(--muted); }
.checklist-row.is-low .low-toggle { color: var(--amber); }
.restock-note { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--amber); color: var(--amber); font-size: 13px; }
/* Client documents stay readable on Letter paper and on a phone. */
.client-document{max-width:8in;margin:1.5rem auto;padding:2rem;background:#fff;color:#17212b;line-height:1.65}
.client-document header{border-bottom:3px solid #a7687a;padding-bottom:1.5rem;margin-bottom:2rem}
.client-document h1{font-size:2.4rem}.client-section{margin:2rem 0}.client-section h2{border-bottom:1px solid #ccc;padding-bottom:.5rem}
.client-section p{white-space:pre-wrap;overflow-wrap:anywhere}.share-options{display:grid;gap:.75rem;margin:1rem 0}
@media(max-width:600px){.client-document{padding:1rem}.client-document h1{font-size:1.8rem}}
@media print{@page{size:Letter;margin:.6in}.client-document{margin:0;padding:0;max-width:none;font-size:12pt}.client-document header{break-after:avoid}.client-section h2{break-after:avoid}.client-section p,.client-section figure{break-inside:avoid}.client-section + .client-section{break-before:auto}.client-document .vision-grid{break-before:page}}
.floor-scroll{overflow:auto;max-width:100%;border:1px solid #ddd;margin:1rem 0}.floor-plan{position:relative;width:1000px;height:700px;background:linear-gradient(90deg,#eee 1px,transparent 1px),linear-gradient(#eee 1px,transparent 1px);background-size:20px 20px;isolation:isolate}
.floor-plan::before{content:'';position:absolute;inset:0;background-image:var(--floor-image);background-size:contain;background-repeat:no-repeat;opacity:.18;z-index:-1;pointer-events:none}
.floor-table{position:absolute;width:120px;height:100px;background:white;border:2px solid #252525;transform-origin:center}.shape-round{border-radius:50%}.shape-head{width:180px;height:65px}.shape-sweetheart{width:120px;height:65px;border-radius:20px}.table-handle{position:absolute;left:20%;top:30%;width:60%;padding:4px;white-space:normal;touch-action:none;cursor:grab;background:#fff;border:0;font-weight:700;color:#111}.seat-dot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:26px;height:26px;padding:0;font-size:11px;background:#fff}.seat-dot.occupied{background:#d8eadb}.room-label{position:absolute;padding:8px;background:#fff;border:1px dashed #555;touch-action:none;cursor:grab}.seating-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.seating-tables ol{padding-left:1.5rem}.guest-chips{display:flex;flex-wrap:wrap;gap:.5rem}.seating-print{display:none}.table-scroll{overflow-x:auto}.warning{padding:.6rem;border-left:3px solid #aa631d;background:#fff4de}
@media print{.seating-print{display:block;color:#000;font-size:16pt;line-height:1.35}.seating-print h1{font-size:24pt}.table-print-block{break-inside:avoid;page-break-inside:avoid;border:2px solid #000;padding:.2in;margin:.15in 0}.table-print-block h2{font-size:22pt;margin:0 0 .12in}.table-print-block p{margin:.08in 0;font-size:16pt;break-inside:avoid}.find-seat p{break-inside:avoid}.seating-print .floor-scroll{overflow:visible;border:0;break-before:page}.seating-print .floor-plan{zoom:.66;background:none}.seating-print .floor-plan::before{display:none}.seating-print .floor-table{background:white!important;color:black!important}.seating-print .table-handle{display:block!important;color:#000;background:#fff}.card-page{display:grid;grid-template-columns:1fr 1fr;gap:.1in;break-after:page;height:9.6in;box-sizing:border-box}.card-page:last-child{break-after:auto}.card-page.tent{grid-template-rows:repeat(2,1fr)}.card-page.flat{grid-template-rows:repeat(5,1fr)}.name-card{border:1px dashed #555;break-inside:avoid;display:flex;flex-direction:column;text-align:center;overflow-wrap:anywhere}.card-front,.card-back{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.08in}.card-back{transform:rotate(180deg);border-top:1px dotted #777}.name-card strong{font-size:22pt;color:#000;line-height:1.1}.name-card span{font-size:12pt}.name-card small{font-size:8pt;margin-top:.08in}.flat .name-card strong{font-size:18pt}}
@media print{#main:has(.print-artifact)>.project-header,.print-artifact>.view-heading{display:none!important}.table-print-block.long-table{break-inside:auto}.table-print-block h2{break-after:avoid}.seating-print .card-page{margin:0}.seating-print .floor-scroll{break-before:auto}}
.social-photo-picker{display:grid;gap:.75rem;max-height:45vh;overflow:auto}.social-photo-row{padding:.5rem;border:1px solid var(--border);border-radius:8px}.social-photo-row label{display:flex;gap:.5rem;align-items:center;overflow-wrap:anywhere}.social-photo-row img{width:80px;height:80px;object-fit:cover}
.time-frame-editor { flex-wrap: wrap; }
.time-frame-editor label { width: 100%; }
.time-frame-cell .pill { white-space: normal; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; border: 1px solid var(--border); border-radius: 12px; margin: 0 0 20px; }
.calendar-legend label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
.calendar-legend input { width: auto; }
.calendar-legend .project-dot { background: var(--project-color); }
.master-scroll { overflow-x: auto; }
.master-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.master-day { min-height: 140px; min-width: 0; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.master-day h3 { font: inherit; font-size: 12px; margin: 0 0 8px; }
.master-day.outside { background: var(--panel); }
.master-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.master-event { display: flex; flex-direction: column; gap: 4px; padding: 8px; margin-bottom: 6px; border-left: 4px solid var(--project-color); background: var(--panel); color: var(--text); border-radius: 5px; overflow-wrap: anywhere; font-size: 12px; }
.master-event:hover { background: var(--panel-hover); }
.project-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text); border: 1px solid var(--project-color); border-radius: 12px; padding: 2px 7px; width: fit-content; }
.project-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--project-color); flex-shrink: 0; }
.master-calendar:not([data-mode="agenda"]) .master-agenda { display: none; }
.master-calendar[data-mode="agenda"] .master-scroll { display: none; }
.master-agenda > section { margin-bottom: 24px; }
@media (max-width: 760px) {
  .master-calendar[data-mode="auto"] .master-scroll { display: none; }
  .master-calendar[data-mode="auto"] .master-agenda { display: block; }
  .master-calendar[data-mode="month"] .master-grid { min-width: 700px; }
  .master-grid.week { grid-template-columns: 1fr; }
  .master-grid.week .master-day { min-height: 80px; }
  .master-event { padding: 12px; min-height: 44px; }
  .calendar-legend label { min-height: 44px; }
}
.project-task { border-left: 4px solid var(--project-color); padding-left: 12px; }
.project-task .row-meta { flex-wrap: wrap; }
.project-task .project-chip { font-size: 11px; opacity: 1; }

/* Soft headings, with local serif fallbacks and readable controls in both themes. */
h1, h2 { font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif; }
button.primary, a.button.primary { background: var(--accent); color: var(--on-accent); }
.pill { border: 1px solid color-mix(in srgb, var(--pill, var(--accent)) 35%, var(--border)); }
.warning { color: #603b13; }
.floor-table, .seat-dot, .room-label { color: #252525; }
/* Task sections stay easy to scan on desktop and touch screens. */
.list-view .section-toggle, .board-column > .section-heading { font-size: 17px; line-height: 1.45; }
.list-view .section-heading, .board-column > .section-heading {
  background: var(--section-pink, var(--accent-soft));
  color: var(--text);
  border-left: 4px solid color-mix(in srgb, var(--section-pink, var(--accent-soft)) 60%, var(--accent));
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
}
.inline-cell-editor { flex-wrap: wrap; }
.inline-cell-editor > button { white-space: normal; }
@media (max-width: 760px) {
  [data-form="seat-table"] button, [data-form="seat-chart"] button,
  [data-action="seat-tables"], [data-action="seat-special"] { min-height: 44px; }
  .seating-tables { grid-template-columns: minmax(0, 1fr); }
  .sheet-row .time-frame-editor { flex: 1 1 100%; }
}

.email-sent { background: var(--bg); color: var(--muted); border-color: var(--border); }

.logo-field{border:1px solid var(--line, #f1d3dc);border-radius:12px;padding:.75rem;display:grid;gap:.5rem}.logo-preview{max-height:72px;max-width:220px;object-fit:contain;display:block}

/* Emergency kit stock colours: green stocked, yellow running low, red out. */
.kit-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;justify-content:space-between;margin:.5rem 0}
.kit-legend{display:flex;gap:.4rem;align-items:center;font-size:.9rem}
.kit-dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-left:.4rem}
.kit-dot.kit-stocked{background:#3f9d5a}.kit-dot.kit-low{background:#e0b020}.kit-dot.kit-out{background:#d64545}
.kit-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;border-left:6px solid #3f9d5a;padding-left:.7rem;border-radius:10px}
.kit-row-stocked{background:#eaf7ee;border-left-color:#3f9d5a}
.kit-row-low{background:#fff6d6;border-left-color:#e0b020}
.kit-row-out{background:#fde4e4;border-left-color:#d64545}
.kit-row > :first-child{flex:1 1 12rem;color:#3b2a30}
.kit-status{display:inline-flex;border-radius:999px;overflow:hidden;border:1px solid #e7c6d1}
.kit-status button{border:0;border-radius:0;padding:.45rem .75rem;min-height:2.5rem;background:#fff;color:#5b4650;font-size:.85rem}
.kit-status button.is-active.kit-stocked{background:#3f9d5a;color:#fff}
.kit-status button.is-active.kit-low{background:#e0b020;color:#2b2100}
.kit-status button.is-active.kit-out{background:#d64545;color:#fff}
.print-only{display:none}
@media print{.print-only{display:inline}}
.kit-nudge{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Vision boards (Pinterest-style) */
.board-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.board-chip{border-radius:999px;padding:.45rem .9rem;background:#fff;border:1px solid #f0c6d4;color:#7a3653}
.board-chip span{opacity:.7;margin-left:.25rem}
.board-chip.is-active{background:#c2457a;border-color:#c2457a;color:#fff}
.pin-grid{column-width:15rem;column-gap:1rem;margin:1rem 0}
.pin{break-inside:avoid;margin:0 0 1rem;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 14px rgba(190,90,130,.12);border:1px solid #f6d9e3}
.pin img{display:block;width:100%;height:auto}
.pin-body{padding:.7rem .85rem}
.pin-body h3{margin:.1rem 0 .3rem;font-size:1rem}
.pin-move select{padding:.3rem;min-height:2.25rem}
@media print{.pin{box-shadow:none}}

/* Admin page */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin:1rem 0}
.admin-stats .stat{display:grid;gap:.15rem;padding:.8rem 1rem}
.admin-stats .stat span{font-size:.8rem;color:var(--muted,#8a6b76);text-transform:uppercase;letter-spacing:.06em}
.admin-stats .stat strong{font-size:1.25rem}
.admin-stats .stat small{color:var(--muted,#8a6b76)}
.admin-quick{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}
.admin-quick button{min-height:2.9rem;padding:.6rem 1rem}
.admin-link-row{display:flex;gap:.5rem;align-items:center;margin:.5rem 0}
.admin-link-row input{flex:1;min-width:0}
.admin-section{margin:.75rem 0}
.admin-section summary{cursor:pointer;list-style:none}
.admin-section summary h2{display:inline;font-size:1.2rem}
.admin-section summary::before{content:'▸ ';color:var(--muted,#8a6b76)}
.admin-section[open] summary::before{content:'▾ '}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid var(--line,#f1d3dc);vertical-align:top}
.admin-actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.admin-actions button{padding:.3rem .6rem;font-size:.85rem}
.pill-off{background:#fde4e4;color:#9b2c2c}
.admin-ai-form{display:grid;gap:.6rem;max-width:34rem}
.admin-backups{list-style:none;padding:0;display:grid;gap:.35rem}

.viewing-banner{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;background:#fff3c4;border:1px solid #e0b020;color:#3b2a00;border-radius:12px;padding:.6rem .9rem;margin:0 0 1rem}