/* ===================================================================
   iCloud Tools - storage group
   (storage calculator, photos storage calculator, backup time
   calculator, cleanup planner)

   Builds on icloud-tools.css and backlink-maker.css. Scoped under .st.
   Motion is decoration only and is switched off by the suite's
   prefers-reduced-motion rule.
   =================================================================== */

.st { --st-gap: 20px; }
.st * { box-sizing: border-box; }

/* ---------- Layout ---------- */
.st-layout { display: grid; gap: var(--st-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) {
    .st-layout.is-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .st-layout.is-split .st-results { position: sticky; top: 16px; }
}
.st-inputs { display: grid; gap: 14px; min-width: 0; }
.st-block { background: var(--bm-surface); }
.st-block legend { display: inline-flex; align-items: center; gap: 8px; }
.st-no {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
    background: var(--bm-accent-soft); color: var(--bm-accent-strong); font-size: .8rem; font-weight: 800;
}
.st-block .ic-form { margin-top: 8px; }
.st-sub { margin: 4px 0 0; font-size: .84rem; color: var(--bm-ink-3); }
.st-field-wide { grid-column: 1 / -1; }

/* A pair of fields that belong to one thing (count + size each). */
.st-pair { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); padding: 12px; border: 1px solid var(--bm-line-2); border-radius: 12px; background: var(--bm-bg); }
.st-pair + .st-pair { margin-top: 10px; }
.st-pair-title { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: var(--bm-ink); }
.st-pair-title i { color: var(--bm-accent-strong); width: 18px; text-align: center; }
.st .ic-field .ic-help { overflow-wrap: anywhere; }
.st .ic-inputgroup > select { min-width: 72px; }
.st .ic-error-text { font-weight: 700; }

/* Plan picker */
.st-plans { display: flex; width: 100%; }
.st-plans label { flex: 1 1 auto; }
.st-plans span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; text-align: center; line-height: 1.1; }
.st-plans small { font-size: .7rem; font-weight: 700; color: var(--bm-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.st-source { margin: 8px 0 0; font-size: .8rem; color: var(--bm-ink-3); }
.st-official { font-weight: 700; color: var(--bm-accent-strong); }
.st-official::after { content: " \2197"; }

/* ---------- Results panel ---------- */
.st-results {
    min-width: 0; padding: 18px; border-radius: var(--bm-r-lg); border: 1px solid var(--bm-line);
    background: linear-gradient(180deg, var(--bm-accent-soft), var(--bm-surface) 180px);
    display: grid; gap: 14px;
}
.st-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.st-results-head h3 { margin: 0; font-size: 1.12rem; }
.st-summary { margin: 0; font-size: .95rem; color: var(--bm-ink-2); line-height: 1.5; }
.st-body[hidden] { display: none !important; }
.st-stats { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.st-stats .ic-stat dd { font-size: 1.2rem; }
.st-stats .ic-stat[hidden] { display: none; }
.st-tick { animation: st-tick .5s var(--bm-ease); }
@keyframes st-tick { from { color: var(--bm-accent-strong); transform: translateY(-2px); } to { transform: none; } }

/* Hero figure: ring + headline */
.st-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.st-hero-text { flex: 1 1 180px; min-width: 0; }
.st-hero-label { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bm-ink-3); }
.st-hero-value { margin: 2px 0 0; font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 900; color: var(--bm-ink); line-height: 1.1; overflow-wrap: anywhere; }
.st-hero-sub { margin: 4px 0 0; font-size: .9rem; color: var(--bm-ink-2); overflow-wrap: anywhere; }

@property --st-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.st-ring {
    --st-p: 0; --st-c: var(--ic-ok);
    position: relative; flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%;
    background: conic-gradient(var(--st-c) calc(var(--st-p) * 1%), var(--bm-line-2) 0);
    transition: --st-p .7s var(--bm-ease);
    display: grid; place-items: center;
}
.st-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--bm-surface); box-shadow: inset 0 1px 4px rgba(16, 22, 43, .08); }
.st-ring-text { position: relative; text-align: center; line-height: 1.1; }
.st-ring-text strong { display: block; font-size: 1.5rem; font-weight: 900; color: var(--bm-ink); }
.st-ring-text span { font-size: .75rem; color: var(--bm-ink-3); font-weight: 700; }
.st-ring.is-warn { --st-c: #d98a00; }
.st-ring.is-bad { --st-c: var(--ic-bad); }

/* Stacked capacity bar */
.st-stack-wrap { display: grid; gap: 6px; }
.st-stack { position: relative; display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: var(--bm-line-2); }
.st-stack-seg { height: 100%; transition: width .45s var(--bm-ease); min-width: 0; }
.st-stack-seg + .st-stack-seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7); }
.st-stack-buffer { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--bm-ink); transition: left .45s var(--bm-ease); }
.st-stack-over { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, var(--ic-bad) 0 6px, #f28b8b 6px 12px); transition: width .45s var(--bm-ease); }
.st-stack-scale { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--bm-ink-3); }

/* Toolbar */
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-actions .bm-btn { flex: 1 1 auto; }
@media (max-width: 480px) { .st-actions .bm-btn { flex: 1 1 100%; } }

