/* Widget internals: timer, bill split, comparison, file results, and their shared controls. */

/* Shared controls */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--line); }
.segmented--wrap { flex-wrap: wrap; }
.segmented__btn {
  border: 0; background: transparent; padding: 0.35rem 0.7rem; border-radius: 9px;
  font-size: 0.8125rem; color: var(--text-muted);
  transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease, transform var(--dur-micro) var(--ease-out);
}
.segmented__btn:hover { color: var(--text); }
.segmented__btn:active { transform: scale(0.95); }
.segmented__btn[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.75rem; color: var(--text-faint); }
.field--wide { grid-column: 1 / -1; align-items: flex-start; }
.field__prefix { display: flex; align-items: center; gap: 0.2rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 0.7rem; color: var(--text-muted); font-size: 0.9375rem; background: var(--card); height: 2.4rem; }
.field__prefix:focus-within { border-color: var(--accent); }
.field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; height: 2.4rem; background: var(--card); }
.stepper__btn { width: 2.4rem; height: 100%; border: 0; background: none; font-size: 1.1rem; color: var(--text-muted); }
.stepper__btn:hover { color: var(--text); }
.split__count { font-size: 0.9375rem; color: var(--text); font-variant-numeric: tabular-nums; }
.split__label { font-size: 0.75rem; color: var(--text-faint); }

/* Timer */
.timer { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.timer__dial { position: relative; width: 132px; aspect-ratio: 1; flex: none; }
.timer__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer__track { stroke: var(--line); stroke-width: 6; }
.timer__progress { stroke: var(--accent); stroke-width: 6; transition: stroke-dashoffset 300ms linear; }
.timer__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer__readout { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.timer__status { font-size: 0.7rem; color: var(--text-faint); }
.timer__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Bill split */
.split { display: grid; gap: 1rem; }
.split__hero { display: flex; flex-direction: column; gap: 0.1rem; }
.split__result { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.split__breakdown { font-size: 0.8125rem; color: var(--text-muted); }
.split__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Comparison */
.compare { display: grid; gap: 0.9rem; }
.compare__prefs { display: flex; flex-direction: column; gap: 0.4rem; }
.compare__list { display: grid; gap: 0.4rem; }
.compare__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; align-items: center;
  padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}
.compare__name { font-weight: 520; font-size: 0.9375rem; }
.compare__specs { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; grid-column: 1; }
.compare__meter { grid-column: 2; grid-row: 1 / span 2; width: 4.5rem; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.compare__fill { display: block; height: 100%; background: var(--text-faint); transform-origin: left; transition: transform 500ms var(--ease-out), background-color var(--dur) ease; }
.compare__row.is-pick { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 70%, var(--card)); }
.compare__row.is-pick .compare__fill { background: var(--accent); }
.compare__row.is-pick .compare__name::after { content: "Clark's pick"; margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; }
.compare__reason { font-size: 0.875rem; color: var(--text-muted); }

/* File results */
.files { display: grid; gap: 0.3rem; margin: -0.35rem; }
.files__row {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left;
  padding: 0.55rem 0.35rem; border: 0; border-radius: 10px; background: transparent;
  transition: background-color var(--dur-micro) ease;
}
.files__row:hover { background: var(--code-bg); }
.files__icon { width: 2.1rem; height: 2.5rem; flex: none; display: grid; place-items: end center; padding-bottom: 0.3rem; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--card); font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-faint); }
.files__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.files__name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files__where { font-size: 0.75rem; color: var(--text-faint); }
.files__tag { font-size: 0.6875rem; font-weight: 500; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; }
.files__excerpt { margin: 0 0.35rem 0.4rem 3.2rem; padding: 0.55rem 0.7rem; border-left: 2px solid var(--accent); background: var(--code-bg); border-radius: 0 8px 8px 0; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; color: var(--text-muted); }