/* =====================================================================
   DEIMIX HUB - the audit's pages and the service log, on mock 2's kit:
   the Audit trail's days row and breakdown, What is recorded, Clearing,
   and the Service log. Only what those pages add; every colour is a kit
   token. No inline style anywhere: the page CSP forbids it, so the
   breakdown's bars are <progress> elements, not widths.
   ===================================================================== */

/* ---- the service log's hue: the band tile and the sidebar marker only ---- */
:root { --hue-servicelog: #B8C878; }
.nav-item.hue-servicelog { --page-hue: var(--hue-servicelog); }
.page-service-log { --page-hue: var(--hue-servicelog); display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---- a stored name beside its words, wherever it is shown ---- */
.breakdown-row .row-number, .rule-row .row-number, .clearing-row .row-number, .detail-actions .row-number { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--faint); }

/* ---- days: quick ranges, then from / to ---- */
.days-row { flex-wrap: wrap; row-gap: 8px; }
.days-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.day-field { display: inline-flex; align-items: center; gap: 7px; }
.day-field .mono-label { font-size: 10.5px; }
.day-input { height: 34px; width: auto; padding: 0 10px; font-size: 13.5px; color-scheme: dark; }
.days-problem { padding: 0 0 9px; }

/* ---- the breakdown by action ---- */
.breakdown { display: flex; flex-direction: column; gap: 10px; }
.breakdown-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.breakdown-head h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.breakdown-head h3 .svg-icon { color: var(--muted); width: 17px; height: 17px; }
.breakdown-rows { display: flex; flex-direction: column; gap: 2px; }
.breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.breakdown-row:hover { background: var(--panel-2); }
.breakdown-row.is-chosen { background: var(--choice-soft); }
.breakdown-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.breakdown-name { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.breakdown-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--soft-text); }
.breakdown-bar { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--panel-3); appearance: none; -webkit-appearance: none; overflow: hidden; }
.breakdown-bar::-webkit-progress-bar { background: var(--panel-3); border-radius: 2px; }
.breakdown-bar::-webkit-progress-value { background: var(--hue-audit); border-radius: 2px; }
.breakdown-bar::-moz-progress-bar { background: var(--hue-audit); border-radius: 2px; }
.breakdown-row.is-chosen .breakdown-bar::-webkit-progress-value { background: var(--choice); }
.breakdown-row.is-chosen .breakdown-bar::-moz-progress-bar { background: var(--choice); }
.breakdown-more summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 8px; }
.breakdown-more summary:hover { color: var(--text); }
.breakdown-note { color: var(--muted); font-size: 12.5px; padding: 0 8px; }
.detail-empty-with-breakdown { padding: 22px var(--gutter) 40px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.detail-empty-with-breakdown .log-rule { margin-top: 0; }
.breakdown-on-phone { display: none; }
.moved-fields { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- what is recorded ---- */
.rules-area-count { margin-left: auto; align-self: center; }
.rule-row .settings-name .row-number { margin-left: 6px; font-weight: 400; }
.rule-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule-who .svg-icon { width: 13px; height: 13px; color: var(--faint); }
a.rule-count { text-decoration: none; }
a.rule-count:hover { border-color: var(--muted); color: var(--text); }
.rule-count strong { color: var(--text); font-family: var(--font-display); }

/* ---- clearing: two panels, never one with a switch ---- */
.clearing-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.clearing-panel.is-danger { border-color: rgba(240,119,107,.4); }
.clearing-panel.is-danger .settings-group-head > .svg-icon { color: var(--danger); }
.clearing-panel .settings-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.clearing-days { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.clearing-count { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-small); background: var(--ink-deep); border: 1px solid var(--line-strong); width: 100%; }
.clearing-count strong { font-family: var(--font-display); font-size: 18px; }
.clearing-ask { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.clearing-phrase { font-family: var(--font-mono); letter-spacing: .06em; color: var(--text); background: var(--panel-3); border-radius: 5px; padding: 1px 6px; text-transform: none; }
.clearing-phrase-input { font-family: var(--font-mono); letter-spacing: .06em; }
.clearing-phrase-input.is-right { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.clearing-ask .panel-actions { justify-content: flex-start; }
.clearing-panel [data-clearing-armed][hidden] { display: none; }
.clearing-worker-warning { padding: 12px 14px; border-radius: var(--radius-small); background: var(--danger-soft); }
.clearing-row .settings-name .row-number { margin-right: 4px; }
.clearing-row { grid-template-columns: minmax(0, 1fr) auto; }
.clearing-row .settings-control { align-items: flex-end; }
.clearing-row .settings-hint { overflow-wrap: anywhere; }
.state-chip.is-waiting { color: var(--choice); background: var(--choice-soft); }

/* ---- the service log ---- */
.log-search { flex-wrap: wrap; row-gap: 8px; border-top: 1px solid var(--line); }
.log-search .search-wrap .input { height: 34px; }
.level-segments .segment { white-space: nowrap; }
.log-lines-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log-lines { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.log-line { padding: 10px var(--gutter); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.log-line-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.log-level { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; background: var(--panel-2); color: var(--muted); flex: none; }
.log-line.is-error .log-level { color: var(--danger); background: var(--danger-soft); }
.log-line.is-warn .log-level { color: var(--choice); background: var(--choice-soft); }
.log-line.is-debug .log-level { color: var(--faint); }
.log-message { font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.log-when { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; flex: none; }
.log-fields { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--soft-text); min-width: 0; }
.log-field { overflow-wrap: anywhere; min-width: 0; }
.log-key { color: var(--faint); }
.log-stopped { margin: 10px var(--gutter); }
.log-lines .empty { padding: 40px 24px; }

@media (min-width: 761px) {
  .main.is-list .page-service-log { height: 100%; }
}
@media (min-width: 1240px) {
  .clearing-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .breakdown-on-phone { display: block; border-bottom: 1px solid var(--line); }
  .breakdown-on-phone > summary { cursor: pointer; padding: 12px var(--gutter); color: var(--soft-text); font-size: 14px; display: flex; align-items: center; gap: 8px; }
  .breakdown-on-phone > .breakdown { padding: 0 var(--gutter) 14px; }
  .days-form { margin-left: 0; width: 100%; }
  .day-field { flex: 1 1 140px; }
  .day-input { flex: 1; min-width: 0; }
  .days-row .segmented, .level-segments { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .log-line-head { flex-wrap: wrap; }
  .log-when { margin-left: 0; order: -1; width: 100%; }
  .log-search .search-wrap { flex-basis: 100%; }
  .page-service-log .filter-row .result-count { white-space: normal; }
  .band-actions .export-format { display: inline; }
  .rules-area-count { margin-left: 0; }
  .settings-group-head { flex-wrap: wrap; }
  .clearing-row .settings-control { align-items: flex-start; }
}