.st-details { border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
.st-details summary { cursor: pointer; padding: 12px 14px; font-weight: 800; color: var(--bm-ink); min-height: 44px; }
.st-details > div { padding: 0 14px 12px; font-size: .9rem; color: var(--bm-ink-2); }
.st-details ul { margin: 0; padding-left: 18px; }
.st-details li { margin: 4px 0; }

.st-assumptions { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--bm-ink-2); }
.st-assumptions li { margin: 3px 0; overflow-wrap: anywhere; }
.st-h4 { margin: 0 0 6px; font-size: .98rem; color: var(--bm-ink); }

/* Quick size chips */
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-chip {
    min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bm-line); background: var(--bm-surface);
    font: inherit; font-size: .82rem; font-weight: 700; color: var(--bm-ink-2); cursor: pointer;
    transition: border-color .16s, color .16s, transform .16s var(--bm-ease);
}
.st-chip:hover { border-color: var(--bm-accent); color: var(--bm-accent-strong); transform: translateY(-1px); }

/* Speed comparison table */
.st-compare .ic-table td, .st-compare .ic-table th { max-width: none; }
.st-compare tr.is-you { background: var(--bm-accent-soft); font-weight: 800; }
.st-mini { display: inline-block; height: 8px; border-radius: 999px; background: var(--bm-accent); vertical-align: middle; min-width: 3px; max-width: 100%; }

/* ---------- Cleanup planner ---------- */
.st-comfort { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); margin-top: 8px; }
.st-comfort .ic-check { padding: 10px 12px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); min-height: 44px; align-items: center; cursor: pointer; }
.st-comfort .ic-check input { margin-top: 0; }
.st-comfort .ic-check:has(input:checked) { border-color: var(--bm-accent); background: var(--bm-accent-soft); }
.st-comfort .ic-check small { display: block; font-size: .76rem; color: var(--bm-ink-3); }

.st-meter { height: 10px; border-radius: 999px; background: var(--bm-line-2); overflow: hidden; }
.st-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ic-ok), color-mix(in srgb, var(--ic-ok) 60%, var(--bm-accent))); transition: width .4s var(--bm-ease); }
.st-progress-text { margin: 0; font-size: .9rem; font-weight: 700; color: var(--bm-ink-2); }

.st-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: st-step; }
.st-step {
    counter-increment: st-step; position: relative; display: grid; gap: 10px; padding: 14px 14px 14px 56px;
    border: 1px solid var(--bm-line); border-radius: 16px; background: var(--bm-surface); min-width: 0;
    transition: border-color .2s, background-color .2s, opacity .2s;
    animation: st-in .35s var(--bm-ease) both;
}
.st-step::before {
    content: counter(st-step); position: absolute; left: 14px; top: 14px; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 10px; background: var(--bm-accent-soft); color: var(--bm-accent-strong); font-weight: 900;
}
.st-step.is-high { border-left: 4px solid var(--ic-bad); }
.st-step.is-low { border-left: 4px solid var(--ic-ok); }
.st-step.is-done { background: var(--bm-bg); }
.st-step.is-done::before { content: "\2713"; background: var(--ic-ok-soft); color: var(--ic-ok); }
.st-step.is-done .st-step-title { text-decoration: line-through; color: var(--bm-ink-3); }
.st-step-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; justify-content: space-between; }
.st-step-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; color: var(--bm-ink); cursor: pointer; min-width: 0; flex: 1 1 260px; }
.st-step-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--ic-ok); }
.st-step-title { overflow-wrap: anywhere; }
.st-step-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.st-step p { margin: 0; font-size: .9rem; color: var(--bm-ink-2); overflow-wrap: anywhere; }
.st-step .st-where { font-size: .84rem; color: var(--bm-ink-3); }
.st-step .ic-notice { font-size: .88rem; }
.st-recover { font-size: 1.05rem; font-weight: 900; color: var(--bm-ink); white-space: nowrap; }
@media (max-width: 480px) { .st-step { padding-left: 14px; padding-top: 52px; } }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Touch ---------- */
@media (pointer: coarse) {
    .st .ic-field input, .st .ic-field select, .st .st-chip, .st summary { min-height: 44px; }
    .st .st-step-check input { width: 24px; height: 24px; }
}

/* ---------- Print ---------- */
.st-print-only { display: none; }
@media print {
    html.ic-printing body * { visibility: hidden !important; }
    html.ic-printing .ic-print-area, html.ic-printing .ic-print-area * { visibility: visible !important; }
    html.ic-printing .ic-print-area { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; border: 0 !important; }
    html.ic-printing .ic-print-area .st-noprint, html.ic-printing .ic-print-area .st-actions { display: none !important; }
    .st-print-only { display: block !important; }
    .st-layout.is-split { grid-template-columns: 1fr; }
    .st-results { position: static !important; background: #fff !important; }
    .st-step, .st-stat, .ic-stat { break-inside: avoid; }
    .st-ring, .st-stack-seg, .st-meter span, .ic-bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .st-step { animation: none; }
}