/* components.css — buttons, fields, segmented control, chips, cards, modal, toast. */

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-4); border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: transform .08s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--ui-accent); color: var(--ui-accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--ui-accent) 94%, #000); }
.btn-secondary { background: var(--field); color: var(--text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--field) 60%, var(--text-3)); }
.btn-danger { background: transparent; color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--field); color: var(--text); }
.btn-sm { height: 26px; padding: 0 var(--space-3); font-size: 12px; }
.btn-block { width: 100%; }

/* --- Fields ---------------------------------------------------------------- */
.field, input[type="text"], input[type="date"], input[type="time"], input[type="number"],
input[type="email"], input[type="tel"], input[type="url"], input[type="search"],
input[type="password"], select, textarea {
  width: 100%; height: 32px; padding: 0 var(--space-3);
  background: var(--field); border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
textarea { height: auto; min-height: 60px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.4; }
.field:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent);
}
.field-label { display: block; font-size: 11px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; letter-spacing: .01em; }
.field-row { margin-bottom: var(--space-4); }
.field-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* --- Native controls ------------------------------------------------------- *
   Everything above gives these boxes the app's fill and radius, and macOS then
   draws its own control on top: a bevelled gradient on a <select>, stepper
   arrows on a number field, a hard square checkbox. The result was one or two
   widgets per screen that plainly came from somewhere else. Turning the
   platform's rendering off and drawing the affordances here is what makes the
   forms look like one app. */

select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px; cursor: pointer;
  /* Two triangles meeting into a chevron. Drawn with gradients rather than an
     image so the colour comes from a token and follows the theme. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Steppers removed: these are goals and hours, typed once and rarely nudged.
   The arrows were only ever a place to mis-click. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 auto;
  width: 16px; height: 16px; margin: 0; border-radius: 5px; cursor: pointer;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--panel-border);
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
input[type="checkbox"]:hover { box-shadow: inset 0 0 0 1px var(--ui-accent); }
input[type="checkbox"]:checked { background: var(--ui-accent); box-shadow: none; }
/* The tick is two borders of an empty box, rotated — no image to fetch, so it
   stays crisp at any scale and asks nothing of the CSP. */
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid var(--ui-accent-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

/* The date and time pickers stay native — rebuilding a calendar would be worse
   than borrowing the system's — but their trigger icon is toned to match. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .5; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Segmented control ----------------------------------------------------- */
.segmented { display: inline-flex; background: var(--field); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.segmented button {
  border: none; background: transparent; color: var(--text-2);
  height: 28px; padding: 0 var(--space-3); border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.segmented button.is-active {
  background: var(--panel-raised); color: var(--text);
  backdrop-filter: var(--panel-blur, none);
  -webkit-backdrop-filter: var(--panel-blur, none);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* --- Chips ----------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border-radius: 11px; font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, var(--accent, var(--gray)) 14%, transparent);
  color: var(--accent, var(--gray));
}
.chip--removable button { border: none; background: none; color: inherit; cursor: pointer; line-height: 1; padding: 0; opacity: .7; }
.chip--removable button:hover { opacity: 1; }

/* --- Metric card ----------------------------------------------------------- */
.metric-card {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-card);
}
.metric-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.metric-card__value { font-variant-numeric: tabular-nums; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; }
.metric-card__delta { font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.metric-card__delta .prev { color: var(--text-2); }
.delta-up { color: var(--green); }
.delta-down { color: var(--red); }
.delta-flat { color: var(--gray); }

/* --- Sync badge ------------------------------------------------------------ */
.sync-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, var(--accent, var(--gray)) 14%, transparent);
  color: var(--accent, var(--gray));
}
.sync-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Modal ----------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal {
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  width: min(560px, 100%); max-height: 90dvh; overflow-y: auto;
  animation: modal-in .18s var(--ease);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--panel-border); }
