/* Plan 13 + UI-18/UI-20: routines in the chat, the agent panel and the
   Routines page (public/routines-chat.js). Quiet and grayscale: colour only
   for status (green live, amber attention, red failed). Sizes from the
   density tokens (styles.css). */

/* ---------- status dot ---------- */
.routine-dot { flex:none; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.routine-dot.is-live { background:var(--green); box-shadow:0 0 0 3px var(--green-soft, transparent); }
.routine-dot.is-attention { background:var(--amber); }
.routine-dot.is-failed { background:var(--red); }
.routine-dot.is-paused, .routine-dot.is-done { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); }

/* ---------- G1: "Created routine · name" line in the chat ---------- */
.routine-event { display:flex; align-items:center; gap:6px; min-width:0; max-width:660px; margin:var(--space-1) 0 0; font-size:var(--text-md); line-height:1.4; color:var(--ink-3); }
.routine-event > svg { flex:none; width:16px; height:16px; }
.routine-event-kind { flex:none; white-space:nowrap; }
.routine-event-name { display:inline-flex; align-items:center; min-width:0; min-height:var(--control-h-sm); padding:0; border:0; background:none; color:var(--ink-2); font:inherit; font-weight:500; cursor:pointer; }
.routine-event-name::before { content:"·"; margin-right:6px; color:var(--ink-3); font-weight:400; }
.routine-event-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routine-event-name:hover span { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.routine-event-state { flex:none; display:inline-flex; align-items:center; gap:6px; margin-left:4px; }
.routine-event-state:empty { display:none; }
/* Rule zero: every touch target is at least --control-h-sm (44px on touch). */
.routine-event-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-h-sm); min-width:var(--control-h-sm); padding:0 10px; border:0; border-radius:8px; background:none; color:var(--ink-2); font:inherit; cursor:pointer; }
.routine-event-toggle:hover { color:var(--ink); background:var(--hover); }
.routine-event-toggle:disabled { opacity:.5; cursor:default; }
.routine-event-name:focus-visible, .routine-event-toggle:focus-visible, .routine-card-open:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.routine-event-note { font-size:var(--text-xs); }

