/* ===== E1: overview, apps, protection ===== */
/* Owned by OverviewTab.js / AppsTab.js / ProtectionTab.js. Prefixes: dv- (shared
   by the three), ov- (overview), ap- (apps), pr- (protection). Logical
   properties only. No transform / filter on any ancestor of a Sheet. */

/* ---------- shared ---------- */

.dv-readonly {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--c-info-container);
  color: var(--c-info);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  line-height: 1.45;
}
.dv-readonly .icon { flex: none; margin-block-start: 2px; }

.dv-inline-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--c-danger);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.dv-inline-error > span { flex: 1 1 12em; }
.dv-inline-error .btn { margin-inline-start: auto; }

.dv-window-text bdi { white-space: nowrap; }

/* App icons are rounded squares, so they never read as a child's avatar. */
.avatar.dv-app-icon { border-radius: 24%; }

/* ---------- overview ---------- */

.ov-tab, .ap-tab, .pr-tab { display: flex; flex-direction: column; gap: var(--space-3); }

.ov-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) {
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ov-muted { color: var(--c-muted); font-size: var(--font-sm); line-height: 1.45; }
.ov-sub { margin-block: var(--space-4) var(--space-2); font-size: var(--font-xs); font-weight: var(--font-semibold); color: var(--c-muted); }

/* the health hero */
.ov-hero {
  --tone-ink: var(--c-neutral);
  --tone-bg: var(--c-neutral-container);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--tone-bg);
  box-shadow: none;
}
.ov-hero--ok { --tone-ink: var(--c-ok); --tone-bg: var(--c-ok-container); }
.ov-hero--warn { --tone-ink: var(--c-warn); --tone-bg: var(--c-warn-container); }
.ov-hero--danger { --tone-ink: var(--c-danger); --tone-bg: var(--c-danger-container); }
.ov-hero--info { --tone-ink: var(--c-info); --tone-bg: var(--c-info-container); }
.ov-hero-top { display: flex; align-items: center; gap: var(--space-4); }
.ov-hero-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--tone-ink);
  box-shadow: var(--shadow-1);
}
.ov-hero-text { flex: 1; min-width: 0; }
.ov-hero-title { font-size: var(--font-xl); font-weight: var(--font-bold); line-height: 1.25; color: var(--tone-ink); }
.ov-hero-explain { margin-block-start: var(--space-1); font-size: var(--font-sm); line-height: 1.5; color: var(--c-text); }
.ov-fix {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-ctl);
  background: var(--c-surface);
}
.ov-fix-title { font-size: var(--font-sm); font-weight: var(--font-semibold); margin-block-end: var(--space-2); }
.ov-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ov-check { display: flex; align-items: flex-start; gap: var(--space-2); }
.ov-check-icon { flex: none; margin-block-start: 2px; color: var(--tone-ink); }
.ov-check-text { flex: 1; min-width: 0; }
.ov-check-label { font-size: var(--font-sm); font-weight: var(--font-semibold); line-height: 1.4; }
.ov-check-fix { margin-block-start: 2px; font-size: var(--font-xs); color: var(--c-muted); line-height: 1.5; }
.ov-hero .dv-inline-error { margin-block-start: var(--space-3); }
.ov-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.ov-hero-checked { flex: 1; min-width: 0; font-size: var(--font-xs); color: var(--c-muted); }
.ov-hero-foot .btn--text { margin-inline-end: calc(-1 * var(--space-3)); }
.ov-skel-short { inline-size: 120px; }
.ov-skel-short .skeleton--line { margin: 0; }