.modal__title { font-size: 17px; font-weight: 600; }
.modal__body { padding: var(--space-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--panel-border); }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* --- Toast ----------------------------------------------------------------- */
.toast-region { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 80; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  padding: 10px var(--space-4); font-size: 14px; min-width: 220px; max-width: 360px;
  animation: toast-in .2s var(--ease);
}
.toast.is-leaving { animation: toast-out .2s var(--ease) forwards; }
.toast__msg { flex: 1; }
.toast__action { border: none; background: none; color: var(--ui-accent); font-weight: 600; cursor: pointer; font-size: 13px; }
.toast[data-variant="error"] { border-color: color-mix(in srgb, var(--red) 40%, var(--panel-border)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 860px) { .toast-region { left: var(--space-3); right: var(--space-3); bottom: calc(72px + env(safe-area-inset-bottom)); } .toast { max-width: none; } }

/* --- Empty state ----------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-2); }
.empty-state svg { width: 44px; height: 44px; color: var(--text-3); margin-bottom: var(--space-3); }
.empty-state__title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state__hint { font-size: 13px; margin-bottom: var(--space-4); }

/* --- Banners --------------------------------------------------------------- */
.banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; margin-bottom: var(--space-4); }
.banner--warn { background: color-mix(in srgb, var(--orange) 14%, transparent); color: color-mix(in srgb, var(--orange) 80%, var(--text)); }
.banner--danger { background: color-mix(in srgb, var(--red) 12%, transparent); color: color-mix(in srgb, var(--red) 82%, var(--text)); }
.banner--info { background: var(--field); color: var(--text-2); }
.banner__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* --- Forms (schedule & modals) --------------------------------------------- */
.form-panel { padding: 0; overflow: hidden; }
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-5); }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.seg-wrap { flex-wrap: wrap; }
.input-with-btn { display: flex; gap: var(--space-2); }
.input-with-btn input { flex: 1; }
.quick-dates { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.form-foot {
  border-top: 1px solid var(--panel-border); padding: var(--space-4) var(--space-5);
  position: sticky; bottom: 0; background: var(--panel-raised);
  backdrop-filter: var(--panel-blur, none);
  -webkit-backdrop-filter: var(--panel-blur, none);
}
.form-foot__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 720px) {
  .form-cols { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Autocomplete ---------------------------------------------------------- */
.autocomplete { position: relative; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ac-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden; padding: 4px;
}
.ac-item {
  display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left;
  border: none; background: none; color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px;
}
.ac-item:hover { background: var(--field); }
.ac-item__sub { color: var(--text-3); font-size: 12px; }
.ac-item--create { color: var(--ui-accent); }
.ac-create { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.ac-create__title { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ac-create__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: 2px; }

/* --- Energy dots ----------------------------------------------------------- */
.energy { display: flex; gap: var(--space-2); }
.energy__dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--text-3);
  background: transparent; cursor: pointer; transition: all .12s var(--ease); padding: 0;
}
.energy__dot.is-on { background: var(--green); border-color: var(--green); }

/* --- Meetings: summary strip ---------------------------------------------- */
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.summary-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); }
.summary-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.summary-card__value { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin-top: 2px; }
.summary-card__foot { font-size: 12px; color: var(--text-2); margin-top: 2px; }
@media (max-width: 720px) { .summary-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- Meetings: toolbar ----------------------------------------------------- */
.mt-panel { padding: 0; }
.mt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
.mt-nav { display: flex; align-items: center; gap: var(--space-2); }
.mt-nav__label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.mt-filters { display: flex; gap: var(--space-2); flex: 1; justify-content: flex-end; }
.mt-filters input, .mt-filters select { width: auto; min-width: 140px; }
.mt-view { padding: var(--space-4); }

/* --- Week grid ------------------------------------------------------------- */
.week-scroll { overflow-x: auto; overflow-y: hidden; }
.week-inner { min-width: 100%; padding-bottom: 10px; }
.week-head { display: flex; position: sticky; top: 0; }
.week-gutter { width: 48px; flex: 0 0 48px; }
.week-day-head { flex: 1; text-align: center; padding: 6px 0; font-size: 12px; color: var(--text-2); border-radius: var(--radius-sm); }
.week-day-head strong { display: block; font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.week-day-head.is-today strong { color: var(--ui-accent-ink); background: var(--ui-accent); border-radius: 50%; width: 26px; height: 26px; line-height: 26px; margin: 2px auto 0; }
.week-body { display: flex; }
.week-gutter .week-hour { position: relative; }
.week-hour span { position: absolute; top: -7px; right: 6px; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.week-cols { display: flex; flex: 1; }
.week-col { flex: 1; position: relative; border-left: 1px solid var(--panel-border); }
.week-col.is-today { background: color-mix(in srgb, var(--ui-accent) 4%, transparent); }
.week-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--panel-border); opacity: .5; }
.week-event-wrap { position: absolute; left: 3px; right: 3px; }
.week-event {
  position: absolute; inset: 0; overflow: hidden; display: block;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid));
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 3px 6px;
  font-size: 11px; color: var(--text); box-shadow: var(--shadow-card); cursor: pointer;
}
.week-event__time { color: var(--text-2); margin-right: 4px; }
.week-event__title { font-weight: 500; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Pulsing dot as an action: opens the outcome popover without leaving the calendar. */
.pending-dot-btn {
  position: absolute; top: 1px; right: 1px; z-index: 2;
  width: 20px; height: 20px; padding: 0; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pending-dot-btn::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  animation: pulse 1.4s var(--ease) infinite; transition: width .12s var(--ease), height .12s var(--ease);
}
.pending-dot-btn:hover::before, .pending-dot-btn:focus-visible::before {
  width: 12px; height: 12px; animation: none;
}
@media (max-width: 860px) {
  .pending-dot-btn { width: 30px; height: 30px; }
  /* Keep day columns readable instead of squeezing 7 of them into 375px. */
  .week-inner, .rw-inner { min-width: 640px; }
  .mt-toolbar { gap: var(--space-2); }
  .mt-filters { flex-wrap: wrap; }
  .mt-filters input, .mt-filters select { min-width: 0; flex: 1 1 140px; }
}

/* --- Month grid ------------------------------------------------------------ */
.month-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.month-dow span { text-align: center; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month-cell { min-height: 92px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.month-cell.is-out { opacity: .4; }
.month-cell__num { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); align-self: flex-end; }
.month-cell.is-today .month-cell__num { background: var(--ui-accent); color: var(--ui-accent-ink); border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; }
.month-pills { display: flex; flex-direction: column; gap: 2px; }
.month-pill {
  position: relative; display: block; font-size: 11px; padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  border-left: 2px solid var(--accent);
}
.month-pill__link { display: block; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-more { font-size: 10px; color: var(--text-3); }

@media (max-width: 720px) {
  .month-cell { min-height: 58px; cursor: pointer; }
  /* Pills collapse to iOS-style dots; tapping the day opens that week. */
  .month-pills { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 2px; }
  .month-pill {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
    background: var(--accent); overflow: hidden;
  }
  .month-pill__link { text-indent: -999px; height: 8px; }
  /* One dot per meeting: the month is an overview on mobile. Registering a result
     happens in the week view, which has a proper touch target. */
  .month-pill .pending-dot-btn { display: none; }
  .month-pill:has(.pending-dot-btn) { background: var(--orange); }
  .month-more { display: none; }
}

/* --- Data table ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; overflow-y: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 8px 10px; color: var(--text-2); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--panel-border); cursor: pointer; white-space: nowrap; }
.data-table th.sorted { color: var(--text); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--field); }
.col-people { color: var(--text-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Popover --------------------------------------------------------------- */
.popover { position: absolute; z-index: 70; background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: var(--space-3); width: 280px; animation: modal-in .14s var(--ease); }
.popover__title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }
.oc-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.oc-value, .oc-note { margin-top: 6px; }

/* --- Meeting detail -------------------------------------------------------- */
.back-link { font-size: 13px; color: var(--text-2); }
.back-link:hover { color: var(--ui-accent); }
.detail-actions { display: flex; gap: var(--space-2); }
.detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.dcard-head { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.dcard-title { font-size: 15px; font-weight: 600; margin-bottom: var(--space-3); }
.drow { display: flex; align-items: baseline; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--panel-border); }
.drow__label { flex: 0 0 120px; font-size: 12px; color: var(--text-2); }
.editable { flex: 1; border-radius: var(--radius-sm); padding: 2px 6px; margin: -2px -6px; cursor: text; min-height: 22px; }
.editable:hover { background: var(--field); }
.editable input, .editable select, .editable textarea { width: 100%; }
.muted { color: var(--text-3); }

.dcard-parts { margin-top: var(--space-4); }
.parts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.part-card { background: var(--field); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.part-card__name { font-weight: 500; font-size: 14px; }
.part-card__sub { font-size: 12px; color: var(--text-2); }
.part-card__links { display: flex; align-items: center; gap: var(--space-3); margin-top: 4px; font-size: 12px; }
.wa-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: #25D366; font-weight: 500;
}
.wa-link:hover { color: color-mix(in srgb, #25D366 80%, black); }
.wa-link svg { flex: 0 0 16px; }

.task-line { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; }
.task-line__title { flex: 1; font-size: 14px; }

/* --- Diary ----------------------------------------------------------------- */
.diary-new { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.diary-new .segmented { align-self: flex-start; }
.diary-new .btn { align-self: flex-end; }
.diary-group { margin-bottom: var(--space-4); }
.diary-group__title { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }
.diary-item { border-left: 3px solid var(--accent); background: var(--field); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.diary-item__body { font-size: 14px; white-space: pre-wrap; }
.diary-item__meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.diary-empty { font-size: 13px; padding: 2px 0; }
.link-danger { border: none; background: none; color: var(--red); cursor: pointer; font-size: 11px; opacity: .7; }
.link-danger:hover { opacity: 1; }

/* --- Tasks ------------------------------------------------------------------ */
.head-actions { display: flex; align-items: center; gap: var(--space-3); }
.task-toolbar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.task-toolbar select { width: auto; min-width: 180px; }

.task-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.task-col { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-3); min-height: 200px; }
.task-col__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0 var(--space-1) var(--space-2); }
.task-col__count { background: var(--field); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--text-2); }
.task-col__body { display: flex; flex-direction: column; gap: var(--space-2); min-height: 60px; border-radius: var(--radius-md); transition: background .15s var(--ease); }
.task-col__body.drop-hover { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); outline: 2px dashed color-mix(in srgb, var(--ui-accent) 40%, transparent); outline-offset: -2px; }
.col-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: var(--space-4) 0; }

.task-card {
  display: flex; background: var(--panel-raised); border: 1px solid var(--panel-border);
  backdrop-filter: var(--panel-blur, none); -webkit-backdrop-filter: var(--panel-blur, none);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); cursor: grab;
}
.task-card.dragging { opacity: .5; }
.task-card.is-overdue { background: color-mix(in srgb, var(--red) 6%, var(--panel-solid)); }
.task-card__bar { width: 4px; flex: 0 0 4px; background: var(--accent); }
.task-card__body { flex: 1; padding: var(--space-2) var(--space-3); }
.task-card__title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.task-card__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.task-due { font-size: 12px; color: var(--text-2); }
.task-due.is-overdue { color: var(--red); font-weight: 600; }
.task-card__from { display: block; font-size: 11px; color: var(--text-2); margin-top: 6px; }
.task-card__nav { display: flex; justify-content: flex-end; gap: 2px; margin-top: 6px; }
.task-card__nav .icon-btn { width: 26px; height: 26px; }

