/* ARSWORD studio (/studio/): sign-in, "Situs saya", the editor and ARSWORD's order list.
   Built on the tokens of site.css, the chrome of chrome.css and the live stage of stage.css.
   The editor is a form beside the student's own site: on desktop the form column scrolls on its own beside the
   stage; below 900px the form is the page and the site opens as a full-screen sheet. */

/* ---------- account pages: one narrow column under the masthead */
.acc { padding: clamp(32px, 4.4vw, 72px) 0 var(--block); }
.acc-col { width: min(100%, 600px); }
.acc h1.phrase { max-width: 18em; font-size: clamp(2.125rem, 1.1rem + 2.9vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.acc .lede { margin-top: clamp(12px, 1.2vw, 18px); max-width: 52ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.acc-form { display: grid; gap: 16px; margin-top: clamp(28px, 3vw, 40px); }
.acc-form .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.acc-form .cta { min-width: 200px; }
.fine { margin-top: 28px; max-width: 58ch; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-3); }
.fine a { color: var(--ink-2); }
.linkish {
  padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: var(--fs-md);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer;
}
.linkish:hover { text-decoration-color: currentColor; }
.linkish[disabled] { color: var(--ink-3); text-decoration: none; cursor: default; }
.sent-to { font-size: var(--fs-md); color: var(--ink-2); }
.sent-to b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- fields (DESIGN.md: 48px, 12px radius, Line Strong border, an ink ring and halo on focus) */
.fd { display: grid; gap: 7px; min-width: 0; }
.fd > label, .fd-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.fd-hint { font-weight: 400; color: var(--ink-3); }
/* :where() keeps these low in specificity, so a special field (the name with its address) can restyle its input */
.in, .fd :where(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="color"])), .fd :where(textarea) {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas);
  color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
