/* M-3 Routines (UI-02 to UI-04): compact rows, status glyphs, the New
   routine chooser, "Make this a routine" and the workflow page. Uses the
   density tokens (UI-01): type, spacing, control heights and phone tap size. */

/* ---------- list ---------- */
.routine-sect-head { margin-bottom:var(--space-2); }
.routine-sect-head h2 { font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em; }
.routine-sect-head .sub { font-size:var(--text-xs); color:var(--ink-3); }
.page-sect:has(> .routine-list) { margin-top:var(--space-6); }
.routine-list.auto-list { border:1px solid var(--line); border-radius:12px; background:transparent; overflow:visible; }

.auto-row.routine-row { display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:6px var(--space-3); border-bottom:1px solid var(--line); flex-wrap:nowrap; }
.auto-row.routine-row:last-child { border-bottom:0; }
.auto-row.routine-row:hover { background:var(--hover); }
.routine-list .routine-row:first-child { border-top-left-radius:12px; border-top-right-radius:12px; }
.routine-list .routine-row:last-child { border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.routine-row.routine-focused { background:var(--hover-2); }

.routine-avatar { flex:none; width:28px; height:28px; display:grid; place-items:center; }
.routine-avatar > * { width:28px; height:28px; }
.routine-row .auto-main { flex:1; min-width:0; }
.routine-row .auto-name { font-size:var(--text-md); font-weight:550; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routine-row .auto-name a { color:var(--ink); text-decoration:none; }
.routine-row .auto-name a:hover { text-decoration:underline; text-underline-offset:3px; }
.routine-row .auto-sub { font-size:var(--text-sm); line-height:1.35; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routine-row .routine-reason { color:var(--red); font-size:inherit; margin:0; max-width:none; }

.routine-row .auto-meta { display:flex; align-items:center; gap:var(--space-4); flex:none; text-align:left; width:auto; max-width:none; padding:0; }
.routine-row .routine-time { width:112px; font-size:var(--text-sm); font-weight:400; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.routine-row .routine-time.bad { color:var(--red); }
.routine-row .auto-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:2px; margin:0; min-width:64px; }
.routine-repair { display:flex; flex:none; }
.routine-repair .btn.small { white-space:nowrap; }
.routine-row .icon-btn,.routine-row .library-options > summary.btn { width:var(--control-h-sm); height:var(--control-h-sm); min-height:var(--control-h-sm); }
.routine-row .routine-repair .btn.small { min-height:var(--control-h-sm); height:var(--control-h-sm); }
.routine-row .library-option-actions { right:0; min-width:220px; }
.routine-row .library-option-actions .lib-routine-output { padding:6px 10px; font-size:var(--text-xs); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:4px 0; }

/* ---------- status ---------- */
.routine-status { display:inline-flex; align-items:center; gap:7px; width:132px; font-size:var(--text-sm); color:var(--ink-2); white-space:nowrap; }
.routine-status svg { flex:none; width:15px; height:15px; }
.routine-status.is-failed { color:var(--red); }
.routine-status.is-attention { color:var(--amber); }
.routine-status.is-paused,.routine-status.is-done { color:var(--ink-3); }
.routine-status.is-live { color:var(--green); }
.routine-status .routine-status-label { color:inherit; font-weight:500; }
.routine-status.is-paused .routine-status-label,.routine-status.is-done .routine-status-label { color:var(--ink-2); font-weight:400; }

/* Live = switched on and healthy: a green dot with an expanding, fading ring. */
.routine-pulse { position:relative; flex:none; width:15px; height:15px; display:inline-grid; place-items:center; }
.routine-pulse::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2px var(--green-soft); }
.routine-pulse::after { content:""; position:absolute; inset:3.5px; border-radius:50%; border:1.5px solid var(--green); opacity:0; animation:routine-pulse 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes routine-pulse { 0% { transform:scale(.6); opacity:.85; } 80%,100% { transform:scale(2.1); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .routine-pulse::after { animation:none; opacity:.35; transform:scale(1.6); }
}

/* ---------- phones: avatar, title, status icon and actions ---------- */
@media (max-width: 760px) {
  .routine-row .routine-time { display:none; }
  .routine-row .auto-meta { gap:var(--space-2); }
  .routine-status { width:auto; }
  .routine-status .routine-status-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .routine-row .auto-actions { min-width:0; }
  /* A failure reason wraps onto its own line instead of hiding behind a tooltip. */
  .routine-row .auto-sub:has(.routine-reason) { white-space:normal; overflow:visible; }
  .routine-row .routine-reason-sep { display:none; }
  .routine-row .routine-reason { display:block; margin-top:2px; line-height:1.35; overflow-wrap:anywhere; }
  /* A repair action takes its own line under the title instead of squeezing it. */
  .auto-row.routine-row:has(.routine-repair) { flex-wrap:wrap; row-gap:6px; padding-bottom:10px; }
  .routine-row:has(.routine-repair) .auto-meta { display:contents; }
  .routine-row .routine-repair { order:10; flex-basis:100%; padding-left:40px; }
  .routine-row .routine-repair .btn.small { min-height:var(--tap-min); height:var(--tap-min); padding:0 var(--space-3); }
}

/* ---------- New routine chooser and workflow picker ---------- */
.routine-choice-avatar,.routine-choice-avatar > * { width:30px; height:30px; display:block; }
.choice-icon:has(.routine-choice-avatar) { background:transparent; }
.routine-picker-search { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:var(--space-3); }
.routine-picker-list { display:flex; flex-direction:column; max-height:min(52vh, 420px); overflow:auto; border:1px solid var(--line); border-radius:12px; }
.routine-picker-row { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:52px; padding:8px 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.routine-picker-row:last-child { border-bottom:0; }
.routine-picker-row:hover:not(:disabled) { background:var(--hover); }
.routine-picker-row:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.routine-picker-row:disabled { cursor:default; opacity:.55; }
.routine-picker-row .type-ico { flex:none; width:28px; height:28px; }
.routine-picker-copy { display:flex; flex-direction:column; min-width:0; }
.routine-picker-copy strong { font-size:var(--text-md); font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routine-picker-copy small { font-size:var(--text-sm); color:var(--ink-3); }
.routine-picker-list > .sub { padding:14px 12px; margin:0; }
.routine-picker-note { margin-top:var(--space-3); }
.link-btn { padding:0; border:0; background:none; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---------- Make this a routine ---------- */
.routine-schedule-form { display:flex; flex-direction:column; gap:var(--space-3); }
.routine-schedule-form > .sub { margin:0; }
.routine-schedule-form .field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.routine-schedule-form .field > span,.routine-presets legend { font-size:var(--text-xs); font-weight:600; color:var(--ink-2); }
.routine-schedule-form .field[hidden] { display:none; }
.routine-schedule-form input:not([type=radio]),.routine-schedule-form select { width:100%; min-height:var(--control-h-lg); padding:0 10px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg-input); color:var(--ink); font:inherit; font-size:var(--text-md); }
.routine-presets { border:0; padding:0; margin:0; min-width:0; }
.routine-presets legend { padding:0; margin-bottom:5px; }
.routine-segment { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px; padding:2px; border-radius:10px; background:var(--quiet); }
.routine-segment label { position:relative; }
.routine-segment input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.routine-segment span { display:grid; place-items:center; min-height:calc(var(--control-h-lg) - 4px); border-radius:8px; font-size:var(--text-sm); color:var(--ink-2); }
.routine-segment input:checked + span { background:var(--bg); color:var(--ink); font-weight:550; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.routine-segment input:focus-visible + span { outline:2px solid var(--ink); outline-offset:1px; }
.routine-when { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--space-3); }
.routine-schedule-form [data-routine-summary] { color:var(--ink-2); }
.routine-schedule-form .dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:var(--space-1); }

/* ---------- workflow page ---------- */
.wf-routine-line { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:4px; color:var(--ink-2); }
.wf-routine-line svg { width:14px; height:14px; color:var(--green); }
.wf-routine-line a { color:var(--ink); }
.wf-detail .sect { padding-top:var(--space-4); padding-bottom:var(--space-4); }
.wf-detail .sect h3 { font-size:var(--text-xl); }
.wf-detail .sect > div:not(.list-row):not(.kv):not(.sub) { font-size:var(--text-md); }
.wf-detail .list-row { min-height:52px; gap:var(--space-3); padding-top:6px; padding-bottom:6px; }
.wf-detail .list-row .title { font-size:var(--text-md); font-weight:550; }
.wf-detail .list-row .sub { font-size:var(--text-sm); }
.wf-schedule-row .routine-status { width:96px; }

/* ---------- agent page drafts ---------- */
.agent-routine-drafts h3 .sub { font-size:var(--text-xs); font-weight:400; color:var(--ink-3); }
.agent-routine-drafts .routine-draft-row[hidden] { display:none; }