/* owner.css: the owner screens (Alarms, Log, Rules, System), D-052. Rows and hairlines, no boxes. Uses the tokens of app.css. */

/* ---------------------------------------------------------------------------------------------- Alarms */
.alarm-checked { margin: calc(var(--s5) * -1) 0 var(--s5); }
.alarm-list { border-top: 1px solid var(--line); }
.alarm-group { border-bottom: 1px solid var(--line); }
.alarm-group-head { display: flex; align-items: baseline; gap: var(--s3); padding-top: var(--s4); }
.alarm-group.is-many .alarm + .alarm { border-top: 1px dashed var(--line); }
.alarm { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 0; }
.alarm-head { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: baseline; column-gap: var(--s3); }
.alarm-head > .dot { align-self: center; }
.alarm-title { font: 500 var(--fs-body)/1.45 var(--font); min-width: 0; }
.alarm-when { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; }
.alarm-btn { align-self: center; }
.alarm-parts { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0 0 0 calc(8px + var(--s3)); font-size: var(--fs-small); line-height: 1.55; max-width: 960px; }
.alarm-parts dt { color: var(--muted); }
.alarm-parts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.alarm-parts .who { color: var(--ink); margin-right: var(--s2); }
.alarm > .small.muted, .alarm > .alarm-more { margin-left: calc(8px + var(--s3)); }
.alarm-more > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent); font-weight: 500; cursor: pointer; font-size: var(--fs-small); }
.alarm-items { margin: var(--s1) 0 0; padding: 0 0 0 var(--s5); font-size: var(--fs-small); }
.alarm-items li + li { margin-top: var(--s1); }
@media (max-width: 720px) {
  .alarm-head { grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "dot title" ". when" ". btn"; row-gap: var(--s1); }
  .alarm-head > .dot { grid-area: dot; align-self: start; margin-top: 8px; }
  .alarm-title { grid-area: title; }
  .alarm-when { grid-area: when; }
  .alarm-btn { grid-area: btn; margin-top: var(--s2); }
  .alarm-btn .btn { width: 100%; }
  .alarm-parts { grid-template-columns: 1fr; gap: 0; }
  .alarm-parts dd { margin-bottom: var(--s2); }
}

/* ---------------------------------------------------------------------------------------------- Log */
.log-controls { display: flex; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.log-date { flex: 0 1 190px; min-width: 150px; }
.log-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.list .list-row .list-row-title:has(.log-time) { font-weight: 400; }
.log-more { display: flex; justify-content: flex-start; padding-top: var(--s3); }

/* ---------------------------------------------------------------------------------------------- Rules */
.rule-find { max-width: 420px; margin-bottom: var(--s5); }
.rule-group-note { margin: 0 0 var(--s3); }
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2) var(--s4); padding: var(--s4) 0; }
.rule-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); max-width: 820px; }
.rule-sentence { font: 400 var(--fs-body)/1.5 var(--font); color: var(--ink); }
.rule-off { display: inline-block; margin-right: var(--s2); padding: 0 6px; border-radius: 4px; background: var(--bg-2); font: 500 var(--fs-label)/20px var(--font); color: var(--muted); vertical-align: 1px; }
.rule-why { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.rule-meta { font-size: var(--fs-label); line-height: 1.4; color: var(--muted); }
.rule-problem { display: flex; align-items: center; gap: var(--s2); color: var(--blocked); font-size: var(--fs-small); line-height: 1.5; }
.rule-change-line { font-weight: 500; overflow-wrap: anywhere; }
.rules-top:not(:empty) { margin-bottom: var(--s4); }
@media (max-width: 600px) {
  .rule-row { grid-template-columns: 1fr; }
  .rule-act .btn { padding-left: 0; }
}

/* ---------------------------------------------------------------------------------------------- System */
.owner-verdict { font: 500 var(--fs-body)/1.5 var(--font); padding: var(--s2) 0; }
.owner-note { margin-top: var(--s2); }
.owner-ok .state-title { color: var(--ok); }
.offers { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.offer-off { display: block; }
@media (max-width: 600px) {
  .offer { align-items: stretch; }
  .log-controls .btn { flex: 1 1 auto; }
  .log-date { flex: 1 1 100%; order: -1; }
}
/* System screen cards become plain sections: no box around a list */
.page .card:has(> .offers), .page .card:has(> .list) { border: 0; padding: 0; border-radius: 0; }