.fd :where(textarea) { min-height: 104px; resize: vertical; field-sizing: content; max-height: 480px; }
.in:hover, .fd :where(input, textarea):hover { border-color: var(--ink-3); }
.in:focus, .fd :where(input, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .13); }
.in::placeholder, .fd :where(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
.is-bad, .fd .is-bad { border-color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
.fd-count { justify-self: end; margin-top: -2px; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.err { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--ink); }
.err .ico { width: 16px; height: 16px; margin-top: 1px; flex: none; }
.ok-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.ok-row .ico { width: 16px; height: 16px; }

/* the 6-digit code: one field, wide letters, the phone's code suggestion fills it (autocomplete="one-time-code") */
.code-in { max-width: 260px; font-size: var(--fs-2xl) !important; font-weight: 600; letter-spacing: .4em; font-variant-numeric: tabular-nums; text-align: center; }

/* "Isi contoh": a part that is still the template's sample content, in Ink 3, never a hue */
.mark {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .01em; color: var(--ink-3); white-space: nowrap;
}

/* ---------- "Situs saya": a dashboard. A compact title with "Situs baru", the sites as cards (a scaled live preview
   over name, status, template, last change and address), then "Buat situs baru" with the templates' covers as one
   radio group, then the account. Cards and covers keep the flat ground: hairline borders, no shadow. */
.dash-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 24px; }
.dash-title { font-size: clamp(2rem, 1.4rem + 1.7vw, 2.875rem); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
.dash-sub { grid-column: 1 / -1; margin-top: 8px; max-width: 56ch; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-3); }
.dash-head .cta { flex: none; }
.dash-head .cta[hidden] { display: none; }

.sc-list {
  list-style: none; margin: clamp(24px, 2.6vw, 36px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 1.6vw, 24px);
}
.sc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); transition: border-color .2s; }
.sc:hover { border-color: var(--line-strong); }
.sc-pv { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunken); border-bottom: 1px solid var(--line); }
.sc-pv iframe {
  position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; pointer-events: none;
  transform: scale(var(--k, .25)); transform-origin: 0 0; opacity: 0; transition: opacity .4s var(--ease);
}
.sc-pv iframe.is-on { opacity: 1; }
.sc-body { display: grid; gap: 4px; padding: 16px 18px 18px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sc-top h2 { min-width: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-meta { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sc-addr { font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.sc-addr b { font-weight: 600; color: var(--ink); }
.sc-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sc-acts .cta { flex: 1 1 auto; }
.sc .sc-del { flex: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); }
.sc .sc-del.is-sure { width: auto; padding: 0 14px; border-radius: var(--r-pill); border-color: var(--ink); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.sc-empty { grid-column: 1 / -1; padding: 22px 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.sc-empty b { color: var(--ink); font-weight: 600; }
.status {
  display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.status[data-s="ordered"], .status[data-s="paid"] { border-color: var(--ink); color: var(--ink); }
.status[data-s="live"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.empty { padding: 28px 0; color: var(--ink-2); font-size: var(--fs-md); border-bottom: 1px solid var(--line); }

.dash-sec { margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(24px, 2.4vw, 32px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar) + 16px); }
.dash-sec:focus { outline: none; }
.dash-sec h2 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
.dash-note { margin-top: 6px; max-width: 60ch; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }

/* the covers: one radio group; the chosen one wears the 2px ink ring (1px border + 1px inset) and a filled dot */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: 20px; }
.pk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 10px;
  padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.pk:hover { border-color: var(--line-strong); }
.pk.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pk:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pk-pic { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--sunken); }
.pk-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.pk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pk-txt { display: grid; gap: 2px; min-width: 0; padding: 0 4px; }
.pk-txt b { font-size: var(--fs-md); font-weight: 600; }
.pk-txt small { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.pk-dot { width: 20px; height: 20px; margin: 2px 4px 0 0; border: 1.5px solid var(--ctl); border-radius: 50%; transition: border-color .2s, border-width .2s; }
.pk.is-on .pk-dot { border: 6px solid var(--ink); }
.dash-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.dash-acts .more-link { font-size: var(--fs-md); }

/* the account: hairline rows, then the delete disclosure */
.acct-rows { margin: 16px 0 0; border-top: 1px solid var(--line); }
.acct-rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.acct-rows > div[hidden] { display: none; }
.acct-rows dt { font-size: var(--fs-md); color: var(--ink-3); }
.acct-rows dd { margin: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; min-width: 0; font-size: var(--fs-md); }
.acct-rows dd > span { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }

.danger { margin-top: 24px; font-size: var(--fs-md); color: var(--ink-2); }
.danger p { margin-top: 10px; max-width: 60ch; }
.danger .cta { margin-top: 14px; }

@media (max-width: 599.98px) {
  .picks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pk { grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; padding: 8px 12px 8px 8px; }
  .pk-pic { grid-column: auto; border-radius: 8px; }
  .dash-acts .cta { width: 100%; }
  .acct-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* the template fields as a segmented switch (the gallery's .fields, two lines per segment) */
.fields button { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 54px; padding: 4px 10px; line-height: 1.25; }
.fields b { font-weight: 600; font-size: var(--fs-md); }
.fields small { font-size: var(--fs-sm); color: var(--ink-3); transition: color .2s; }
.fields button[aria-pressed="true"] small { color: var(--ink-2); }

/* ---------- the editor */
.ed-page { --bar: 60px; }
.ed-bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 0 clamp(12px, 2vw, 24px); background: var(--canvas); border-bottom: 1px solid var(--line);
}
.ed-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px;
  border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s;
}
.ed-back:hover { background: var(--sunken); color: var(--ink); }
.ed-back .ico { width: 18px; height: 18px; }
.ed-title { display: grid; justify-items: center; min-width: 0; line-height: 1.25; text-align: center; }
.ed-title b { max-width: 40ch; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-save { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--ink-3); }
.ed-save .ico { width: 14px; height: 14px; }
.ed-save.is-err { color: var(--ink); font-weight: 600; }
.ed-save button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ed-acts { justify-self: end; display: flex; align-items: center; gap: 8px; }

.ed-main { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); height: calc(100svh - var(--bar)); }
.ed-form { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px clamp(18px, 2vw, 28px) 120px; border-right: 1px solid var(--line); scrollbar-gutter: stable; }
.ed-preview { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px clamp(16px, 2vw, 28px) 18px; background: var(--panel); }
.ed-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ed-pv-bar p { font-size: var(--fs-sm); color: var(--ink-3); }
.ed-preview .stage { flex: 1 1 auto; min-height: 0; }
.ed-close { display: none; }
.ed-dock { display: none; }
.ed-loading { display: grid; place-items: center; height: calc(100svh - var(--bar)); color: var(--ink-3); font-size: var(--fs-md); }

/* form sections: disclosure rows like the package list, opening on a 0fr -> 1fr row */
.fs { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 8px); }
.fs-h { margin: 0; font: inherit; }
.fs-head {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px;
  margin: 0; padding: 18px 2px; border: 0; background: none; color: var(--ink); text-align: left;
}
.fs-t { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.fs-meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fs-chev {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2);
  transition: transform .4s var(--ease), border-color .2s, color .2s;
}
.fs-chev .ico { width: 17px; height: 17px; }
.fs-head:hover .fs-chev { border-color: var(--line-strong); color: var(--ink); }
.fs.is-open > .fs-h .fs-chev { transform: rotate(180deg); border-color: var(--ink); color: var(--ink); }
.fs-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease), visibility 0s linear .45s; }
.fs.is-open .fs-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease), visibility 0s; }
.fs-in { min-height: 0; overflow: hidden; margin: 0 -6px; padding: 0 6px; }
.fs-body { display: grid; gap: 18px; padding: 2px 0 30px; }
.fs-note { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
/* small disclosures (more social links, delete account) wear the section rows' ringed chevron, never the browser's triangle */
.more-soc summary, .danger summary { display: inline-flex; align-items: center; gap: 12px; width: fit-content; list-style: none; cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.more-soc summary::-webkit-details-marker, .danger summary::-webkit-details-marker { display: none; }
.more-soc[open] > summary .fs-chev, .danger[open] > summary .fs-chev { transform: rotate(180deg); border-color: var(--ink); color: var(--ink); }
.more-soc summary:hover .fs-chev, .danger summary:hover .fs-chev { border-color: var(--line-strong); color: var(--ink); }
.more-soc-in { display: grid; gap: 18px; padding-top: 16px; }
.fs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }

/* list entries (education, skill groups, projects): hairline-separated, never boxed */
.items { display: grid; }
.item { display: grid; gap: 16px; padding: 18px 0 22px; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 4px; }
.item-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.item-head b { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.item-head span { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-acts { display: flex; gap: 2px; margin-right: -6px; }
.ib {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-2); transition: background-color .15s, color .15s;
}
.ib:hover { background: var(--sunken); color: var(--ink); }
.ib[disabled] { color: var(--line-strong); background: none; cursor: default; }
.ib .ico { width: 18px; height: 18px; }
.add { justify-self: start; }

/* tags: chips inside a field, Enter or a comma adds one */
.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 7px 8px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas); cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tags:hover { border-color: var(--ink-3); }
.tags:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .13); }
.chip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 12px; border-radius: var(--r-pill); background: var(--sunken); font-size: var(--fs-md); max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); }
.chip button:hover { background: var(--line); color: var(--ink); }
.chip .ico { width: 14px; height: 14px; }
.tags input { flex: 1 1 8ch; min-width: 8ch; height: 32px; padding: 0 6px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; outline: none; }