@media (max-width: 720px) { .task-board { grid-template-columns: 1fr; } .task-card { cursor: default; } }

/* --- Task list ------------------------------------------------------------- */
.task-list { padding: var(--space-3) var(--space-4); }
.list-group { margin-bottom: var(--space-4); }
.list-group__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-bottom: var(--space-2); display: flex; gap: var(--space-2); }
.list-group__title.is-danger { color: var(--red); }
.list-group__title span { color: var(--text-3); }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: 8px 4px; border-bottom: 1px solid var(--panel-border); }
.list-row__title { flex: 1; font-size: 14px; }
.list-row.is-done .list-row__title { text-decoration: line-through; color: var(--text-3); }
.task-check { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--green); cursor: pointer; }


/* --- Task history ---------------------------------------------------------- *
   Same rows as the list, minus the checkbox: these are done and reopening one
   from here would mean editing the past. The tick keeps the left edge aligned
   with the list view, so switching tabs doesn't shift every title sideways. */
.task-history { padding: var(--space-3) var(--space-4); }
.hist-tick { width: 18px; flex: 0 0 18px; text-align: center; color: var(--green); font-size: 13px; }
.task-history .list-group__title { text-transform: none; font-size: 13px; letter-spacing: 0; }
/* On the board a strikethrough separates the done from the pending. Here
   everything is done, so striking every line through says nothing and only
   makes the page harder to read — the tick already carries it. */
.task-history .list-row.is-done .list-row__title { text-decoration: none; color: var(--text); }

/* --- Routine --------------------------------------------------------------- */
.routine-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-4); align-items: start; }
.routine-main { display: flex; flex-direction: column; gap: var(--space-4); }
.routine-side { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 960px) { .routine-grid { grid-template-columns: 1fr; } }

/* Room for the closing 00h. Its label is drawn 6px above the line it marks, so
   the last one — on a zero-height row at the very bottom — hung past the grid.
   That overhang was the 9px that used to make this box overflow vertically. */
