/* Go mode's Automations tab (web/account-automation.js, account.html #ac-auto): only in a build with SITE_AUTOMATION=on
   (scripts/build-site.mjs leaves this file and its link out otherwise). The house's look: square edges, hairlines, the
   serif for titles, brass for what needs a look, green for what is on; every colour is a token, so dark mode follows.
   The canvas reads left to right on a computer and top to bottom at 640 px or less; nothing is dragged. */
.au { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px 0 6px; }
.au .px-ico { flex: none; }
.au-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; }
.au-title h2 { margin: 0; font: 500 30px/1.1 var(--serif); color: var(--ink); }
.au-title h2:focus { outline: none; }
.au-title .sub { display: block; margin: 6px 0 0; max-width: 62ch; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.au-head-r { display: flex; gap: 10px; align-items: center; }
.au-q { min-width: 40px; font: 600 15px/1 var(--mono); }
.au h3 { margin: 0 0 10px; font: 500 21px/1.2 var(--serif); color: var(--ink); }

/* the first-visit guide: three steps, inline (nothing under it is blocked) */
.au-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--brass); color: var(--brass-ink); }
.au-guide[hidden] { display: none; }
.au-g-b { color: var(--ink); }
.au-g-n { margin: 0 0 4px; font: 500 12px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.au-guide h3 { margin-bottom: 6px; }
.au-g-b > p:not(.au-g-n) { margin: 0; max-width: 64ch; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.au-g-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.au-g-skip { margin-left: 6px; }
.au-g-dots { grid-column: 2; display: flex; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.au-g-dots li { width: 18px; height: 3px; background: var(--rule); }
.au-g-dots li.on { background: var(--brass); }

.au-note[hidden] { display: none; }
.au-note p { margin: 0; padding: 9px 12px; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.au-note p + p { margin-top: 6px; }

/* the list */
.au-home { display: grid; gap: 22px; }
.au-home[hidden], .au-edit[hidden] { display: none; }
.au-empty { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.au-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.au-rows li { border-bottom: 1px solid var(--rule); }
.au-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 6px; background: none; border: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.au-row:hover { background: var(--hover); }
.au-row > .px-ico { color: var(--green); }
.au-row-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.au-row-t b { font: 500 16px/1.25 var(--sans); }
.au-row-s { font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.au-pill { flex: none; padding: 3px 9px; border: 1px solid var(--rule); font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.au-pill.au-on { border-color: var(--green); color: var(--green); }
.au-pill.au-changed { border: 1px dashed var(--green); color: var(--green); }
.au-pill.au-draft { border-color: var(--brass); color: var(--brass-ink); }

/* the templates */
.au-tpl-s { margin: -4px 0 12px; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.au-tpls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.au-tpls li { display: flex; }
.au-tpl-b { display: grid; align-content: start; gap: 8px; width: 100%; padding: 14px 16px 16px; background: var(--paper); border: 1px solid var(--rule); text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.au-tpl-b:hover { border-color: var(--ink); }
.au-tpl-b b { font: 500 18px/1.2 var(--serif); }
.au-tpl-b > span:last-child { font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }
.au-tpl-c { display: flex; align-items: center; gap: 4px; color: var(--green); }
.au-tpl-j { width: 10px; height: 1px; background: var(--brass-line); }

/* the editor */
.au-edit { display: grid; gap: 16px; }
.au-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.au-name { flex: 1 1 220px; display: flex; }
.au-name input { flex: 1; min-width: 0; padding: 6px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--rule); font: 500 24px/1.2 var(--serif); color: var(--ink); }
.au-name input:hover { border-bottom-color: var(--field-edge); }
.au-say { margin: 0; max-width: 78ch; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.au-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }

/* the canvas: a lane per rule, its boxes in reading order with a hairline between them and the + on it; a spine down the
   lanes' left joins them into one flow, each lane hanging from it at its first box's middle (boxes are at least 104 px
   tall, lanes 14 px apart: from 52 px down one lane to 52 px down the next) */
.au-canvas { list-style: none; margin: 0; padding: 16px 16px 16px 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; background: var(--card); border: 1px solid var(--card-edge); min-height: 140px; }
.au-canvas.au-one { padding-left: 16px; }
.au-lane { position: relative; }
.au-lane-s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; }
.au-lane::before { content: ""; position: absolute; left: -18px; top: 52px; width: 18px; height: 1px; background: var(--brass-line); }
.au-lane:not(:last-child)::after { content: ""; position: absolute; left: -18px; top: 52px; bottom: -66px; width: 1px; background: var(--brass-line); }
.au-one > .au-lane::before { display: none; }
.au-step { position: relative; display: flex; align-items: center; }
.au-step:not(:first-child)::before { content: ""; flex: none; width: 18px; height: 1px; margin: 0 3px; background: var(--brass-line); }
@media (min-width: 641px) { .au-step.au-wrap::before { display: none; } }
.au-box { position: relative; display: grid; gap: 4px; align-content: start; width: 172px; min-height: 104px; padding: 10px 12px 12px; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--green); text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.au-box.au-k-do { border-top-color: var(--ink); }
.au-box.au-k-limits { border-top-color: var(--brass); }
.au-box:hover { border-color: var(--ink); }
.au-box[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--green); border-color: var(--green); }
.au-box.au-need { border-style: dashed; border-color: var(--brass); border-top-style: solid; }
.au-box-n { position: absolute; top: 8px; right: 10px; font: 500 11px/1 var(--mono); color: var(--muted); }
.au-box-k { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.au-k-when .au-box-k .px-ico { color: var(--green); }
.au-box-t { font: 500 15px/1.25 var(--sans); }
.au-box-s { font: 400 13px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.au-box-need { font: 500 12px/1.3 var(--sans); color: var(--brass-ink); }
.au-plus { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 32px; min-height: 32px; padding: 0 8px; background: var(--paper); border: 1px dashed var(--field-edge); color: var(--ink); cursor: pointer; font: 500 14px/1.2 var(--sans); }
.au-plus:hover, .au-plus[aria-expanded="true"] { border-style: solid; border-color: var(--ink); }
.au-empty-c .au-plus { min-height: 104px; padding: 0 22px; }
.au-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: grid; width: min(340px, calc(100vw - 32px)); padding: 6px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 14px 34px var(--shade); }
.au-mi { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 4px 10px; padding: 10px; background: none; border: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.au-mi:hover, .au-mi:focus-visible { background: var(--hover); }
.au-mi .px-ico { margin-top: 2px; color: var(--green); }
.au-mi-k { font: 500 11px/1.6 var(--mono); color: var(--muted); text-transform: uppercase; }
.au-mi-t { display: grid; gap: 2px; }
.au-mi-t b { font: 500 14.5px/1.3 var(--sans); }
.au-mi-t span { font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); }

/* the box panel */
.au-panel { display: grid; gap: 10px; padding: 16px 18px 18px; background: var(--paper); border: 1px solid var(--rule); }
.au-p-h { display: grid; gap: 4px; }
.au-panel h3 { margin: 0; }
.au-p-help { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.au-p-ex, .au-p-shared { margin: 0; padding: 7px 10px; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.au-f { display: grid; gap: 5px; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.au-f > label, .au-check span { font: 500 14px/1.3 var(--sans); color: var(--ink); }
/* the fields keep the house's own look (styles.css .acct input, select: their border, focus ring and refused state);
   an amount or a price has its dollar sign before it */
.au-in { display: flex; align-items: center; gap: 8px; }
.au-in > span { font: 500 16px/1 var(--sans); color: var(--ink-2); }
.au-in input { flex: 1; min-width: 0; }
.au-f select { width: 100%; }
.au-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.au-check input { width: 18px; height: 18px; accent-color: var(--green); }
.au-f-h { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); }
.au-f-x { color: var(--muted); }
.au-f-now { color: var(--green); }
.au-f-e { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--red); }
.au-f-e:empty { display: none; }
.au-f.au-bad select { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.au-rm { justify-self: start; margin-top: 4px; }

/* where Turn on is */
.au-go { display: grid; gap: 10px; justify-items: start; }
.au-go:empty { display: none; }
.au-go-l, .au-go-on { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.au-go-on { color: var(--green); font-weight: 500; }
.au-go-no { color: var(--red); }
.au-go-act { display: flex; flex-wrap: wrap; gap: 10px; }
.au-fix { display: block; max-width: 70ch; padding: 10px 14px; background: var(--paper); border: 1px dashed var(--brass); box-shadow: inset 3px 0 0 var(--brass); text-align: left; color: var(--ink); cursor: pointer; font: 400 14px/1.45 var(--sans); }
.au-fix:hover { border-style: solid; }
.au-fix b { font-weight: 600; }
.au-del { justify-self: start; }

/* the review sheet: the Desk's cards, one at a time */
html.au-lock { overflow: hidden; }
.au-sheet-w { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 16px; }
.au-sheet-w[hidden] { display: none; }
.au-scrim { position: absolute; inset: 0; background: var(--scrim); }
.au-sheet { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 20px 22px 22px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 24px 60px var(--shade); }
.au-sheet:focus { outline: none; }
.au-s-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.au-s-h h3 { margin: 0; font-size: 24px; }
.au-x { flex: none; width: 36px; height: 36px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 400 22px/1 var(--sans); cursor: pointer; }
.au-x:hover { border-color: var(--ink); }
.au-s-b { display: grid; gap: 14px; }
.au-s-say p { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.au-s-say p + p { margin-top: 4px; }
.au-s-warn { display: grid; gap: 8px; padding: 12px 14px; background: var(--card); box-shadow: inset 3px 0 0 var(--brass); }
.au-s-warn p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink); }
.au-s-warn ul { margin: 0; padding-left: 18px; font: 500 14px/1.5 var(--sans); color: var(--ink); }
.au-s-k { font-weight: 500; }
.au-s-done { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.au-s-done:empty { display: none; }
.au-s-done li { padding: 6px 10px; border-left: 2px solid var(--green); font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.au-s-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.au-card { display: grid; gap: 10px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); }
.au-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.au-card header b { flex: 1 1 auto; font: 500 21px/1.2 var(--serif); color: var(--ink); }
.au-card header span { font: 400 13px/1.2 var(--sans); color: var(--ink-2); }
.au-card-n { order: -1; flex-basis: 100%; font: 500 11.5px/1.2 var(--mono) !important; color: var(--muted) !important; text-transform: uppercase; }
.au-card dl { margin: 0; display: grid; }
.au-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-2); }
.au-card dt { font: 400 13.5px/1.35 var(--sans); color: var(--ink-2); }
.au-card dd { margin: 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink); text-align: right; }
.au-card-w { margin: 0; padding: 9px 12px; background: var(--card); box-shadow: inset 2px 0 0 var(--brass); font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.au-card-st:empty { display: none; }

@media (max-width: 900px) {
  .au-work { grid-template-columns: minmax(0, 1fr); }
}
/* a phone: the flow top to bottom, every box the column's width, the sheet from the bottom */
@media (max-width: 640px) {
  .au-title h2 { font-size: 26px; }
  .au-head-r { width: 100%; }
  .au-head-r .au-new { flex: 1; }
  .au-canvas, .au-canvas.au-one { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px 0; padding: 12px; }
  .au-lane::before, .au-lane:not(:last-child)::after { display: none; }
  .au-lane-s { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .au-step { flex-direction: column; align-items: stretch; }
  .au-step:not(:first-child)::before, .au-lane:not(:first-child) .au-step:first-child::before { content: ""; flex: none; width: 1px; height: 14px; margin: 0 auto 4px; background: var(--brass-line); }
  .au-step-p { align-items: center; }
  .au-box { width: 100%; min-height: 0; }
  .au-empty-c .au-plus { width: 100%; min-height: 88px; }
  .au-menu { left: 50%; transform: translateX(-50%); }
  .au-card dl > div { flex-wrap: wrap; }
  .au-card dd { text-align: left; }
  .au-sheet-w { place-items: end stretch; padding: 0; }
  .au-sheet { width: 100%; max-height: 88vh; padding: 18px 16px 22px; border-width: 1px 0 0; }
}