/* App additions on top of the demo stylesheet (app.css). */
.signin, .signin-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box; }
.signin-body .signin { min-height: 0; }
.signin-card { width: min(460px, 100%); gap: 18px; padding: 32px; }
.signin-card h1 { font-size: 1.75rem; }
.signin-card .form { gap: 12px; }
.signin-card form .btn { width: 100%; }
.form input[type="url"], .form input[type="tel"] { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raised); padding: 12px 16px; font-size: 1rem; min-height: 50px; box-sizing: border-box; }
.form .field { display: grid; gap: 6px; }
.form .field label { font-weight: 700; font-size: .9375rem; }
.bottom-nav.three { grid-template-columns: repeat(3, 1fr); }
.bottom-nav.four { grid-template-columns: repeat(4, 1fr); }

/* Edit on the page: the site on the left, the field and Archie on the right. */
.view.view-edit { max-width: none; }
.edit-layout { display: grid; gap: 20px; }
@media (min-width: 1100px) { .edit-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .edit-panel { position: sticky; top: 24px; } }
.edit-site { display: grid; gap: 12px; min-width: 0; }
.edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.edit-bar .select-wrap select { min-width: 220px; }
#edit-frame { width: 100%; height: calc(100vh - 170px); min-height: 520px; border: 0; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow), 0 0 0 1px var(--card-line); }
@media (max-width: 1099px) {
  #edit-frame { height: 70vh; min-height: 420px; }
  /* On phones and tablets the field opens as a sheet over the menu, with the page still in view above it. */
  #edit-field.editing { position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; max-height: 75vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-lg); animation: sheet-up .2s ease-out; }
  /* Unpublished edits: a small bar above the menu, so Publish is always in reach. */
  #edit-pending:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 32; padding: 14px 16px; gap: 10px; box-shadow: var(--shadow-lg); }
  #edit-pending .list { display: none; }
  #edit-field .row .btn, #edit-pending .row .btn { flex: 1 1 0; }
  #edit-field .row .grow, #edit-pending .row .grow { display: none; }
  .view-edit { padding-bottom: 150px; }
  body:has(.view-edit:not([hidden]) #edit-pending:not([hidden])) .toast { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 960px) and (max-width: 1099px) { #edit-pending:not([hidden]) { bottom: 16px; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #edit-field.editing { animation: none; } }
.edit-panel { display: grid; gap: 16px; align-content: start; }
/* The edit form: every field type the site's schema has, its rules, and the list the field sits in. */
.form input[type="number"] { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raised); padding: 12px 16px; font-size: 1rem; min-height: 50px; box-sizing: border-box; }
.form .field > .note { font-size: .875rem; }
.form .field .select-wrap + input { margin-top: 2px; }
.req { margin-left: 6px; font: 500 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chars { justify-self: end; font: 500 .8125rem/1 var(--mono); color: var(--muted); }
.chars.over, .field-err { color: var(--brick); }
.field-err { font-size: .9375rem; font-weight: 700; }
.form .field.invalid input, .form .field.invalid textarea, .form .field.invalid select { border-color: var(--brick); }
.onoff { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; }
.onoff input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 48px; height: 28px; margin: 0; border-radius: 14px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.onoff input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.onoff input:checked { background: var(--fern); }
.onoff input:checked::after { transform: translateX(20px); }
.onoff input:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.ef-head { display: grid; gap: 4px; }
.ef-head b { font: 700 1.125rem/1.3 var(--display); }
.list-bar { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); }
.list-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* fixed places: a button that changes its label never moves the others */
.list-acts .btn { padding: 0 12px; }
.list-acts [data-armed] { border-color: var(--brick); color: var(--brick); }
.kept { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--marigold-soft); color: var(--on-marigold-soft); font-size: .9375rem; line-height: 1.5; }
#edit-changes li.clash .d { color: var(--brick); }
@media (prefers-reduced-motion: reduce) { .onoff input, .onoff input::after { transition: none; } }
.edit-empty { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.edit-empty b { display: block; font: 700 1.125rem/1.3 var(--display); margin-bottom: 4px; }
.photo-pick { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.photo-pick img { width: 120px; height: 90px; object-fit: cover; border-radius: 12px; background: var(--line); }
.photo-do { display: grid; gap: 6px; justify-items: start; }
.photo-pick:has(input:focus-visible) .btn { outline: 3px solid var(--marigold); outline-offset: 2px; }
.list .t .thumb { display: inline-block; width: 44px; height: 33px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 10px; }
.composer-mini { padding: 18px; gap: 12px; }
.composer-mini textarea { min-height: 90px; font-size: 1rem; }
.composer-mini .btn-primary, .edit-panel .btn-primary { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.composer-mini .mic { background: var(--marigold); color: var(--on-marigold); }
a.status-line { text-decoration: none; }
a.status-line:hover span { text-decoration: underline; }
.practice-pick { display: grid; gap: 4px; }

.tasks-meter { display: flex; align-items: baseline; gap: 10px; }
.tasks-meter b { font: 700 2.5rem/1 var(--display); color: var(--dusk); }
.tasks-meter span { color: var(--muted); }

.rd-info, .rd-visual { display: grid; gap: 16px; min-width: 0; align-content: start; }
.thread { display: grid; gap: 10px; }
.msg.me { margin-left: auto; flex-direction: row-reverse; }
.msg.me p { background: var(--dusk-soft); color: var(--ink); border-radius: 18px 18px 6px 18px; }
.msg.sys { max-width: 100%; }
.msg.sys p { background: var(--sunken); color: var(--muted); font-size: .9375rem; border-radius: 12px; }
.msg .archie { flex: none; }
.plan { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.uses { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--marigold-soft); color: var(--on-marigold-soft); }
.uses b { font-family: var(--display); font-size: 1.125rem; }
.fix-area { width: 100%; min-height: 96px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--raised); padding: 12px 14px; font: inherit; font-size: 1rem; resize: vertical; box-sizing: border-box; }
.fix-area:focus { border-color: var(--dusk); outline: none; box-shadow: 0 0 0 3px var(--dusk-soft); }
.sheet-foot .grow { flex: 1; }
.preview-frame iframe { display: block; width: 100%; height: min(62vh, 620px); border: 0; background: #fff; }
.working { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 40px 20px; border-radius: var(--r-lg); background: var(--sunken); }
/* Archie's moods (see archie() in app.js). The demo's blink, and its happy eyes, still apply. */
.archie .a-bubble, .archie .a-ask, .archie .a-sparks { display: none; }
.archie .a-bubble circle:first-child, .archie .a-bubble rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; }
.archie .a-dot { fill: var(--dusk); }
.archie .a-ask circle { fill: var(--marigold); }
.archie .a-ask text { font: 700 12px/1 var(--display); fill: var(--on-marigold); }
.archie .a-sparks path { fill: var(--marigold); }
.archie.thinking, .archie.busy { transform-origin: 40% 90%; }
.archie.thinking .a-bubble, .archie.busy .a-bubble { display: inline; }
.archie.thinking { animation: sw-tilt 2.4s ease-in-out infinite; }
.archie.thinking .a-eyes { animation: sw-look-up 2.4s ease-in-out infinite; }
.archie.busy { animation: sw-bob 0.9s ease-in-out infinite; }
.archie.busy .a-eyes { animation: sw-scan 1.6s ease-in-out infinite; }
.archie .a-dot { animation: sw-dot 1.2s ease-in-out infinite; }
.archie .a-dot:nth-of-type(2) { animation-delay: .2s; } .archie .a-dot:nth-of-type(3) { animation-delay: .4s; }
.archie.asking { transform: rotate(-8deg); transform-origin: 40% 90%; }
.archie.asking .a-ask { display: inline; }
.archie.celebrate .a-happy { display: inline; } .archie.celebrate .a-eyes { display: none; }
.archie.happy, .archie.celebrate { animation: sw-hop .7s ease-out 1; }
.archie.celebrate .a-sparks { display: inline; }
.archie.celebrate .a-sparks path { transform-box: fill-box; transform-origin: center; animation: sw-spark 1.4s ease-out 2 both; }
.archie.celebrate .a-sparks path:nth-child(2n) { animation-delay: .25s; }
@keyframes sw-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes sw-look-up { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(2px, -2px); } }
@keyframes sw-scan { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes sw-bob { 50% { transform: translateY(-4px); } }
@keyframes sw-dot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes sw-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-10px); } 60% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes sw-spark { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.6); } }
.working .archie { margin-top: 18px; } /* room for the thought bubble */
@media (prefers-reduced-motion: reduce) {
  .archie.thinking, .archie.busy, .archie.happy, .archie.celebrate, .archie .a-dot, .archie .a-eyes, .archie.celebrate .a-sparks path { animation: none; }
  .archie .a-dot { opacity: 1; }
}