.rw-inner { min-width: 100%; padding-bottom: 10px; }
.rw-head { display: flex; }
.rw-gutter { width: 44px; flex: 0 0 44px; }
.rw-day-head { flex: 1; text-align: center; font-size: 12px; color: var(--text-2); padding-bottom: 4px; }
.rw-body { display: flex; }
.rw-hour { position: relative; }
.rw-hour span { position: absolute; top: -6px; right: 6px; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rw-cols { display: flex; flex: 1; }
.rw-col { flex: 1; position: relative; border-left: 1px solid var(--panel-border); cursor: pointer; }
.rw-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--panel-border); opacity: .4; }
.rw-block { position: absolute; left: 2px; right: 2px; overflow: hidden; border-radius: 5px; padding: 2px 5px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); border-left: 3px solid var(--accent);
  font-size: 10px; cursor: pointer; }
.rw-block.is-inactive { opacity: .35; filter: grayscale(1); }
.rw-block__name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-block__time { color: var(--text-2); }

.checkin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.checkin-progress { height: 6px; background: var(--field); border-radius: 3px; overflow: hidden; margin-bottom: var(--space-3); }
.checkin-progress__bar { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s var(--ease); }
.checkin-list { display: flex; flex-direction: column; gap: var(--space-2); }
.checkin-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); }
.checkin-item.is-done { background: color-mix(in srgb, var(--green) 6%, transparent); }
.checkin-toggle { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; border: 2px solid var(--text-3);
  background: transparent; color: transparent; cursor: pointer; font-size: 16px; transition: all .18s var(--ease); }
.checkin-toggle.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.checkin-item__info { flex: 1; }
.checkin-item__name { font-size: 14px; font-weight: 500; }
.checkin-item__sub { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.checkin-note { width: 120px; }

.stat-panel { text-align: center; }
.stat-big__value { font-size: 46px; font-weight: 600; letter-spacing: -0.025em; display: block; color: var(--green); }
.stat-big__label { font-size: 12px; color: var(--text-2); }
.stat-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.cat-bar { margin-bottom: var(--space-3); }
.cat-bar__label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.cat-bar__track { height: 8px; background: var(--field); border-radius: 4px; overflow: hidden; }
.cat-bar__fill { height: 100%; background: var(--accent); border-radius: 4px; }

.switch-row { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; margin: var(--space-2) 0; }
.dup-days { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dup-day { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-2); }

/* --- Dashboard ------------------------------------------------------------- */
.text-3 { color: var(--text-3); }
.metric-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 960px) { .metric-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .metric-row { grid-template-columns: 1fr; } }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
/* Grid rows space their children with `gap`, so the stacking margin from
   `.panel + .panel` must not pile on top of it — every panel after the first in
   a row would sit 16px lower than its neighbours. Both selectors need the
   parent in them: a lone `.cut-panel` loses to `.panel + .panel` on
   specificity, which is exactly how the cut tables came out misaligned. */
.chart-row .panel,
.cut-tables .panel { margin: 0; }
/* .chart-row already carries its own bottom margin, so a panel after it must
   not add a second one. .cut-tables is NOT in that list on purpose: it needs its
   own top margin, or it ends up glued to the panel above while every other gap
   on the page is 16px. */
.chart-row + .panel { margin-top: 0; }
@media (max-width: 860px) { .chart-row { grid-template-columns: 1fr; } }
.chart-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-3); }
.chart-box { position: relative; height: 240px; }
.chart-box--tall { height: 300px; }
.chart-offline { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; font-size: 13px; padding: var(--space-4); }

.cut-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
@media (max-width: 860px) { .cut-tables { grid-template-columns: 1fr; } }
.cut-mini th, .cut-mini td { padding: 6px 8px; }
.cut-mini th:first-child, .cut-mini td:first-child { text-align: left; }

.dq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .dq-grid { grid-template-columns: repeat(2, 1fr); } }
.dq-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-4) var(--space-2); background: var(--field); border-radius: var(--radius-md); text-align: center; }
.dq-item.is-warn { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.dq-item__value { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.dq-item.is-warn .dq-item__value { color: var(--orange); }
.dq-item__label { font-size: 12px; color: var(--text-2); }

/* --- Insights -------------------------------------------------------------- */
.ins-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ins-preview__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.ins-headline { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--space-2); }
.ins-generated { font-size: 12px; margin-bottom: var(--space-5); }
.link-btn { border: none; background: none; color: var(--ui-accent); cursor: pointer; font: inherit; padding: 0; }
.ins-section { margin-bottom: var(--space-5); }
.ins-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 720px) { .ins-cards { grid-template-columns: 1fr; } }
.ins-card { background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-card); }
.ins-point { font-size: 14px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ins-evidence { font-size: 13px; color: var(--text-2); }
.ins-action { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--panel-border); }
.ins-action:last-child { border-bottom: none; }
.ins-action__num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.ins-action__body { flex: 1; }
.ins-action__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 6px; flex-wrap: wrap; font-size: 12px; }
.ins-alert { font-weight: 500; }

.ins-skeleton { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; padding: var(--space-5); text-align: center; color: var(--text-2); }
.skeleton-line { height: 12px; background: linear-gradient(90deg, var(--field), color-mix(in srgb, var(--field) 40%, var(--text-3)), var(--field)); background-size: 200% 100%; border-radius: 6px; width: 100%; animation: shimmer 1.4s var(--ease) infinite; }
.skeleton-line.short { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner { width: 28px; height: 28px; border: 3px solid var(--field); border-top-color: var(--ui-accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hist-item { display: flex; justify-content: space-between; width: 100%; border: none; background: none; padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: 13px; }
.hist-item:hover { background: var(--field); }

/* --- Sync ------------------------------------------------------------------ */
.guide { margin: var(--space-3) 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.guide li { list-style: decimal; }
.conn-status { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; margin-bottom: 4px; }
.conn-meta { font-size: 13px; margin-bottom: var(--space-3); }
.conn-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.sync-summary { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; flex-wrap: wrap; }
.export-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.export-row .input-with-btn { flex: 1; min-width: 240px; }
.pending-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: var(--space-4) 0 var(--space-2); }
.conflict-card { border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
.conflict-card__title { font-weight: 600; margin-bottom: var(--space-2); }
.conflict-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.data-table.compare td, .data-table.compare th { padding: 5px 8px; }
.data-table.compare tr.diverge td { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.removed-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--field); padding: 1px 5px; border-radius: 4px; }

.sync-line { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--panel-border); font-size: 12px; }

/* --- Settings -------------------------------------------------------------- */
.settings-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }

/* --- Avatar cropper -------------------------------------------------------- */
.crop { max-width: 340px; }
.crop__stage {
  position: relative; width: 260px; height: 260px; margin: 0 auto;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--field); touch-action: none; cursor: grab;
}
.crop__stage:active { cursor: grabbing; }
.crop__canvas { display: block; width: 260px; height: 260px; }
/* Shows what will be kept: everything outside the circle is dimmed rather than
   hidden, so it stays obvious that the photo continues past the crop. */