/* today */
.ov-today .usage { margin-block-start: var(--space-1); }
.ov-top { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ov-top-row { display: flex; align-items: center; gap: var(--space-3); }
.ov-top-main { flex: 1; min-width: 0; }
.ov-top-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ov-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: var(--font-medium); }
.ov-top-min { flex: none; font-size: var(--font-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ov-top-track {
  display: block;
  block-size: 6px;
  margin-block-start: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}
.ov-top-fill {
  display: block;
  block-size: 100%;
  inline-size: var(--pct, 0%);
  border-radius: inherit;
  background: var(--c-primary-ink);
  transition: inline-size 0.4s var(--ease-out);
}

/* active now */
.ov-none { display: flex; align-items: center; gap: var(--space-2); color: var(--c-muted); font-size: var(--font-sm); }
.ov-none .icon { color: var(--c-ok); }
.ov-active { box-shadow: none; border: 1px solid var(--c-outline); margin-inline: calc(-1 * var(--space-1)); }
.ov-active .row-trailing { max-width: none; }
.ov-now .card-action .btn--text { margin-inline-end: calc(-1 * var(--space-3)); }

/* seven days */
.ov-week-readout { display: flex; align-items: baseline; gap: var(--space-2); margin-block-end: var(--space-3); }
.ov-week-readout strong { font-size: var(--font-md); font-weight: var(--font-semibold); }
.ov-week-readout span { color: var(--c-muted); font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.ov-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.ov-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ov-bar-track { display: flex; align-items: flex-end; justify-content: center; inline-size: 100%; block-size: 120px; }
.ov-bar {
  display: block;
  inline-size: min(30px, 100%);
  block-size: var(--h, 0%);
  min-block-size: 3px;
  border-radius: 7px 7px 3px 3px;
  background: var(--c-primary-container);
  transition: block-size 0.45s var(--ease-out), background-color 0.15s;
}
.ov-bar-col.is-today .ov-bar { background: var(--c-primary); }
.ov-bar-col.is-selected .ov-bar { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-primary-ink); }
.ov-bar-day { font-size: var(--font-xs); color: var(--c-muted); font-weight: var(--font-medium); }
.ov-bar-col.is-today .ov-bar-day { color: var(--c-primary-ink); font-weight: var(--font-bold); }
.ov-bar-col.is-selected .ov-bar-day { color: var(--c-text); font-weight: var(--font-bold); }

/* facts */
.ov-facts { margin: 0; }
.ov-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 44px;
  padding-block: var(--space-1);
}
.ov-fact + .ov-fact { border-block-start: 1px solid var(--c-outline); }
.ov-fact dt { color: var(--c-muted); font-size: var(--font-sm); }
.ov-fact dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  text-align: end;
}
.ov-fact-edit { margin-block: -6px; margin-inline-end: -10px; }
.ov-id { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; -webkit-user-select: all; user-select: all; }

/* protection switch */
.ov-prot.is-off { background: var(--c-danger-container); }
.ov-prot .switch-row,
.pr-switches .switch-row {
  inline-size: calc(100% + 2 * var(--space-4));
  margin-inline: calc(-1 * var(--space-4));
}
.ov-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-size: var(--font-xs);
  color: var(--c-muted);
  line-height: 1.5;
}
.ov-note .icon { flex: none; margin-block-start: 1px; }

/* the name sheet */
.ov-name-form .field { margin-block-end: 0; }
.ov-sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- apps ---------- */

