/*
 * Propshaft serves every file in app/assets/stylesheets in alphabetical order,
 * and this one sorts first, so it owns the shared design system: tokens, base
 * typography and the handful of components every screen is built from
 * (page shell, cards, buttons, form fields, chips, empty states).
 *
 * Page stylesheets should only lay things out and reach for these tokens; if a
 * page needs a new colour, add a token here rather than a hex value there.
 */

:root {
   --ink: #0a1020;
   --ink-soft: #1e2a3f;
   --body: #55637a;
   --muted: #64748b;
   --faint: #94a3b8;
   --line: #e7ecf3;
   --line-strong: #d5dde8;
   --line-soft: #f0f4f9;
   --surface: #ffffff;
   --surface-soft: #f7f9fc;
   --surface-sunken: #f1f5f9;

   --teal: #0fb5a6;
   --teal-deep: #0a8f84;
   --teal-ink: #09746e;
   --teal-wash: #e7f8f5;
   --indigo: #5b6cf0;
   --indigo-wash: #eef0fe;
   --violet: #8b5cf6;
   --coral: #fb7185;
   --amber: #d97706;
   --amber-wash: #fef3c7;
   --green: #16a34a;
   --green-wash: #dcfce7;
   --danger: #dc2626;
   --danger-ink: #b91c1c;
   --danger-wash: #fee2e2;

   --gradient-brand: linear-gradient(120deg, var(--teal-ink) 0%, var(--teal) 42%, #4f5fe6 100%);
   --gradient-bar: linear-gradient(90deg, var(--teal) 0%, var(--indigo) 100%);

   --shadow-sm: 0 1px 2px rgba(10, 16, 32, 0.04), 0 1px 3px rgba(10, 16, 32, 0.06);
   --shadow-md: 0 6px 16px -4px rgba(10, 16, 32, 0.06), 0 18px 36px -12px rgba(10, 16, 32, 0.10);
   --shadow-lg: 0 28px 70px -24px rgba(10, 16, 32, 0.26);
   --ring: 0 0 0 4px rgba(15, 181, 166, 0.18);

   --radius-xs: 8px;
   --radius-sm: 12px;
   --radius-md: 18px;
   --radius-lg: 26px;
   --radius-xl: 34px;

   --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

   --page-width: 1100px;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

html {
   /* Keeps anchored headings clear of the sticky navigation. */
   scroll-padding-top: 92px;
}

/* Smooth anchor jumps only on the marketing page: the app screens are dense
   enough that animated scrolling only gets in the way. */
html:has(.landing) {
   scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   font-family: var(--font-body);
   color: var(--ink);
   background: var(--surface-soft);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* A long word or link someone typed breaks onto the next line instead of
      pushing the page wider than a phone's screen. */
   overflow-wrap: break-word;
   /* viewport-fit=cover lets the page run under a phone's notch in
      landscape, so keep the content clear of it. */
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
}

body > main,
body > .page {
   flex: 1 0 auto;
}

h1, h2, h3, h4 {
   font-family: var(--font-display);
   color: var(--ink);
   letter-spacing: -0.02em;
}

input, select, textarea, button {
   font: inherit;
   color: inherit;
}

a {
   color: var(--teal-ink);
}

:focus-visible {
   outline: 2px solid var(--teal);
   outline-offset: 2px;
}

/* ---------- Page shell ----------------------------------------------------- */

.page {
   width: 100%;
   max-width: var(--page-width);
   margin: 0 auto;
   padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 24px) 48px;
}

.page-narrow {
   max-width: 720px;
}

.page-form {
   max-width: 640px;
}

.page-header {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px 24px;
   margin-bottom: 28px;
}

.page-header h1 {
   font-size: clamp(1.7rem, 3.4vw, 2.2rem);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.03em;
}

.page-header p,
.page-subtitle {
   margin-top: 6px;
   color: var(--body);
   font-size: 1rem;
   line-height: 1.5;
}

.page-eyebrow {
   display: block;
   margin-bottom: 6px;
   color: var(--teal-ink);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.page-header .page-eyebrow {
   margin-top: 0;
   color: var(--teal-ink);
   font-size: 0.78rem;
}

.page-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
}

.page-back {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 16px;
   color: var(--muted);
   font-size: 0.9rem;
   font-weight: 500;
   text-decoration: none;
}

.page-back:hover {
   color: var(--ink);
}

.section-title {
   font-size: 1.15rem;
   font-weight: 700;
   margin-bottom: 14px;
}

/* ---------- Cards ----------------------------------------------------------- */

.card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   padding: clamp(18px, 3vw, 28px);
}