/* Marigold accents. Buttons and the mic are marigold with dark text: white on marigold is only 2.17:1.
   In dark mode the request heading is marigold too (never on light backgrounds, where it's too faint). */
.composer .btn-primary, #quick .btn-primary { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.composer .btn-primary:hover, #quick .btn-primary:hover { background: var(--marigold); filter: brightness(.94); }
.composer .mic { background: var(--marigold); color: var(--on-marigold); }
.composer .mic.on { background: var(--dusk); color: var(--on-dusk); } /* recording: clearly different */
:root[data-theme="dark"] .composer-top b { color: var(--marigold); text-decoration: none; }
.error-note { color: var(--brick); font-size: .9375rem; }
.empty { color: var(--muted); }
/* Request view: a wider left column, and long words (links) wrap instead of running under the preview. */
@media (min-width: 900px) { .sheet-body.split { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
.rd-info .msg p, .rd-info .plan, .rd-info .uses span { overflow-wrap: anywhere; }
.rd-info .req-head .note { min-width: 0; }

/* Request view: where it stands, what's changing, then the conversation folded away. */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.track li { display: grid; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.track li i { height: 6px; border-radius: 3px; background: var(--sunken); }
.track li.done i { background: var(--fern); }
.track li.now i { background: var(--dusk); }
.track li.now.needs i { background: var(--marigold); }
.track li.now.bad i { background: var(--brick); }
.track li.now, .track li.done { color: var(--ink); }
.state { display: grid; gap: 4px; }
.state b { font: 700 1.375rem/1.25 var(--display); letter-spacing: -0.01em; }
.state span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.state .elapsed { font-family: var(--mono); font-size: .875rem; }
.chg-card { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--raised); box-shadow: 0 0 0 1px var(--card-line); }
.chg-card > b { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chg-item { display: grid; gap: 6px; }
.chg-item .where { font-weight: 700; font-size: .9375rem; }
.chg-item .was, .chg-item .will { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.chg-item .was { background: var(--sunken); color: var(--muted); }
.chg-item .will { background: var(--fern-soft); color: var(--ink); }
.chg-item small { font: 700 .6875rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; }
.convo summary { cursor: pointer; font-weight: 700; color: var(--dusk); padding: 6px 0; }
.convo[open] summary { margin-bottom: 10px; }
.working.done b, .working.staging b { font-size: 1.25rem; }
.working.staging .btn { min-width: 240px; }
/* Phones: the two main actions side by side, Withdraw as a quiet link underneath. */
@media (max-width: 640px) {
  .sheet-foot [data-act="withdraw"] { order: 9; flex: 1 1 100%; min-height: 36px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
  .sheet-foot [data-act="open-fix"], .sheet-foot [data-act="approve"] { flex: 1 1 0; padding: 0 14px; }
}
/* Microphone: the demo's .mic button, also beside the "what to fix" box. */
.fix-mic { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; }
.composer > .record { margin-top: -6px; }
@media (prefers-reduced-motion: reduce) { .mic.on { animation: none; } }
.state > div { display: grid; gap: 4px; }
.state.with-archie { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }