/* ontoauto.css — Automations (list, builder) and the Inbox (ontoauto.js). Only .oauto-* classes, tokens only.
   Monochrome: state colour only through stateWord / .dot / .msg; tokens are grey chips, variables dashed. */

/* ---------------------------------------------------------------- the board: when → which workflow */
.oauto-rows{overflow:hidden}
.oauto-row{display:grid;grid-template-columns:minmax(0,1.1fr) 16px minmax(0,1fr) 160px 10px;align-items:center;column-gap:14px;min-height:64px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;cursor:pointer;transition:background .12s ease}
.oauto-row:hover,.oauto-row:focus-visible{text-decoration:none}
.oauto-row:last-child{border-bottom:0}
.oauto-row:hover{background:var(--card2)}
.oauto-row:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.oauto-rwhen{min-width:0;display:flex;flex-direction:column;gap:2px}
.oauto-rwhentext{font-size:14.5px;font-weight:500;line-height:1.35;color:var(--text)}
.oauto-rif{font-size:12.5px;line-height:1.35;color:var(--faint)}
.oauto-rarrow{font-size:14.5px;line-height:1;color:var(--faint);text-align:center}
.oauto-rflow{min-width:0}
.oauto-rflow .nr-name{font-weight:400;color:var(--text);white-space:normal}
.oauto-row .nr-sub{white-space:normal;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oauto-row .nr-sub.oauto-problem{color:var(--faint)}
.oauto-rowstate{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12.5px;color:var(--faint);text-align:right}
.oauto-rowstate .state{white-space:nowrap}
.oauto-rowwhen{white-space:nowrap}
.oauto-next-at{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.oauto-chev{display:inline-flex;color:var(--faint)}
.chip.oauto-count{height:22px;padding:0 8px;font-variant-numeric:tabular-nums}
.oauto-example{width:100%;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px}
.oauto-example:last-child{border-bottom:0}
.oauto-example:hover{background:var(--card2)}
.oauto-example .trail{margin-left:auto;display:inline-flex;color:var(--faint)}

/* ---------------------------------------------------- New automation: which workflow should run? */
.oauto-pick{width:100%;display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px 10px 20px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .12s ease}
.oauto-pick:last-child{border-bottom:0}
.oauto-pick:hover{background:var(--card2)}
.oauto-pick:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.oauto-picktext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oauto-pickname{font-size:14.5px;font-weight:500;line-height:1.35;color:var(--text)}
.oauto-picksub{font-size:12.5px;line-height:1.35;color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oauto-pickstate{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;max-width:260px;font-size:12.5px;color:var(--faint);text-align:right}
.oauto-pickstate .state{white-space:nowrap}
.oauto-pickwhen{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.oauto-pickplus{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;border:1px dashed var(--line2);color:var(--muted)}
.oauto-picknew .oauto-pickname{font-weight:400}

/* ------------------------------------------------------------- builder */
.oauto-saved{font-size:12.5px;color:var(--faint);white-space:nowrap}
.oauto-sw .swtitle{font-size:12.5px}
.block.oauto-part{padding:16px 20px}
.oauto-sent{margin:0;font-size:14.5px;line-height:30px;color:var(--text)}
.oauto-tok{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;margin:0 1px;border-radius:var(--r-sm);background:var(--card2);border:1px solid var(--line);color:var(--text);font:inherit;font-size:14.5px;line-height:1;cursor:pointer;vertical-align:middle;white-space:nowrap;max-width:100%;transition:border-color .12s ease}
.oauto-tok>span{overflow:hidden;text-overflow:ellipsis}
.oauto-tok svg{color:var(--faint);flex:none}
.oauto-tok:hover,.oauto-tok[aria-expanded="true"]{border-color:var(--line2)}
.oauto-tok:focus-visible{outline:2px solid var(--line2);outline-offset:1px}
.oauto-tok.is-empty{color:var(--muted);border-style:dashed;border-color:var(--line2);background:none}
.oauto-tok.is-plain{cursor:default;background:none;border-color:transparent;padding:0 2px;font-weight:500}
.oauto-tok.is-plain.is-empty{font-weight:400;color:var(--faint)}
.oauto-tok.is-varlike{background:none;border-style:dashed;border-color:var(--line2);color:var(--muted)}
.oauto-sub{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--faint)}
.oauto-sub.oauto-first{margin-top:0}
.oauto-sub.oauto-warn{color:var(--muted)}
.oauto-sub .oauto-tok{height:22px;font-size:12.5px;padding:0 6px}
.oauto-if{margin-left:8px;font-size:12.5px;color:var(--faint);white-space:nowrap}
.oauto-cond{position:relative;display:flex;align-items:flex-start;gap:8px;padding-right:30px}
.oauto-cond+.oauto-cond{margin-top:4px}
.oauto-x{position:absolute;right:0;top:2px;opacity:0;transition:opacity .12s ease}
.oauto-cond:hover .oauto-x,.oauto-cond:focus-within .oauto-x{opacity:1}
.oauto-addcond{margin:6px 0 2px -10px}
.oauto-sub.oauto-first+.oauto-addcond{margin-top:4px}
/* which workflow it runs: its steps read-only, numbered like Workflows and the run trail (.stepnum in base.css) */
.block.oauto-flowcard{padding:0;overflow:hidden}
.oauto-flowtop{display:flex;align-items:center;gap:12px;padding:14px 20px 10px}
.oauto-flowname{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oauto-flowsteps{list-style:none;margin:0;padding:0 20px 4px;display:flex;flex-direction:column;gap:8px}
.oauto-flowstep{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.45;color:var(--text)}
.oauto-flowstep .oauto-n{margin-top:0}
.oauto-flowtext{min-width:0;padding-top:1px}
.oauto-flowempty{padding:0 20px 4px}
.oauto-flowwhere{margin:10px 0 0;padding:10px 20px 12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--faint)}
.oauto-flowwhere b{font-weight:500;color:var(--muted)}
.oauto-errhost:empty,.oauto-errpad:empty{display:none}
.oauto-errpad{padding:0 14px 12px}
.msg.oauto-err{margin:8px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;min-height:0;background:var(--card)}
.oauto-left>.msg.oauto-err,.oauto-probhost>.msg.oauto-err{margin:0}
.oauto-limits{display:flex;flex-direction:column;gap:12px}
.block.oauto-limitcard{padding:0 20px}
.oauto-perh{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.oauto-delrow{display:flex}
.oauto-back svg{width:12px;height:12px}

/* token menu (the one floating layer on this page besides the why card) */
.oauto-menu{position:absolute;z-index:40;min-width:200px;max-width:340px;max-height:420px;overflow:auto;padding:6px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:4px}
.oauto-menu.is-fixed{position:fixed}
.oauto-mlist{display:flex;flex-direction:column;gap:1px}
.oauto-mi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:32px;padding:6px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.oauto-mi:hover,.oauto-mi:focus-visible{background:var(--card2);outline:0}
.oauto-mi[aria-selected="true"]{background:var(--card2);font-weight:500}
.oauto-ml{line-height:1.3}
.oauto-ms{font-size:12.5px;color:var(--faint);font-weight:400;line-height:1.3}
.oauto-mhead{padding:8px 10px 2px;font-size:11px;font-weight:600;color:var(--faint)}
.oauto-mnone{margin:6px 10px;font-size:12.5px;color:var(--faint)}
.oauto-mfilter{width:100%}
.oauto-mtop{display:flex;align-items:center;gap:6px;padding:2px 2px 6px;border-bottom:1px solid var(--line)}
.oauto-mtop .f{flex:1;min-width:0}
.oauto-munit{font-size:12.5px;color:var(--muted)}
.oauto-msheet .rowbtn{height:auto;min-height:38px;flex-wrap:wrap;padding:6px 12px}
.oauto-msheet .oauto-ms{width:100%}
.oauto-msheet .oauto-mtop{margin-bottom:8px}

/* answers sheet, run sheet */
.oauto-sheetlead{margin-top:0}
.oauto-drysw{margin-top:16px}
.oauto-dryout:empty{display:none}
.oauto-dryout{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.oauto-drymsg{margin:0 0 6px;font-weight:500}
.oauto-dryout.is-no .oauto-drymsg{margin:0;font-weight:400;color:var(--muted)}
.oauto-drylist{margin:0;padding-left:20px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------ test and runs */
.oauto-testhost:empty{display:none}
.block.oauto-testcard,.block.oauto-runscard{padding:0;overflow:hidden}
.oauto-verdict{margin:0;padding:14px 20px 2px;font-size:16px;font-weight:600;line-height:1.35;display:flex;align-items:center;gap:8px}
.oauto-verdict.is-quiet{font-size:14.5px;font-weight:500;color:var(--muted)}
.oauto-testcard>.hint{margin:0;padding:2px 20px 10px}
.oauto-testrow{min-height:48px;padding:8px 20px}
.oauto-testrow .nr-name{font-weight:400}
.oauto-testrow .nr-name .onto-ref{font-weight:500}
.oauto-testrow>.dot{flex:none}
.oauto-testrow .nr-sub{white-space:normal;line-height:1.4}
.oauto-dim{color:var(--faint);font-weight:400}
.oauto-upcoming{margin:0;padding:10px 20px 2px;font-size:12.5px;font-weight:600;color:var(--muted);border-top:1px solid var(--line)}
.oauto-moreskips{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.oauto-moreskips>.btn{align-self:flex-start;margin:6px 10px}
.oauto-moreskips>.hint{margin:4px 20px 10px}
.oauto-run{padding:12px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.oauto-run:last-child{border-bottom:0}
.oauto-runtop{display:flex;align-items:baseline;gap:10px}
.oauto-runname{flex:1;min-width:0;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oauto-runname .onto-ref{font-weight:500}
.oauto-runstate{font-size:12.5px}
.oauto-runerr{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.oauto-runmore{align-self:flex-start;height:24px;padding:0 6px;margin-left:-6px;font-size:12.5px;color:var(--muted)}
.oauto-rundetail:empty{display:none}
.oauto-trail{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.oauto-trail li{display:flex;gap:8px;align-items:flex-start}
.oauto-trail li.is-later{color:var(--faint)}
.oauto-tn{flex:none;width:14px;padding-top:0;font-size:11px;font-weight:600;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.oauto-tn.is-blank{width:14px}
.oauto-where{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--faint)}
.oauto-mark{width:12px;flex:none;display:flex;justify-content:center;padding-top:3px;color:var(--muted)}
.oauto-mark .dot{width:7px;height:7px;margin-top:1px}
.oauto-ring{display:inline-block;width:7px;height:7px;border-radius:50%;border:1px solid var(--faint);margin-top:1px;box-sizing:border-box}
.oauto-trailtext{min-width:0}
.oauto-quotebtn{border:0;background:none;padding:0;font:inherit;color:var(--text);cursor:pointer;text-decoration:underline dotted var(--faint);text-underline-offset:3px;text-align:left}
.oauto-quotebtn:hover,.oauto-quotebtn.is-open{text-decoration-color:var(--text)}
.oauto-jobline{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.oauto-runbtns{margin-top:8px}
.oauto-stop{margin-left:auto}
.oauto-anshint{margin:4px 0 0}
.oauto-norun{margin:0;padding:14px 20px;font-size:12.5px;color:var(--faint)}
.oauto-allruns{display:flex;flex-direction:column;gap:12px}
.oauto-allruns>.seg{align-self:flex-start}
.oauto-sheetmore:empty{display:none}

/* ---------------------------------------------------------------- inbox */
.oauto-top{display:flex;align-items:center;gap:var(--s-m)}
.oauto-top .eyebrow{margin:0}
.oauto-ilist{display:flex;flex-direction:column;gap:var(--s-m)}
.oauto-icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;outline:0;transition:background .12s ease,border-color .12s ease,opacity .12s ease}
.oauto-icard:hover{border-color:var(--line2)}
.oauto-icard.is-focus{background:var(--card2);border-color:var(--line2);cursor:default}
.oauto-icard.is-focus .btn.sec,.oauto-icard.is-focus .btn.danger{border-color:var(--line2)}
.oauto-icard:focus-visible{outline:2px solid var(--line2);outline-offset:2px}
.oauto-icard.is-leaving{opacity:0}
.oauto-icard .btnrow{margin-top:2px}
.oauto-icard .hint{margin:0}
.oauto-from{margin:0;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.oauto-from svg{flex:none}
.oauto-fromtext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oauto-fromwhen{flex:none;margin-left:auto}
.oauto-fromlink{color:var(--text);text-decoration:underline dotted var(--line2);text-underline-offset:3px}
.oauto-fromlink:hover{text-decoration-style:solid;text-decoration-color:var(--text)}
.oauto-q{margin:0;font-size:14.5px;font-weight:500;line-height:1.4;color:var(--text)}
.oauto-quote{margin:0;padding:1px 0 1px 12px;border-left:2px solid var(--line2);font-size:14.5px;line-height:1.45;color:var(--muted)}
.oauto-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-m);font-size:12.5px;color:var(--faint)}
.oauto-meta .btn.quiet{height:24px;padding:0 6px;margin-left:-6px;font-size:12.5px;color:var(--muted)}
.oauto-whyhost:empty{display:none}
.oauto-next{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.oauto-next:empty{display:none}
.oauto-fyi{cursor:pointer;padding:8px 20px 8px 16px}
.oauto-fyi .nr-name{font-weight:400}
.oauto-fyi.is-unread .nr-name{font-weight:500}
.oauto-fyi:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.oauto-bullet{width:6px;height:6px;border-radius:50%;flex:none;background:transparent}
.oauto-fyi.is-unread .oauto-bullet{background:var(--text)}
.oauto-daycount{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.oauto-donerow{padding:8px 20px}
.oauto-donerow:not(.is-link):hover{background:none}
.oauto-donerow.is-link{cursor:pointer}
.oauto-donerow .nr-sub{white-space:nowrap}
.oauto-donechip{font-size:12.5px;color:var(--muted);max-width:180px;overflow:hidden}
.oauto-donechip>span{overflow:hidden;text-overflow:ellipsis}
.oauto-more{align-self:flex-start}

/* ---------------------------------------------------------------- phone */
@media (max-width:1179px){
  .oauto-right{order:2}
  .oauto-saved.is-idle{display:none}
  /* the board on a narrower column: when → workflow on one line, the state under the workflow */
  .oauto-row{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 10px;row-gap:6px}
  .oauto-rwhen,.oauto-rarrow,.oauto-rflow{grid-row:1}
  .oauto-rowstate{grid-column:3;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;text-align:left}
  .oauto-chev{grid-column:4;grid-row:1 / span 2}
}
@media (max-width:600px){
  .oauto-row{grid-template-columns:16px minmax(0,1fr);row-gap:4px;column-gap:8px;padding:12px 14px}
  .oauto-rwhen{grid-column:1 / -1;grid-row:1}
  .oauto-rarrow{grid-column:1;grid-row:2;align-self:start;padding-top:2px}
  .oauto-rflow{grid-column:2;grid-row:2}
  .oauto-rowstate{grid-column:2;grid-row:3}
  .oauto-chev{display:none}
  .oauto-pick{flex-wrap:wrap;gap:6px 12px;padding:12px 14px}
  .oauto-pick .oauto-picktext{flex:1 1 100%}
  .oauto-pickstate{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;max-width:100%;text-align:left}
  .oauto-pickwhen{white-space:normal}
  .oauto-picknew{flex-wrap:nowrap}
  .oauto-picknew .oauto-picktext{flex:1 1 auto}
  .block.oauto-part{padding:14px 16px}
  .oauto-x{opacity:1}
  .oauto-tok{white-space:normal;height:auto;min-height:26px;padding:3px 8px;line-height:1.3}
  .oauto-icard{padding:12px 14px}
  .oauto-from{flex-wrap:wrap;gap:4px 6px}
  .oauto-fromtext{flex:1 1 calc(100% - 20px);white-space:normal}
  .oauto-fromwhen{margin-left:20px}
  .oauto-icard .btnrow .btn{flex:1 1 100%;width:100%}
  .oauto-donechip{display:none}
  .oauto-limitcard .statusrow{flex-wrap:wrap;gap:2px 12px;padding:10px 0;min-height:0}
  .oauto-limitcard .statusrow .k{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .oauto-pick,.oauto-row,.oauto-tok,.oauto-x,.oauto-icard{transition:none}
}