/* pictures and the CV: a thumbnail, then the actions; the upload shows its progress under the thumbnail */
.media { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; }
.media-thumb { position: relative; width: 76px; height: 76px; overflow: hidden; border-radius: 12px; background: var(--sunken); }
.media-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb .ico { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; color: var(--ink-3); }
.media-thumb i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .2s; }
.media-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.media-acts .cta.sm { min-height: 38px; }
.media-name { flex-basis: 100%; font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.file-pick { position: relative; overflow: hidden; }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

/* the name: one field with the address around it */
.domain { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.domain:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .13); }
.domain input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 4px 12px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; outline: none; text-align: right; }
.domain input:focus, .domain input:hover { box-shadow: none; border: 0; } /* the wrapper carries the ring */
.domain span { display: grid; place-items: center; padding: 0 14px 0 2px; color: var(--ink-2); font-size: 1rem; white-space: nowrap; }
.domain.is-bad { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.todo li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-md); line-height: 1.45; }
.todo li::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid var(--ctl); border-radius: 50%; }
.todo button { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; white-space: nowrap; }
.todo-ok { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 600; }
.todo-ok .tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--canvas); }
.todo-ok .tick .ico { width: 12px; height: 12px; stroke-width: 3; }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.price-line b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-line span { font-size: var(--fs-md); color: var(--ink-3); }
.done { display: grid; gap: 14px; padding: 18px 20px 20px; border: 1px solid var(--ink); border-radius: var(--r-lg); }
.done h3 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.018em; }
.done p { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.done p b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.done .cta { justify-self: start; }

/* the editor on phones and small tablets: the form is the page, the site is a sheet, a dock carries both actions */
@media (max-width: 899.98px) {
  .ed-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ed-back span { display: none; }
  .ed-acts .cta { display: none; }
  .ed-main { display: block; height: auto; }
  .ed-form { overflow: visible; border-right: 0; padding: 0 var(--gutter) calc(110px + env(safe-area-inset-bottom)); }
  .ed-preview {
    position: fixed; inset: 0; z-index: 75; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--canvas);
    transform: translateY(100%); visibility: hidden;
    transition: transform .5s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .5s;
  }
  .ed-preview.is-open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
  .ed-close { display: inline-flex; }
  .ed-pv-bar p { display: none; }
  .ed-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--canvas); border-top: 1px solid var(--line);
  }
  .ed-dock .cta { flex: 1 1 0; min-height: 48px; }
  html.sheet-open { overflow: hidden; }
}
@media (max-width: 599.98px) {
  .acc-form .cta { width: 100%; }
  .fs-pair { grid-template-columns: minmax(0, 1fr); }
  .fields button { min-height: 52px; padding: 4px 6px; }
}