.crop__ring {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
  /* Not `inset`: an inset shadow fills the circle, which dimmed the part being
     kept and left the discarded edges bright — backwards. Cast outward, the
     spread paints everything around the circle instead, and the stage's own
     overflow clips it. */
  box-shadow: 0 0 0 999px color-mix(in srgb, var(--panel-solid) 70%, transparent);
}
.crop__zoom { display: block; margin-top: var(--space-4); }
.crop__zoom input { width: 100%; }
.crop__hint { margin-top: var(--space-2); text-align: center; }

/* --- Recovery -------------------------------------------------------------- */

/* Two ways back, each with the one fact that decides between them. A segmented
   control was wrong here: it reads as a setting, and this is a fork in a task. */
.choice { display: grid; gap: var(--space-2); }
.choice__opt {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 10px var(--space-3);
  background: var(--field); border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.choice__opt:hover { background: color-mix(in srgb, var(--ui-accent) 8%, var(--field)); }
.choice__opt.is-active {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--field));
}
.choice__name { font-size: 13px; font-weight: 600; }
.choice__note { font-size: 12px; color: var(--text-2); line-height: 1.35; }

/* Monospace with generous tracking: this is read off paper and typed back, and
   the grouping is the only thing keeping 28 characters legible. */
.codefield {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
/* A quiet progress line. Twenty-eight characters is long enough that people lose
   their place; showing how much is in turns "am I nearly there?" into a fact. */
.codefield__meter {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: 6px;
}
.codefield__bar {
  flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--text-3) 30%, transparent);
}
.codefield__fill {
  display: block; height: 100%; width: 0;
  background: var(--ui-accent); border-radius: 2px;
  transition: width .12s linear;
}
.codefield__count {
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.codefield__meter.is-full .codefield__count { color: var(--ui-accent); font-weight: 600; }

/* The screen after the link goes out. It replaces the form rather than sitting
   under it: leaving the fields on screen makes people wonder if it worked. */
.sent { text-align: center; padding: var(--space-2) 0; }
.sent__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent); margin-bottom: var(--space-3);
}
.sent__body {
  font-size: 13px; color: var(--text-2); line-height: 1.55;
  margin: 0 auto var(--space-4); max-width: 34ch;
}
.sent__body strong { color: var(--text); font-weight: 600; }
.sent__aside { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.sent__alt { margin-top: var(--space-3); font-size: 13px; }

/* One movement, on the step that changes: the card's content settling into
   place. Enough to say "something happened", not enough to wait for. */
@keyframes gate-settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.gate-step { animation: gate-settle .22s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .gate-step { animation: none; }
  .codefield__fill { transition: none; }
}
/* The two items here are not peers. The checkbox decides how the button about to
   be pressed behaves; the link is a way out for someone who cannot press it at
   all. Given equal weight they read as one run-on line, which is what made this
   row feel cluttered — so the link is allowed to recede until it is wanted. */
.gate__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin: var(--space-4) 0;
}
.gate__foot .link-btn {
  /* --text-2, not --text-3: the quieter grey measured 2.6:1 against the card,
     well under the 4.5:1 small text needs. Receding is worth doing only up to
     the point where it stays readable — a way out nobody can read is not one. */
  font-size: 12px; color: var(--text-2);
  transition: color .15s var(--ease);
}
.gate__foot .link-btn:hover,
.gate__foot .link-btn:focus-visible { color: var(--ui-accent); }

.gate__remember {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none;
}
.profile__recovery {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--panel-border);
}
.profile__recovery .field-hint { margin-bottom: var(--space-3); max-width: 62ch; }
.recovery__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: .08em; line-height: 1.7;
  padding: var(--space-3); border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--panel-border);
  user-select: all; word-break: break-all; margin: var(--space-3) 0;
}

/* --- Disclosure ------------------------------------------------------------ */
/* A whole panel behind one row. Built from the app's own parts — panel padding,
   the same title size, a chevron drawn the way the <select> one is — so it reads
   as part of the page rather than a widget dropped onto it. */
.disclosure {
  display: grid; width: 100%; text-align: left; cursor: pointer;
  grid-template-columns: 1fr auto; align-items: center;
  gap: 2px var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: none; border: none; border-radius: var(--radius-md);
  color: var(--text); font: inherit;
}
.disclosure:hover { background: var(--field); }
.disclosure__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.disclosure__note { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.disclosure__chevron {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  width: 8px; height: 8px; margin-right: 2px;
  border: solid var(--text-2); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.disclosure[aria-expanded="true"] .disclosure__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.disclosure:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent);
}