.card-header {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 8px 16px;
   margin-bottom: 18px;
}

.card-header > div {
   flex: 1 1 220px;
   min-width: 0;
}

.card-header h2,
.card-header h3 {
   font-size: 1.05rem;
   font-weight: 700;
}

.card-header p {
   color: var(--muted);
   font-size: 0.88rem;
   margin-top: 2px;
}

.card-link {
   color: var(--teal-ink);
   font-size: 0.88rem;
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
}

.card-link:hover {
   text-decoration: underline;
}

/* ---------- Buttons ----------------------------------------------------------
   Each variant stands alone (views use `btn-primary` without `btn`), and the
   look matches the landing page buttons so the two halves of the site agree. */

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-small {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 10px 18px;
   border: 1px solid transparent;
   border-radius: 999px;
   font-family: var(--font-body);
   font-size: 0.92rem;
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -0.005em;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
      background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn,
.btn-primary {
   color: #ffffff;
   background: var(--gradient-brand);
   box-shadow: 0 8px 18px -10px rgba(15, 181, 166, 0.9), 0 1px 3px rgba(10, 16, 32, 0.10);
}

.btn:hover,
.btn-primary:hover {
   color: #ffffff;
   transform: translateY(-1px);
   box-shadow: 0 12px 24px -10px rgba(15, 181, 166, 1), 0 2px 6px rgba(10, 16, 32, 0.12);
}

.btn-secondary,
.btn-small:not(.btn-primary, .btn-ghost, .btn-danger) {
   color: var(--ink-soft);
   background: var(--surface);
   border-color: var(--line-strong);
   box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-small:not(.btn-primary, .btn-ghost, .btn-danger):hover {
   color: var(--ink);
   border-color: #b9c4d3;
   background: var(--surface);
}

.btn-ghost {
   color: var(--body);
   background: transparent;
}

.btn-ghost:hover {
   color: var(--ink);
   background: var(--surface-sunken);
}

.btn-danger {
   color: var(--danger-ink);
   background: var(--surface);
   border-color: #f5c2c2;
}

.btn-danger:hover {
   color: #ffffff;
   background: var(--danger);
   border-color: var(--danger);
}

.btn-small,
.btn-primary.btn-small,
.btn-secondary.btn-small,
.btn-danger.btn-small,
.btn-ghost.btn-small {
   padding: 6px 12px;
   font-size: 0.8rem;
}

.btn-block {
   width: 100%;
}

.btn-primary:disabled,
.btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

/* button_to wraps its button in a form; keep it inline with siblings. */
form.button_to {
   display: inline-flex;
   margin: 0;
}

/* Square icon buttons for compact rows (reorder, unschedule, close). */
.icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   padding: 0;
   border: 1px solid transparent;
   border-radius: var(--radius-xs);
   background: transparent;
   color: var(--muted);
   font-size: 0.85rem;
   line-height: 1;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.icon-btn:hover {
   color: var(--ink);
   background: var(--surface-sunken);
}

.icon-btn.is-danger:hover {
   color: var(--danger);
   background: var(--danger-wash);
}

/* ---------- Forms ------------------------------------------------------------ */

.form-card {
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.form-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
}

.form-label,
.form-card .form-group > label {
   font-size: 0.88rem;
   font-weight: 600;
   color: var(--ink-soft);
}

.form-hint {
   color: var(--muted);
   font-size: 0.82rem;
   line-height: 1.45;
}

.optional {
   color: var(--faint);
   font-weight: 400;
}

.form-input,
.form-card .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-card .form-group select,
.form-card .form-group textarea {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   background: var(--surface);
   font-size: 0.97rem;
   line-height: 1.4;
   color: var(--ink);
   transition: border-color 0.15s, box-shadow 0.15s;
}

textarea.form-input,
.form-card .form-group textarea {
   resize: vertical;
   min-height: 96px;
}

.form-input:hover,
.form-card .form-group input:hover,
.form-card .form-group select:hover,
.form-card .form-group textarea:hover {
   border-color: #b9c4d3;
}

.form-input:focus,
.form-card .form-group input:focus,
.form-card .form-group select:focus,
.form-card .form-group textarea:focus {
   outline: none;
   border-color: var(--teal);
   box-shadow: var(--ring);
}

.form-input::placeholder,
.form-card textarea::placeholder,
.form-card input::placeholder {
   color: var(--faint);
}

.checkbox-label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 0.93rem;
   color: var(--ink-soft);
   cursor: pointer;
}

input[type="checkbox"] {
   accent-color: var(--teal-deep);
}

.form-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   padding-top: 4px;
}