.ap-toolbar {
  position: sticky;
  inset-block-start: calc(var(--appbar-h) + var(--safe-top) + var(--device-tabs-h, 64px));
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-2) var(--gutter);
  background: var(--c-bg);
}
.ap-search { position: relative; display: flex; align-items: center; }
.ap-search-icon { position: absolute; inset-inline-start: 12px; color: var(--c-muted); pointer-events: none; }
.ap-search-input {
  inline-size: 100%;
  min-block-size: 44px;
  padding-block: 0;
  padding-inline: 42px 42px;
  border: 1px solid var(--c-outline-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: max(16px, var(--font-sm)); /* below 16px iOS zooms the page on focus */
  -webkit-appearance: none;
  appearance: none;
}
.ap-search-input::placeholder { color: var(--c-placeholder); opacity: 1; }
.ap-search-input::-webkit-search-cancel-button,
.ap-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ap-search-input:focus { outline: none; border-color: var(--c-primary-ink); box-shadow: 0 0 0 4px var(--c-focus-ring); }
.ap-search-input:disabled { opacity: 0.6; }
.ap-search-clear {
  position: absolute;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}
.ap-search-clear:active { background: var(--c-surface-2); }
.ap-filters {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.ap-filters::-webkit-scrollbar { display: none; }
.ap-filters .chip-group { flex-wrap: nowrap; }
.ap-filters .chip { flex: none; min-block-size: 36px; }
.ap-count { font-size: var(--font-xs); color: var(--c-muted); padding-inline: var(--space-1); }

.ap-row .row-trailing { max-width: none; }
.ap-row.is-blocked .dv-app-icon { opacity: 0.55; filter: grayscale(1); }
.ap-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-block-start: 2px; }
.ap-row-usage { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ap-row-over { color: var(--c-danger); font-weight: var(--font-semibold); }
.ap-row-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--c-primary-ink); font-weight: var(--font-medium); }
.ap-meter {
  display: inline-block;
  flex: none;
  inline-size: 56px;
  block-size: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
}
.ap-meter-fill { display: block; block-size: 100%; inline-size: var(--pct, 0%); border-radius: inherit; background: var(--c-ok-fill); }
.ap-meter--warn .ap-meter-fill { background: var(--c-warn-fill); }
.ap-meter--danger .ap-meter-fill { background: var(--c-danger-fill); }

.ap-skel-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); min-block-size: 56px; }
.ap-skel-row .ap-skel-icon { flex: none; inline-size: 40px; margin: 0; border-radius: 10px; }
.ap-skel-row .ap-skel-text { flex: 1; }
.ap-skel-row .skeleton--line { margin: 6px 0; }

/* the app's sheet */
.ap-sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1) var(--space-4);
  text-align: center;
}
.ap-sheet-pkg { font-size: var(--font-xs); color: var(--c-muted); word-break: break-all; }
.ap-sec { padding-block: var(--space-4); border-block-start: 1px solid var(--c-outline); }
.ap-sec-title { font-size: var(--font-md); font-weight: var(--font-semibold); line-height: 1.3; }
.ap-sec-hint { margin-block: 2px var(--space-3); font-size: var(--font-xs); color: var(--c-muted); line-height: 1.5; }
.ap-sec-title + .ap-muted, .ap-sec-title + .chip-group { margin-block-start: var(--space-2); }
.ap-muted { font-size: var(--font-sm); color: var(--c-muted); line-height: 1.5; }
.ap-muted-icon { color: var(--c-muted); }
.ap-windows { box-shadow: none; border: 1px solid var(--c-outline); }
.ap-sub-line { display: block; }
.ap-lock-reason { color: var(--c-warn); font-weight: var(--font-medium); }
.ap-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-block-start: var(--space-3); font-size: var(--font-xs); color: var(--c-muted); line-height: 1.5; }
.ap-note .icon { flex: none; margin-block-start: 1px; }
.ap-sec-action { margin-block-start: var(--space-3); }
.ap-bonus .chip { padding-inline: var(--space-3); font-variant-numeric: tabular-nums; }

/* ---------- protection ---------- */

.card-head + .pr-switches { margin-block-start: var(--space-2); }
.pr-switches { margin-block-end: calc(-1 * var(--space-3)); }
.pr-switches > * + * { border-block-start: 1px solid var(--c-outline); }
.pr-footnote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-inline: var(--space-1);
  font-size: var(--font-xs);
  color: var(--c-muted);
  line-height: 1.5;
}
.pr-footnote .icon { flex: none; margin-block-start: 1px; }
@media (min-width: 900px) {
  .pr-tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pr-tab > .dv-readonly, .pr-tab > .pr-footnote { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-bar, .ov-top-fill { transition: none; }
}
/* ===== /E1 ===== */


/* The apps sheet: instead of an "allow" the server would refuse. */
.ap-cant-allow { margin: 0; }