/* The targets screens' own styles: Targets (overview, history, suggestions), the target editor,
   Fill in targets, and the challenges with their sheets. */
.targets > .segmented { margin-bottom: 0; }
.targets > .segmented button { min-height: 32px; font-size: 14px; }

/* iOS 26's bordered button: a grey capsule with the tint's text (Undo, Decline, Share update). */
.btn.bordered.grey { background: var(--fill); color: var(--aqua); }
.btn.small { min-height: 34px; font-size: 16px; padding: 0 16px; }
.italic { font-style: italic; }
.card.tappable:active { opacity: 0.85; }

/* A menu picker: the choice and ⌃⌄, with the native select laid over it for the tap. */
.menu-picker, .inline-picker, .add-condition { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.menu-picker { font-size: 17px; padding: 4px 0; align-self: flex-start; }
.menu-picker .updown, .inline-picker .updown { width: 15px; height: 15px; flex: none; }
.inline-picker { color: var(--secondary); }
.menu-picker select, .inline-picker select, .add-condition select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 16px; }
.add-condition { width: 100%; }

/* The overview and history. */
.targets .trailing-metric .metric { align-items: flex-end; text-align: right; }
.history-list { gap: 0; padding-top: var(--s); padding-bottom: var(--s); }
.history-row { display: flex; align-items: center; gap: var(--s); width: 100%; min-height: 44px; padding: 10px 0; text-align: left;
  border-bottom: 0.5px solid var(--separator); }
.history-row .target-mark svg { width: 17px; height: 17px; }
.history-row .target-mark { width: 17px !important; height: 17px !important; }

/* Forms in sheets: the editor, Fill in targets, the composer. */
.sheet .list { padding-top: var(--s); }
.sheet .list > .list-section > .segmented { margin: 0 2px; }
.target-editor .list-section:first-child { margin-top: var(--s); }
.stepper-line { width: 100%; gap: var(--m); }
.component-row { display: flex; flex-direction: column; gap: var(--s); width: 100%; padding: 4px 0; }
.remove-condition { color: var(--attention); width: 24px; height: 24px; display: grid; place-items: center; }
.remove-condition svg { width: 20px; height: 20px; }
.date-field, .text-field { font: inherit; font-size: 17px; color: var(--label); background: var(--fill); border: 0; border-radius: 8px;
  padding: 6px 10px; min-height: 34px; }
.text-field { background: none; text-align: right; color: var(--secondary); padding-right: 0; min-width: 0; width: 45%; }
.text-field:focus { outline: none; color: var(--label); }
.note-field { text-align: left; width: 100%; padding-left: 0; }
.fill-in .list-header.title, .composer .list-header.title { text-transform: none; font-size: 17px; font-weight: 600; color: var(--secondary); }
.fill-in .list-section:has(.list-header.title) { margin-top: var(--l); }
.block-row { gap: 4px; padding: 4px 0; }
.sheet .demo-note { margin: var(--l) var(--s) 0; }
.choice-check svg { width: 18px; height: 18px; }
.share-card { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.share-card svg { width: 16px; height: 16px; }
.dialog-message { text-align: center; padding: var(--s) var(--l); }
.dialog-button { justify-content: center; font-weight: 600; }

/* Challenges. */
.new-challenge { width: 100%; min-height: 56px; font-size: 18px; font-weight: 500; }
.new-challenge svg { width: 24px; height: 24px; }
.challenge-list { gap: 0; }
.challenge-list > .eyebrow { margin-bottom: var(--m); }
.challenge-list .divider { border: 0; border-top: 0.5px solid var(--separator); margin: var(--m) 0; }
.inbox-row { gap: var(--s); }
.inbox-row .row { margin-top: 2px; }
.challenge-row, .attempt-row { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; }
.challenge-row .headline { flex: 1; min-width: 0; }
.challenge-status { flex: none; padding-top: 2px; }
.attempt-row .row { gap: var(--s); }
.attempt-row .outcome-label { font-size: 15px; }
.skip-row { text-align: left; padding: 4px 0; }
.detail-action { display: flex; justify-content: center; }
.detail-action .btn.bordered { min-height: 44px; font-size: 17px; padding: 0 20px; }
.destructive { color: #ff3b30 !important; font-size: 17px; }
:root[data-theme="dark"] .destructive { color: #ff453a !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .destructive { color: #ff453a !important; } }
.challenge-bar, .period-bar { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--aqua) 15%, transparent); }
.period-bar { height: 14px; }
.challenge-bar .fill, .period-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--aqua); }
.period-bar .mark { position: absolute; top: 0; bottom: 0; width: 2px; }
.period-bar .mark.expected { background: var(--label); }
.period-bar .mark.baseline { background: var(--secondary); }

/* Inside a card the period pills fit its width, as the app's PeriodPicker does. */
.targets .card .period-pills { margin: 0; padding: 0; gap: 6px; justify-content: space-between; overflow: visible; }
.targets .card .period-pills button { min-width: 0; flex: 1; max-width: 50px; padding: 0 6px; min-height: 34px; font-size: 16px; }
.targets > .segmented { margin-top: -12px; }
.attempt-row .row > span:first-child { white-space: nowrap; }
.attempt-row .row > .spacer { min-width: 4px; }
.attempt-row .row > .digits { text-align: right; flex: 0 1 auto; }
.attempt-row .outcome-label, .attempt-row .status { white-space: nowrap; flex: none; }
.sheet .navbtn.pill { white-space: nowrap; }
.dialog-button { justify-content: center !important; text-align: center; }