.form-errors,
.alert-banner {
   padding: 14px 16px;
   border: 1px solid #f5c2c2;
   border-radius: var(--radius-sm);
   background: #fff5f5;
   color: var(--danger-ink);
   font-size: 0.9rem;
}

.form-errors h2,
.form-errors h3,
.alert-banner h2 {
   font-family: var(--font-body);
   font-size: 0.92rem;
   font-weight: 600;
   color: inherit;
   letter-spacing: 0;
   margin-bottom: 6px;
}

.form-errors ul,
.alert-banner ul {
   padding-left: 18px;
}

/* ---------- Segmented choices & chips ----------------------------------------
   Radio/checkbox groups rendered as buttons. The real input stays in the
   label, visually hidden but focusable, so keyboard and forms work unchanged. */

.choice-input {
   position: absolute;
   opacity: 0;
   width: 1px;
   height: 1px;
   pointer-events: none;
}

.segmented {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   gap: 4px;
   padding: 4px;
   border-radius: var(--radius-sm);
   background: var(--surface-sunken);
}

.segmented-option {
   position: relative;
   cursor: pointer;
}

.segmented-option span {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 36px;
   padding: 6px 8px;
   border-radius: 9px;
   color: var(--body);
   font-size: 0.86rem;
   font-weight: 600;
   text-align: center;
   transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.segmented-option:hover span {
   color: var(--ink);
}

.segmented-option input:checked + span {
   background: var(--surface);
   color: var(--teal-ink);
   box-shadow: var(--shadow-sm);
}

.segmented-option input:focus-visible + span {
   box-shadow: var(--ring);
}

.chip,
.tag-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 10px;
   border-radius: 999px;
   background: var(--surface-sunken);
   color: var(--body);
   font-size: 0.78rem;
   font-weight: 500;
   line-height: 1.5;
   white-space: nowrap;
}

.chip-teal {
   background: var(--teal-wash);
   color: var(--teal-ink);
}

/* ---------- Status badges -------------------------------------------------- */

.objective-status {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: capitalize;
   white-space: nowrap;
}

.objective-status::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: currentColor;
}