/* --- Privacy panel --------------------------------------------------------- */
.privacy__lead { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 var(--space-4); }
.privacy__list { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.privacy__list dt {
  font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: .01em;
  text-transform: uppercase;
}
.privacy__list dd { margin: 3px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.privacy__actions {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--panel-border);
  margin-bottom: var(--space-2);
}
.icon-btn.is-active { background: var(--field); color: var(--text); }
.triage-foot { justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }

/* --- Funnel ------------------------------------------------------------------ */
.funnel-shape { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.funnel-row { display: flex; align-items: center; gap: var(--space-4); }
.funnel-row__bar-wrap { flex: 1; display: flex; justify-content: center; }
.funnel-row__bar {
  height: 40px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease); min-width: 60px;
}
.funnel-row__count { font-size: 17px; font-weight: 600; color: var(--accent); }
.funnel-row__label { flex: 0 0 220px; font-size: 13px; color: var(--text-2); }

.funnel-outcome-split { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--panel-border); flex-wrap: wrap; }
.funnel-outcome-split__label { font-size: 12px; color: var(--text-2); }
.funnel-outcome-split__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.bottleneck-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 13px; }
.bottleneck-row.is-weakest { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.bottleneck-row__rate { display: flex; align-items: center; gap: var(--space-2); }

.funnel-stage-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.funnel-col { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-3); }
.funnel-col__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--accent); padding: 0 var(--space-1) var(--space-2); }
.funnel-col__body { display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.funnel-client { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; padding: 6px var(--space-2); border-radius: var(--radius-sm); background: var(--field); }
.funnel-client__name { flex: 1; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-client__name:hover { color: var(--ui-accent); }

.wa-link--sm { flex: 0 0 auto; padding: 4px; border-radius: 50%; }
.wa-link--sm:hover { background: color-mix(in srgb, #25D366 14%, transparent); }

@media (max-width: 860px) {
  .funnel-stage-cols { grid-template-columns: 1fr; }
  .funnel-row__label { flex-basis: 140px; font-size: 12px; }
}

/* --- Notification bell (title bar, all pages) --------------------------------- */
.bell-wrap { position: relative; display: inline-flex; }
.bell-badge {
  position: absolute; top: 1px; right: 1px; pointer-events: none;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--sidebar);
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: min(340px, calc(100vw - 24px));
  background: var(--panel-solid); border: 1px solid var(--panel-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  overflow: hidden; animation: modal-in .14s var(--ease);
}
.bell-panel__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--panel-border);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.bell-panel__head span { color: var(--text-3); }
.bell-list { max-height: 340px; overflow-y: auto; padding: var(--space-2); }
.bell-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text);
}
.bell-item:hover { background: var(--field); }
.bell-item__dot {
  flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--gray)); margin-top: 6px;
}
.bell-item__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bell-item__title { font-size: 13px; font-weight: 500; }
.bell-item__detail { font-size: 12px; color: var(--text-2); }
.bell-empty { padding: var(--space-5) var(--space-4); text-align: center; font-size: 13px; color: var(--text-2); }

/* --- Home ---------------------------------------------------------------------- */
/* The hero is the one place in the app that gets to be typographic rather than
   informational: a tight, large greeting over a wide-tracked date. The tension
   between the two — display tracking pulled in, label tracking pushed out — is
   the treatment. The uppercase date is the same eyebrow idiom the sidebar
   groups and metric labels already use, so it reads as this app's voice. */
.home-hero {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-top: var(--space-3);
}
.home-hero__greeting {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: balance;              /* keeps the two lines even instead of ragged */
  max-inline-size: min(24ch, 100%);
  margin-inline: auto;
}
.home-hero__sub {
  margin-top: var(--space-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* One orchestrated entrance, two elements, staggered. The global
   prefers-reduced-motion rule in base.css switches it off. */
@keyframes hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-hero__greeting { animation: hero-in .5s var(--ease) both; }
.home-hero__sub      { animation: hero-in .5s var(--ease) .08s both; }

.home-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); align-items: start; }
.home-col { display: flex; flex-direction: column; gap: var(--space-4); }
.home-col .panel { margin: 0; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

.home-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.home-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); font-size: 14px; color: var(--text-2); }

/* Today's meetings */
.home-meetings { display: flex; flex-direction: column; gap: var(--space-1); }
.home-meeting { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--text); }
.home-meeting:hover { background: var(--field); }
.home-meeting.is-past { opacity: .55; }
.home-meeting__time { flex: 0 0 44px; font-size: 13px; color: var(--text-2); }
.home-meeting__bar { flex: 0 0 3px; align-self: stretch; min-height: 30px; border-radius: 2px; background: var(--accent, var(--gray)); }
.home-meeting__body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-meeting__title { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.home-meeting__sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Next task */
.home-task { border-left: 3px solid var(--accent, var(--gray)); padding-left: var(--space-3); }
.home-task__title { font-size: 15px; font-weight: 500; margin-bottom: var(--space-2); }
.home-task__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.home-task__from { display: block; font-size: 12px; color: var(--text-2); margin-top: var(--space-2); }

/* Weekly goals */
.home-goal + .home-goal { margin-top: var(--space-4); }
.home-goal__head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.home-goal__count { font-size: 15px; font-weight: 600; }
.home-goal__track { height: 8px; background: var(--field); border-radius: 4px; overflow: hidden; }
.home-goal__fill { height: 100%; background: var(--accent, var(--ui-accent)); border-radius: 4px; transition: width .35s var(--ease); }
.home-goal__foot { margin-top: 5px; font-size: 12px; color: var(--text-2); }
.home-goal__remaining strong { font-size: 13px; color: var(--text); }
.home-goals__link { display: inline-block; margin-top: var(--space-4); font-size: 12px; }

/* Sales by area */
/* --- Today's routine, as a day strip ---------------------------------------
   Time-proportional, so the gaps between blocks read as gaps. The window is the
   day's own range, set by the service, not a fixed 24 hours. */
.mini-day { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-2); height: 300px; }
.mini-day__rail { position: relative; }
.mini-day__hour {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.mini-day__track { position: relative; }
.mini-day__line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--panel-border); opacity: .5; }

.mini-block {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px;
  padding: 0 8px; border: none; border-radius: 7px; cursor: pointer;
  text-align: left; overflow: hidden;
  background: color-mix(in srgb, var(--accent, var(--gray)) 20%, transparent);
  border-left: 3px solid var(--accent, var(--gray));
  color: var(--text); font-size: 12px;
  transition: background .15s var(--ease), opacity .15s var(--ease);
}
.mini-block:hover { background: color-mix(in srgb, var(--accent, var(--gray)) 32%, transparent); }
/* A block already done reads as settled; one that is past and not done is the
   only thing on this strip that should nag. */
.mini-block[aria-pressed="true"] { background: color-mix(in srgb, var(--accent, var(--gray)) 34%, transparent); }
.mini-block[data-state="past"][aria-pressed="false"] { opacity: .55; }
.mini-block[data-state="now"] { box-shadow: 0 0 0 1.5px var(--accent, var(--gray)); }
.mini-block__tick {
  width: 14px; height: 14px; border-radius: 50%; font-size: 10px; line-height: 14px; text-align: center;
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--gray)) 60%, transparent);
  color: var(--accent, var(--gray)); font-weight: 700;
}
.mini-block[aria-pressed="true"] .mini-block__tick {
  background: var(--accent, var(--gray)); border-color: var(--accent, var(--gray)); color: var(--panel-solid);
}
.mini-block__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mini-block__time { color: var(--text-2); font-size: 11px; }

/* Line plus a dot at its head, no label — the calendar convention, and it avoids
   pasting an opaque chip onto a translucent panel just to hold the word "agora". */
.mini-day__now { position: absolute; left: 0; right: 0; border-top: 1.5px solid var(--red); pointer-events: none; }
.mini-day__now span {
  position: absolute; left: -3px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}

/* --- Sales by area: donut + named rows ------------------------------------
   The ring answers "what's the mix" at a glance; the rows answer "how much
   exactly", which a ring cannot. Every slice is named and valued in the rows —
   that is not optional decoration, it is the secondary encoding the palette's
   adjacent green/pink pair requires to be legible under deuteranopia. */
.sales-split {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 1180px) { .sales-split { grid-template-columns: 1fr; justify-items: center; } }

.donut { position: relative; margin: 0; flex: 0 0 auto; width: 168px; height: 168px; }
.donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.donut__track { fill: none; stroke: var(--field); stroke-width: 15; }
.donut__arc {
  fill: none;
  stroke-width: 15;
  stroke-linecap: butt;
  transition: stroke-dasharray .85s var(--ease), opacity .18s var(--ease), stroke-width .18s var(--ease);
}
.donut__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; pointer-events: none;
}
.donut__value { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.donut__caption { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); max-width: 104px; line-height: 1.3; }

.sales-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sales-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background .15s var(--ease);
}
.sales-row__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--s); align-self: center; }
.sales-row__label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-row__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.sales-row__share { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.sales-row.is-empty .sales-row__label,
.sales-row.is-empty .sales-row__value { color: var(--text-3); font-weight: 400; }

/* Hovering either half highlights the other: the ring and the rows are one
   object shown two ways, so they should answer together. */
.sales-row.is-lit { background: var(--field); }
.donut svg:hover .donut__arc { opacity: .35; }
.donut__arc.is-lit, .donut svg:hover .donut__arc.is-lit { opacity: 1; stroke-width: 18; }

.home-sales__note { font-size: 12px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--panel-border); }
.home-sales__empty { font-size: 13px; color: var(--text-2); text-align: center; }

/* --- Pipeline board ------------------------------------------------------------ */
.pipeline-search { width: auto; min-width: 200px; }
/* Six columns don't fit a laptop at a readable width, so the board scrolls
   horizontally inside its own container — the page itself never does. */
/* Horizontal-only scrollers.
   `overflow-x: auto` alone is not horizontal-only: the spec turns the other axis
   from `visible` into `auto`, so the element becomes a scroll container in both
   directions. WebKit then latches a wheel gesture onto whichever scroll
   container is under the pointer, and this one has nothing to scroll vertically
   — so the gesture died there instead of moving the page. Chrome chains upward
   and hides the problem, which is why it only showed in the desktop app.
   `hidden` says plainly that this axis is not for scrolling, so the gesture
   passes to the page instead of stopping here. It cuts nothing: this box sizes
   to its content vertically — checked, not assumed, because `hidden` on a box
   that does overflow would hide part of the board. (`clip` would be the tidier
   word, but browsers reject it beside `overflow-x: auto`.) */
.pipeline-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--space-3); }
.pipeline-board { display: flex; gap: var(--space-3); min-width: min-content; align-items: flex-start; }

.pipe-col {
  flex: 0 0 240px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-3);
}
.pipe-col__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 6px var(--space-3); margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 13px; font-weight: 600;
}
.pipe-col__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.pipe-col__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 80px; border-radius: var(--radius-md); transition: background .15s var(--ease);
}
.pipe-col__body.drop-hover {
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--ui-accent) 40%, transparent); outline-offset: -2px;
}

