/* ============ SETTINGS > THE APP > QUIET HOURS ============ */
/* The shell, the columns, the gutter rule, the rows, the toggle, the strip and
   the footer all come from account.css. Only the day ring, the ring card and
   the three rows this screen adds are defined here. Monochrome: white through
   grey on black, zero hue. */

/* the left column: its SECTION label is pinned above its own scroll box */
.qh__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* ---- the ring card ---- */
/* The ring sits at x = 84 from the card's left edge, vertically centred; the
   text block begins at x = 176. Both are measured from the card, so the card
   owns no horizontal padding. */
.qh-card {
  position: relative;
  height: 148px;
  padding: 0;
  margin: 10px 0 0;
  overflow: hidden;
}
.qh-card__ringwrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  pointer-events: auto;
}
.qh-card__text {
  margin-left: 176px;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.qh-card__lead {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.qh-card__sub {
  font-size: 12px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.4;
}
.qh-card__note {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.3;
}
.qh-ringcaption { padding-top: 8px; }

/* ---- the day ring: a 24-hour clock face, never a chart ---- */
.qh-ring {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  color: var(--wear-primary);
  touch-action: none;
}
/* (1) the whole day */
.qh-day { stroke-width: 6; opacity: 0.06; }
/* (2) the quiet stretch, stronger while it is running */
.qh-quiet { stroke-width: 6; stroke-linecap: round; opacity: 0.3; }
.qh-quiet.is-on { opacity: 0.55; }
/* (3) how far Adaptive may move each edge */
.qh-drift { stroke-width: 6; stroke-dasharray: 1.5 4; opacity: 0.12; }
/* (4) three-hourly ticks with four labels */
.qh-tick { stroke-width: 1; opacity: 0.22; }
.qh-hourlabel {
  font-family: inherit;
  font-size: 9px;
  font-weight: 300;
  fill: var(--wear-primary);
  stroke: none;
  opacity: 0.3;
}
/* (5) the two drag targets */
.qh-handle { cursor: grab; }
.qh-handle:active { cursor: grabbing; }
.qh-handle__hit { fill: transparent; stroke: none; }
.qh-handle__ring { stroke-width: 1; opacity: 0.2; }
.qh-handle__dot { fill: var(--wear-primary); stroke: none; }
.qh-handle:focus { outline: none; }
.qh-handle:focus-visible .qh-handle__ring {
  opacity: 1;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
}
/* (6) the current time, redrawn once a minute */
.qh-now { stroke-width: 1; opacity: 0.45; }
/* (7) */
.qh-centre { fill: var(--wear-primary); stroke: none; opacity: 0.35; }

/* ---- schedule: the two time fields ---- */
.qh-time { width: 100%; }

/* ---- weekly: one row per day, the selected one drives the ring ---- */
.qh-day.is-active { background: rgba(255, 255, 255, 0.06); }
.qh-day { min-height: 38px; }
/* a day that is off is marked by opacity alone, never by colour */
.qh-day--off .acct-row__label,
.qh-day--off .acct-row__value { opacity: 0.55; }

/* ---- always allow: label, "allowed", then the toggle ---- */
.qh-allow {
  gap: 12px;
  min-height: 38px;
}
.qh-allow .acct-row__label { font-size: 13px; }
.qh-allow__value {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.4;
  white-space: nowrap;
}
/* Security alerts is locked on and cannot be reached by pointer or by tab */
.qh-allow.is-locked .atmos-switch { pointer-events: none; }

/* ---- smart: the bounded-shift note on the field surface ---- */
.qh-bound {
  align-items: center;
  min-height: 62px;
  height: 62px;
}
.qh-bound__title {
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.55;
}

/* ---- preview: a derived timeline, one dot per event ---- */
.qh-event {
  gap: 12px;
  min-height: 38px;
  border-bottom: none;
}
.qh-event__mark {
  position: relative;
  flex: 0 0 3px;
  align-self: stretch;
  width: 3px;
  margin-top: -4px;
}
.qh-event__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.5px;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 50%;
  background: var(--wear-primary);
  opacity: 0.55;
}
/* joins this event to the next one */
.qh-event__line {
  position: absolute;
  left: 1px;
  top: calc(50% + 4px);
  bottom: -4px;
  border-left: 1px dashed rgba(255, 255, 255, 0.16);
}
.qh-event__time {
  flex: 0 0 44px;
  font-size: 12px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.4;
}
.qh-event__label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qh-event__verdict {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 300;
  color: var(--wear-primary);
  opacity: 0.3;
  white-space: nowrap;
}

/* ---- the action strip's buttons ---- */
/* each width is a value in quiet.config.js, handed over as a property so the
   stylesheet keeps one rule for all four */
.qh-strip__acts {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qh-strip__btn { width: var(--qh-btn); padding: 0; }