/* ---------- UI-18: the routine card in a reply ---------- */
.routine-card { max-width:460px; margin-top:var(--space-2); border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.routine-card-open { display:flex; align-items:center; gap:var(--space-3); width:100%; padding:12px 14px; border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; }
button.routine-card-open { cursor:pointer; }
button.routine-card-open:hover { background:var(--hover); }
.routine-card-icon { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--hover-2); color:var(--ink-2); }
.routine-card-icon svg { width:16px; height:16px; }
.routine-card-copy { display:grid; gap:1px; min-width:0; }
.routine-card-copy strong { font-size:var(--text-lg); font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routine-card-copy span { font-size:var(--text-md); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routine-card-open.is-gone { color:var(--ink-3); }
.routine-card-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:9px 14px; border-top:1px solid var(--line); }
.routine-card-state { display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:var(--text-md); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routine-card-foot .btn { flex:none; }

/* ---------- G3: panel rows with the Routines page toggle ---------- */
.routine-panel { gap:var(--space-3); }
.routine-panel > h3 { margin:0; font-size:var(--text-sm); font-weight:500; color:var(--ink-3); }
.routine-summary-list { display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.routine-summary-row { display:flex; align-items:center; gap:var(--space-2); border-bottom:1px solid var(--line); background:transparent; }
.routine-summary-row:last-child { border-bottom:0; }
.routine-summary-row:hover { background:var(--hover); }
.routine-summary-row .routine-summary { flex:1; min-width:0; gap:2px; padding:10px 0 10px 12px; border:0; background:transparent; border-radius:0; }
.routine-summary-row .routine-summary strong { font-size:var(--text-md); font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routine-summary-row .routine-summary span, .routine-summary-row .routine-summary small { font-size:var(--text-sm); line-height:1.4; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.routine-summary-row .routine-summary:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.routine-summary-row .routine-toggle { flex:none; margin-right:8px; width:var(--control-h-sm); height:var(--control-h-sm); color:var(--ink-2); }
.routine-summary-row .routine-toggle svg { width:14px; height:14px; }
.routine-summary-row[data-routine-state="live"] .routine-summary small { color:var(--green); }
.routine-summary-row[data-routine-state="attention"] .routine-summary small { color:var(--amber); }
.routine-summary-row[data-routine-state="failed"] .routine-summary small { color:var(--red); }

/* ---------- G2: one routine (agent panel and Routines page sheet) ---------- */
.work-panel .wp-body:has(> .routine-pane) { padding-bottom:0; }
.routine-pane { display:flex; flex-direction:column; gap:var(--space-5); min-height:100%; }
.routine-pane-head { display:flex; align-items:flex-start; gap:var(--space-2); }
.routine-pane-back { flex:none; width:var(--control-h-sm); height:var(--control-h-sm); margin:1px 0 0 -6px; color:var(--ink-2); }
.routine-pane-back svg, .routine-pane-more svg { width:16px; height:16px; }
.routine-pane-title { flex:1; min-width:0; }
.routine-pane-title h2 { margin:0; font-size:var(--text-xl); font-weight:600; line-height:1.3; letter-spacing:-.01em; overflow-wrap:anywhere; }
.routine-pane-title p { display:flex; align-items:center; flex-wrap:wrap; gap:0 7px; margin:4px 0 0; font-size:var(--text-md); color:var(--ink-2); }
.routine-pane-title p span { color:var(--ink-3); margin-left:-4px; }
.routine-pane-more { position:relative; flex:none; }
.routine-pane-more > summary { list-style:none; width:var(--control-h-sm); height:var(--control-h-sm); color:var(--ink-2); cursor:pointer; }
.routine-pane-more > summary::-webkit-details-marker { display:none; }
.routine-pane-more[open] > summary { background:var(--hover-2); color:var(--ink); }
.routine-pane-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:5; display:grid; min-width:180px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow-pop); }
.routine-pane-menu button { min-height:var(--control-h-sm); padding:8px 10px; border:0; border-radius:7px; background:none; color:var(--ink); font:inherit; font-size:var(--text-md); text-align:left; cursor:pointer; }
.routine-pane-menu button:hover, .routine-pane-menu button:focus-visible { background:var(--hover); outline:none; }
.routine-sec { display:grid; gap:var(--space-2); min-width:0; }
.routine-sec h3 { margin:0; font-size:var(--text-sm); font-weight:500; color:var(--ink-3); letter-spacing:0; text-transform:none; }
.routine-sec p { margin:0; font-size:var(--text-md); line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }
.routine-instruction p + p { margin-top:var(--space-2); }
.routine-steps { margin:0; padding-left:20px; display:grid; gap:4px; font-size:var(--text-md); line-height:1.5; color:var(--ink); }
.routine-steps li::marker { color:var(--ink-3); }
.routine-goal span { color:var(--ink-3); margin-right:4px; }
.routine-muted { color:var(--ink-3) !important; }
.routine-facts { margin:0; border-top:1px solid var(--line); }
.routine-facts > div { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--text-md); }
.routine-facts dt { flex:none; color:var(--ink-3); }
.routine-facts dd { margin:0; min-width:0; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.routine-facts .routine-when { font-weight:500; }
.routine-access-missing { color:var(--amber); }
.routine-facts-note:empty { display:none; }
.routine-facts-note .lib-routine-output { margin:0; padding:0; font-size:var(--text-sm); color:var(--ink-3); }
.routine-facts-note .lib-routine-output .btn { min-height:0; height:auto; padding:0 2px; background:none; color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.routine-history { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.routine-history .routine-run { display:flex; justify-content:space-between; gap:var(--space-2); padding:9px 0; font-size:var(--text-md); color:var(--ink); border-bottom:1px solid var(--line); text-decoration:none; }
.routine-history .routine-run small { color:var(--ink-3); font-size:inherit; }
.routine-history .routine-run:hover span { text-decoration:underline; text-underline-offset:3px; }
.routine-pane-foot { position:sticky; bottom:0; z-index:1; display:flex; align-items:center; gap:var(--space-2); margin:auto -20px 0; padding:var(--space-3) 20px; border-top:1px solid var(--line); background:var(--panel); }
.routine-pane-foot .btn { flex:1; justify-content:center; }
.routine-pane-foot .routine-delete { flex:none; width:var(--control-h); height:var(--control-h); color:var(--ink-3); }
.routine-pane-foot .routine-delete:hover { color:var(--red); background:var(--hover); }
.routine-pane-foot .routine-delete svg { width:16px; height:16px; }

/* ---------- UI-20: the Routines page ---------- */
.routine-row .auto-name .routine-sheet-open { max-width:100%; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:inherit; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.routine-row .auto-name .routine-sheet-open:hover { text-decoration:underline; text-underline-offset:3px; }
.routine-row .auto-name .routine-sheet-open:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
.company-routine-list { margin-top:var(--space-4); }
.company-routine-row .auto-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.routine-sheet-scrim { position:fixed; inset:0; z-index:55; display:flex; justify-content:flex-end; background:rgba(0,0,0,.28); }
:root:not([data-theme="light"]) .routine-sheet-scrim { background:rgba(0,0,0,.55); }
.routine-sheet { width:min(440px, 100%); height:100%; overflow-y:auto; overscroll-behavior:contain; padding:20px 20px 0; border-left:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-pop); outline:none; }

@media (max-width: 760px) {
  /* Routines page rows hide the label on phones; the line and the detail keep it. */
  .routine-pane .routine-status .routine-status-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .routine-pane-foot { margin:auto -16px 0; padding:var(--space-3) 16px calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .routine-sheet { width:100%; padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 0; border-left:0; }
}
/* Rule zero on the phone: content text 16px or larger, labels 15px. */
@media (max-width: 600px) {
  .routine-card { max-width:none; }
  .routine-event, .routine-card-copy span, .routine-card-state, .routine-pane-title p, .routine-sec p, .routine-steps,
  .routine-facts > div, .routine-history .routine-run, .routine-pane-menu button, .routine-summary-row .routine-summary span,
  .routine-summary-row .routine-summary small { font-size:16px; }
  .routine-card-copy strong, .routine-summary-row .routine-summary strong, .routine-row .auto-name { font-size:17px; }
  .routine-row .auto-sub { font-size:16px; }
  /* Few words: a failure reason shows two lines at most; the routine has the rest. */
  .routine-row .routine-reason { max-height:calc(2 * 1.35em); overflow:hidden; }
  .routine-sec h3, .routine-facts-note .lib-routine-output { font-size:15px; }
  .routine-pane-title h2 { font-size:20px; }
}