.pipe-card {
  display: flex; overflow: hidden; cursor: grab;
  background: var(--panel-raised); border: 1px solid var(--panel-border);
  backdrop-filter: var(--panel-blur, none); -webkit-backdrop-filter: var(--panel-blur, none);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.pipe-card.dragging { opacity: .5; }
.pipe-card__bar { flex: 0 0 3px; background: var(--accent); }
.pipe-card__body { flex: 1; padding: var(--space-2) var(--space-3); min-width: 0; }
.pipe-card__top { display: flex; align-items: center; gap: var(--space-2); }
.pipe-card__name { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-card__wa { flex: 0 0 auto; }
.pipe-card__sub { font-size: 12px; color: var(--text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Won amount. The figure is the one thing scanned for down this column, so it
   gets the size and the tabular digits; the carta sits under it at hint weight,
   because it is what you read after you have found the row, not before. */
.pipe-card__won { margin-top: 6px; line-height: 1.15; }
.pipe-card__won-value {
  display: block; font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--green);
}
.pipe-card__won-kind { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }

.pipe-card__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 6px; }
/* Actions on the left, stage arrows on the right: reaching the person and
   moving the card are different jobs and shouldn't sit in one undifferentiated
   row of buttons. */
.pipe-card__nav { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.pipe-card__acts { display: flex; gap: 2px; margin-right: auto; }
.pipe-card__nav .icon-btn { width: 24px; height: 24px; }
.pipe-act { color: var(--text-3); }
.pipe-act:hover { color: var(--text); }
.pipe-card__acts .close-btn:hover { color: var(--green); }

/* Lead modal */
.lead-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.lead-last { font-size: 12px; margin-bottom: 4px; }
.lead-sep { border: none; border-top: 1px solid var(--panel-border); margin: var(--space-4) 0; }
.lead-foot { align-items: center; }
.lead-foot__spacer { flex: 1; }

@media (max-width: 860px) {
  .pipeline-search { width: 100%; min-width: 0; }
  .pipe-col { flex-basis: 78vw; }
  .pipe-card { cursor: default; }
}

/* --- Account: avatar, sidebar identity, sign-in screen ----------------------
   The avatar is one component at three sizes. Sizes are set in one place so the
   sidebar, the settings form and the sign-in screen can't drift apart. */
.avatar {
  --size: 34px;
  width: var(--size); height: var(--size); flex: 0 0 var(--size);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; position: relative;
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--field));
  color: var(--text); font-weight: 600; letter-spacing: .01em;
  font-size: calc(var(--size) * 0.38);
  box-shadow: inset 0 0 0 1px var(--panel-border);
  user-select: none;
}
/* The photo is rounded by its own radius rather than by `overflow: hidden` on
   the circle. Clipping at the parent also clipped the "+" badge, which sits at
   45° on the rim and so falls outside the circle by design — it came out as a
   sliver stuck inside the edge. */
.avatar img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;        /* fills the circle without stretching the photo */
  border-radius: 50%;
}
.avatar--lg { --size: 44px; }
.avatar--xl { --size: 76px; }
.avatar--button { border: none; cursor: pointer; padding: 0; }
.avatar__badge {
  position: absolute; right: -1px; bottom: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ui-accent); color: var(--ui-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; line-height: 1;
  box-shadow: 0 0 0 2px var(--panel-solid);
}

/* Identity block at the top of the sidebar. Deliberately quiet: it is a signpost
   for "this is your app", not a headline, so it sits at the same weight as a nav
   item and the photo is only a notch larger than the icons beside it. */
.sidebar__me {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: var(--space-2); row-gap: 1px;
  align-items: center;
  padding: var(--space-2); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); color: var(--text);
  transition: background .12s var(--ease);
}
.sidebar__me:hover { background: var(--field); }
.sidebar__me .avatar { grid-row: 1 / span 2; }
.sidebar__me-name {
  font-size: 13px; font-weight: 600; align-self: end;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__me-company {
  font-size: 11px; color: var(--text-2); align-self: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* With no company the name is the only line, so it centres itself. */
.sidebar__me-name:only-of-type { grid-row: 1 / span 2; align-self: center; }

/* --- Sign-in screen --------------------------------------------------------- */
.gate-body { display: block; overflow: auto; }
.gate {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.gate__card { width: min(420px, 100%); padding: var(--space-6); }
.gate__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.gate__mark { width: 44px; height: 44px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.28)); }
.gate__wordmark { font-size: 27px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.gate__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.gate__sub { font-size: 13px; color: var(--text-2); margin: 4px 0 var(--space-5); }
/* Hidden without leaving the layout.
   `hidden` (display: none) looks equivalent and is not: WebKit refuses a
   programmatic .click() on a file input that isn't laid out, so in the native
   app the Finder panel never opened while it worked fine in Chrome. Kept at one
   pixel, transparent and out of the tab order instead. */
.file-hidden {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  border: 0; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%);
}

/* Photo on the left, its label beside it. `align-items: center` lines the text
   block's middle up with the circle's, which is what makes the pair read as one
   unit instead of two things that happen to be adjacent. */
.gate__avatar-row {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.gate__avatar-help { min-width: 0; display: grid; gap: 2px; }
.gate__avatar-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
/* Held to the space left of the circle, so the sentence wraps on its own terms
   rather than running out to the card's edge and back. */
.gate__avatar-help .field-hint { margin: 0; line-height: 1.4; max-width: 26ch; }
.gate__avatar-help .link-btn { justify-self: start; margin-top: 2px; }
/* The empty state's own affordance, dead centre by construction. */
.avatar__plus {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ui-accent);
}
/* The empty state's own affordance, dead centre by construction. */
.avatar__plus {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ui-accent);
}
.gate__error {
  font-size: 13px; color: var(--red); margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.gate__switch { margin-top: var(--space-4); text-align: center; font-size: 13px; color: var(--text-2); }
.gate__switch .link-btn { font-weight: 600; }
@media (max-width: 480px) { .gate__card { padding: var(--space-5); } }

/* --- Account block in Ajustes ----------------------------------------------- */
.profile { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.profile__photo { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.profile__fields { min-width: 0; }
.profile__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 720px) { .profile { grid-template-columns: 1fr; justify-items: center; } }

/* ===========================================================================
   Glass, but only where it stays bounded
   ---------------------------------------------------------------------------
   backdrop-filter costs one composited blur per element, and on a phone the GPU
   pays it again on every scrolled frame. Panels are a handful per screen and
   keep the effect. Cards are one per lead and one per task — twenty-four leads
   is twenty-four blurs — so on a touch screen they become a plain opaque
   surface. The hierarchy still reads: the raised thing is the solid one.

   Last in the file on purpose. The first attempt sat next to the task styles
   and lost to .pipe-card, which is declared six hundred lines further down at
   the same specificity — so tasks were fixed, leads silently were not.
   =========================================================================== */
@media (pointer: coarse) {
  :is(.task-card, .pipe-card) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel-solid);
  }
}

/* --- The field a form is waiting on --------------------------------------- *
   A message naming the field is not enough on a phone, where the field can be
   a screen away from the button that complained. This marks it so the eye
   lands on it after the scroll, and clears itself the moment it is filled. */
.is-missing {
  box-shadow: 0 0 0 2px var(--red), 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent);
  border-color: var(--red);
}