.status-not_started { background: var(--surface-sunken); color: var(--muted); }
.status-in_progress { background: var(--amber-wash); color: #b45309; }
.status-completed { background: var(--green-wash); color: var(--green); }
.status-overdue { background: var(--danger-wash); color: var(--danger-ink); }

/* ---------- Progress bars ---------------------------------------------------- */

.progress-bar {
   flex: 1;
   height: 8px;
   background: var(--surface-sunken);
   border-radius: 999px;
   overflow: hidden;
}

.progress-fill {
   height: 100%;
   background: var(--gradient-bar);
   border-radius: inherit;
   transition: width 0.4s var(--ease-out);
}

/* ---------- Stat tiles ------------------------------------------------------ */

.stat-tile {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 14px 16px;
   border-radius: var(--radius-sm);
   background: var(--surface-soft);
   border: 1px solid var(--line-soft);
}

.stat-tile .stat-value {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.03em;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
}

.stat-tile .stat-label {
   color: var(--muted);
   font-size: 0.8rem;
   font-weight: 500;
}

/* ---------- Empty states ----------------------------------------------------- */

.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 40px 24px;
   border: 1px dashed var(--line-strong);
   border-radius: var(--radius-md);
   background: var(--surface);
   color: var(--muted);
   text-align: center;
}

.empty-state p {
   max-width: 46ch;
   font-size: 0.97rem;
   line-height: 1.55;
}

/* ---------- Detail metadata --------------------------------------------------- */

.meta-list {
   display: flex;
   flex-wrap: wrap;
   gap: 18px 32px;
}

.meta-item {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.meta-label {
   color: var(--faint);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.meta-value {
   color: var(--ink);
   font-size: 0.97rem;
   font-weight: 600;
}

/* ---------- Pager (month / day navigation) ---------------------------------- */

.pager {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--surface);
   box-shadow: var(--shadow-sm);
}

.month-nav-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   color: var(--ink-soft);
   font-size: 1.2rem;
   line-height: 1;
   text-decoration: none;
   transition: background-color 0.15s;
}

.month-nav-btn:hover {
   background: var(--surface-sunken);
}

.month-nav-btn.disabled {
   opacity: 0.3;
   cursor: default;
}

.month-nav-btn.disabled:hover {
   background: transparent;
}

.pager-label {
   min-width: 150px;
   padding: 0 6px;
   font-family: var(--font-display);
   font-size: 0.97rem;
   font-weight: 700;
   text-align: center;
   color: var(--ink);
}

.month-now-link {
   color: var(--teal-ink);
   font-size: 0.85rem;
   font-weight: 600;
   text-decoration: none;
}

.month-now-link:hover {
   text-decoration: underline;
}

/* ---------- Shared task checkbox --------------------------------------------- */

.task-checkbox {
   width: 18px;
   height: 18px;
   flex: none;
   cursor: pointer;
   accent-color: var(--teal-deep);
}

/* ---------- Footer -------------------------------------------------------------- */

.site-footer {
   flex-shrink: 0;
   margin-top: 32px;
   padding: 28px clamp(16px, 4vw, 40px) 36px;
   border-top: 1px solid var(--line);
   background: var(--surface);
}

.site-footer-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px 24px;
   max-width: var(--page-width);
   margin: 0 auto;
}

.site-footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 20px;
}

.site-footer-links a {
   color: var(--muted);
   font-size: 0.85rem;
   text-decoration: none;
}

.site-footer-links a:hover {
   color: var(--ink);
}

.site-footer-languages a.is-active {
   color: var(--ink);
   font-weight: 600;
}

.site-footer-meta {
   margin: 0;
   font-size: 0.8rem;
   color: var(--faint);
}

/* Phones: page headers shrink to a title with its main action beside it, so
   the content starts in the first screen. */
@media (max-width: 640px) {
   .page-header {
      flex-wrap: nowrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
   }

   .page-header > div:first-child {
      min-width: 0;
   }

   .page-header h1 {
      font-size: 1.55rem;
   }

   /* Only on section pages with an action; forms and legal pages keep theirs. */
   .page-header:has(.page-actions) > div:first-child > p:not(.page-eyebrow) {
      display: none;
   }

   .page-actions {
      flex: none;
      flex-wrap: nowrap;
   }

   .page-actions .btn-primary,
   .page-actions .btn-secondary {
      padding: 10px 16px;
      font-size: 0.9rem;
      white-space: nowrap;
   }

   /* iOS zooms into any field with text under 16px when it's focused. */
   input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
   select,
   textarea {
      font-size: 16px;
   }
}