/* ---------- admin */
.adm { padding: clamp(28px, 3.6vw, 56px) 0 var(--block); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.adm-chips button {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent;
  font-size: var(--fs-md); font-weight: 500; color: var(--ink); transition: background-color .2s, border-color .2s, color .2s;
}
.adm-chips button:hover { border-color: var(--ink-3); }
.adm-chips button[aria-pressed="true"] { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 3vw, 48px); margin-top: 24px; align-items: start; }
.adm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.adm-list button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  margin: 0; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left;
  transition: background-color .15s;
}
.adm-list button:hover, .adm-list button[aria-current="true"] { background: var(--sunken); }
.adm-list b { font-weight: 600; overflow-wrap: anywhere; }
.adm-list small { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.adm-list .status { grid-row: 1 / span 2; grid-column: 2; }
.adm-detail { position: sticky; top: calc(var(--topbar) + 16px); display: grid; gap: 16px; }
.adm-detail .stage { height: min(56svh, 520px); }
.adm-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.adm-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.adm-facts dt { color: var(--ink-3); }
.adm-facts dd { margin: 0; overflow-wrap: anywhere; }
.adm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 899.98px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-detail { position: static; }
}

/* ---------- the privacy notice (Read): one measured column of short sections */
.legal { padding: clamp(32px, 4.4vw, 72px) 0 var(--block); }
.legal h1.phrase { max-width: 20em; font-size: clamp(2.125rem, 1.1rem + 2.9vw, 3.75rem); line-height: 1.04; letter-spacing: -.04em; }
.legal .lede { margin-top: clamp(12px, 1.2vw, 18px); max-width: 60ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-2); }
.legal section { max-width: 68ch; margin-top: clamp(32px, 3.4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.legal h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.018em; }
.legal p, .legal li { font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.legal p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration-color: var(--line-strong); }
.legal a:hover { text-decoration-color: currentColor; }

/* ---------- toast (DESIGN.md Toast) */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 440px);
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--inverse); color: var(--on-inverse); font-size: var(--fs-md); line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 14px 36px rgba(0, 0, 0, .16);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none; visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.toast .ico { width: 18px; height: 18px; }
@media (max-width: 899.98px) { .ed-page .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  .fs-panel, .fs-chev, .ed-preview, .toast, .media-thumb i { transition-duration: .01s !important; }
}