/* Legacy base layer, loaded first; design.css (loaded last) overrides shared selectors. Light theme only. */
:root {
  --bg: #F4F5F3; --card: #FFFFFF; --line: #E1E4E0; --text: #15181A; --dim: #616B66;
  --acc: #0E6F5C; --acc2: #DCEFE8; --acc-ink: #0A5040;
  --warn: #8A5E12; --warn2: #F8EDD8; --bad: #A33A2B; --bad2: #F9E4E0;
  --blue: #1C4E87; --blue2: #E3ECF7; --tile: #E9EBE8;
  --field-line: #858E89;
  --on-acc: #FFFFFF; /* ink on an --acc fill */
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The first thing in <body>: off screen until a keyboard user tabs to it (UX-9). */
.skip-link {
  position: absolute; left: 16px; top: 8px; z-index: 100; transform: translateY(-200%);
  background: var(--card); color: var(--acc); font-weight: 600; text-decoration: none;
  border: 1px solid var(--field-line); border-radius: 10px; padding: calc((44px - 1.5em) / 2) 1rem;
}
.skip-link:focus { transform: none; }
/* Turbo's progress bar slides; people who asked for less motion get it without the slide (UX-22). */
@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar { transition: none !important; }
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 var(--font);
}
a { color: var(--acc); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.25rem 0 .25rem; }
h3 { font-size: 1.05rem; margin: 0; }
.dim { color: var(--dim); }

.page { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.page.wide { max-width: 1200px; }
.is-native .page { padding-bottom: 16px; }
@media (min-width: 900px) {
  .page { padding-bottom: 32px; }
}

.card, .draft {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
/* Tap targets are at least 44px tall (UX-8). The vertical padding is worked out from the
   line height, so one line of text sits centred in exactly 44px and longer text still grows. */
.button {
  display: inline-block; border: 0; border-radius: 10px; min-height: 44px; padding: calc((44px - 1.2em) / 2) 1.1rem;
  background: var(--acc); color: #fff; font: 600 1rem/1.2 var(--font);
  text-decoration: none; cursor: pointer;
}
.button:focus-visible, a:focus-visible, textarea:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}

.paste-form { display: grid; gap: .5rem; }
.paste-form label { font-weight: 600; }
textarea {
  width: 100%; min-height: 10rem; padding: .75rem; resize: vertical;
  font: 1rem/1.45 var(--font); color: var(--text); background: var(--bg);
  border: 1px solid var(--field-line); border-radius: 10px;
}
.error { background: var(--bad2); color: var(--bad); border-radius: 10px; padding: .75rem 1rem; }
.error-summary p { margin: 0; }
.error-summary ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.error-summary a, .notice a { color: inherit; text-decoration: underline; }
/* Error links and focus must land below the sticky navigation. */
.error-summary, input[id], select[id], textarea[id] { scroll-margin-top: 5rem; }
.error-summary:focus { outline: 3px solid var(--blue); outline-offset: 2px; }
.note { color: var(--warn); background: var(--warn2); border-radius: 8px; padding: .4rem .7rem; font-size: .9rem; }

.draft-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.draft-body > summary { cursor: pointer; padding: .35rem 0; overflow-wrap: anywhere; }
.draft-body[open] > summary { margin-bottom: .6rem; }
.draft-edit { color: var(--acc); text-decoration: underline; }
.preview-notes { margin: .25rem 0 .5rem; padding-left: 1.2rem; color: var(--dim); }
.price { margin: 0; font-weight: 700; white-space: nowrap; }
.price-unknown { color: var(--dim); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip { background: var(--tile); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; }
.excerpt {
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg);
  border-radius: 8px; padding: .6rem .75rem; font-size: .95rem;
}
mark.ev, q.ev { border-radius: 4px; padding: 0 .15em; color: inherit; }
q.ev { quotes: none; }
.ev-title { background: var(--acc2); }
.ev-price { background: var(--warn2); }
.ev-place { background: var(--blue2); }
.ev-category, .ev-condition { background: var(--tile); }

.fields { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fields th, .fields td { text-align: left; padding: .35rem .4rem; border-top: 1px solid var(--line); vertical-align: top; }
.fields thead th { border-top: 0; color: var(--dim); font-weight: 600; }
.fields td { overflow-wrap: anywhere; }

/* Sign-in and account pages */
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.small { font-size: .9rem; }
.stack { display: grid; gap: .5rem; margin: .75rem 0; }
.stack label { font-weight: 600; }
input[type="email"], input[type="text"], input[type="search"], input[type="date"], input[type="number"], select {
  width: 100%; min-height: 44px; padding: .7rem .75rem; font: 1rem/1.3 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--field-line); border-radius: 10px;
}
input[aria-invalid="true"] { border-color: var(--bad); }
input:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.code-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.inline-form { margin: .25rem 0 0; }
.link-button {
  background: none; border: 0; min-height: 44px; padding: calc((44px - 1.5em) / 2) 0; color: var(--acc); font: inherit;
  text-decoration: underline; cursor: pointer;
}
.button.secondary { background: var(--tile); color: var(--text); }
.button.danger { background: var(--bad); color: #fff; }
.notice { background: var(--acc2); color: var(--acc-ink); border-radius: 10px; padding: .75rem 1rem; }
.tick {
  display: inline-block; background: var(--acc2); color: var(--acc-ink); border-radius: 999px;
  padding: .05rem .55rem; font-size: .8rem; font-weight: 600; vertical-align: middle;
}
.tick::before { content: "\2713\00a0"; }
.account-line { overflow-wrap: anywhere; }
.avatar {
  width: 3rem; height: 3rem; margin: 0 0 .5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc2); color: var(--acc-ink); font-weight: 700; font-size: 1.25rem;
}
ul.plain, ol.plain { list-style: none; padding: 0; margin: .5rem 0; }
ul.plain li { padding: .35rem 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }
.danger-row { display: block; min-height: 44px; padding-block: calc((44px - 1.5em) / 2); color: var(--bad); font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Browse: tabs, area link, chips, cards (design.css styles the hero, search box, sort and map)
   ------------------------------------------------------------------------- */
.browse-search { display: flex; gap: .5rem; margin-bottom: .75rem; }
.browse-search input { flex: 1; }
@media (min-width: 900px) { .browse-search { max-width: 640px; } }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 0 0 .75rem; }
.tabs a {
  padding: .5rem 1rem; text-decoration: none; color: var(--dim); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--acc); }
.rings {
  display: flex; gap: 0; overflow-x: auto; margin: 0 0 .6rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); width: max-content; max-width: 100%;
}
.rings a {
  min-height: 44px; padding: calc((44px - 1.5em) / 2) .85rem; text-decoration: none; color: var(--text); font-size: .9rem; white-space: nowrap;
  border-radius: 999px;
}
.rings a[aria-current="true"] { background: var(--acc); color: var(--on-acc); }
@media (max-width: 420px) { .rings a { padding-inline: .55rem; font-size: .84rem; } }
/* Below 360px the rings do not fit on one line: a 2x2 grid instead of a sideways scroll (UX-20).
   Four rings, one named after a complex, already do not fit a 390px phone, so they switch at 420px. */
@media (max-width: 359px) {
  .rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; border-radius: 16px; }
  .rings a { text-align: center; white-space: normal; border-radius: 12px; }
}
@media (max-width: 420px) {
  .rings.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; border-radius: 16px; }
  .rings.four a { text-align: center; white-space: normal; border-radius: 12px; }
}
.ring-label { margin: 0 0 .5rem; font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; margin: 0 0 .75rem; }
.chip-row > a, .chip-row > details > summary {
  display: inline-block; border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 999px; min-height: 44px; padding: calc((44px - 1.5em) / 2) .75rem; font-size: .9rem;
  text-decoration: none; cursor: pointer; list-style: none;
}
.chip-row > details > summary::-webkit-details-marker { display: none; }
.chip-row > a.on, .chip-row > details.on > summary { background: var(--acc2); border-color: var(--acc); color: var(--acc-ink); }
.chip-row > details { position: relative; }
.chip-row > details[open] > .pop {
  position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 240px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .75rem;
}
.pop a { display: block; padding: .3rem 0; }
.pop form { display: grid; gap: .5rem; }
/* Filters stay in the page flow on narrow screens, including without JavaScript.
   Anchoring a 240px menu to the last chip otherwise pushes it off the screen. */
@media (max-width: 899px) {
  .chip-row > details[open] { flex-basis: 100%; min-width: 0; }
  .chip-row > details[open] > .pop {
    position: static; min-width: 0; width: 100%; margin-top: .5rem;
  }
}
.applied { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.applied a {
  background: var(--acc2); color: var(--acc-ink); border-radius: 999px; font-size: .88rem;
  min-height: 44px; padding: calc((44px - 1.5em) / 2) .7rem; text-decoration: none;
}
.applied a::after { content: "\00a0\00d7"; }
.expanded { margin: 0 0 .75rem; color: var(--dim); }
.result-line { color: var(--dim); font-size: .92rem; margin: 0 0 .5rem; }

.intro { margin: 0 0 .9rem; }
.intro-paste { display: block; background: var(--acc2); color: var(--acc-ink); border: 1px solid var(--acc); border-radius: 10px; padding: .75rem .9rem; text-decoration: none; }
.intro-paste strong { display: block; margin-bottom: .15rem; }
.intro-paste span { font-size: .92rem; }
.paste-help { margin: 0 0 .75rem; }
.paste-help summary { cursor: pointer; color: var(--acc); font-size: .92rem; }
.actions form.inline { display: inline; }
.browse-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem; margin: 1.5rem 0; }
.browse-heading > div:first-child { flex: 1 1 360px; }
.browse-heading p { margin: .5rem 0 0; max-width: 42rem; color: var(--dim); }
.browse-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.housing-filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 1.25rem; }
.housing-filters h2 { margin: 0 0 .25rem; }
.housing-filters .ring-label { font-size: .92rem; font-weight: 400; color: var(--dim); margin-bottom: 1rem; }
.housing-requests .saved-actions { justify-content: flex-start; align-items: center; margin: 1rem 0 0; }
.housing-requests .empty { text-align: left; }
.housing-requests .empty .actions { justify-content: flex-start; }
.housing-requests .empty a { overflow-wrap: anywhere; }
.housing-filters .chip-row > details:nth-last-child(-n+2) > .pop { left: auto; right: 0; }
@media (max-width: 899px) {
  .browse-heading { margin: 1.25rem 0; }
  .browse-heading > div:first-child { flex-basis: 100%; }
}

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-photo > .photo img { object-fit: contain; }
/* A listing photo's <picture> (_photo.html) leaves layout to its img, as before WebP copies. */
.photo-picture { display: contents; }
.photos-preview { width: 240px; max-width: 100%; height: 180px; object-fit: contain; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.photo-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.rooms-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .rooms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rooms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lcard {
  display: block; color: var(--text); text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.lcard:hover .lcard-title { text-decoration: underline; }
.photo {
  position: relative; aspect-ratio: 4 / 3; background: var(--tile); display: grid; place-items: center;
  color: var(--dim); font-size: .85rem;
}
.photo .placeholder { opacity: .7; }
/* No photo yet: a shorter tile that names the category or room type (UX-21). */
.photo.empty { aspect-ratio: 16 / 9; }
/* the label sits in the middle, so a Sold or Reserved band goes along the bottom */
.photo.empty .band { top: auto; bottom: 0; }
.band {
  position: absolute; left: 0; right: 0; top: 42%; padding: .3rem 0; text-align: center;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem;
  background: rgba(21, 24, 26, .78); color: #fff;
}
.band.reserved { background: rgba(138, 94, 18, .88); }
.lcard-body { padding: .55rem .7rem .7rem; display: grid; gap: .15rem; }
.lcard-title {
  font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0;
}
.lcard-price { font-weight: 700; margin: 0; }
.lcard-price.unknown { color: var(--dim); font-weight: 600; }
.lcard-rent { font-size: 1.2rem; font-weight: 700; margin: 0; }
.lcard-place, .lcard-meta { margin: 0; font-size: .88rem; color: var(--dim); }
.lcard .chips { margin: .25rem 0 0; }

.empty {
  text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 28px 16px;
}
.empty h2 { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
.button.small { padding: calc((44px - 1.2em) / 2) .9rem; font-size: .92rem; }
.button[disabled], .button.disabled {
  /* Reads as not clickable in both schemes: no fill, a dashed edge, dim ink. */
  background: transparent; color: var(--dim); border: 1px dashed var(--field-line); cursor: not-allowed;
  padding-block: calc((44px - 1.2em) / 2 - 1px);
}

/* ---------------------------------------------------------------------------
   Forms: posting, the condition ladder, radios, the rules box
   ------------------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field > label, .field > .label, fieldset > legend { font-weight: 600; }
.help { color: var(--dim); font-size: .88rem; margin: 0; }
.field .error, .form .error { padding: .4rem .7rem; font-size: .92rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.choice { display: flex; gap: .55rem; align-items: flex-start; min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.choice input { margin-top: .3rem; }
.choice span small { display: block; color: var(--dim); font-size: .85rem; }
.choices-inline { display: flex; flex-wrap: wrap; gap: .4rem; }
.choices-inline .choice { padding: .35rem .7rem; }
.money { display: flex; align-items: center; gap: .35rem; }
.money span { font-weight: 700; }
.money input { max-width: 10rem; }
.rules-box { background: var(--warn2); color: var(--text); border-radius: 10px; padding: .75rem 1rem; font-size: .92rem; }
.privacy-line { background: var(--blue2); border-radius: 10px; padding: .5rem .8rem; font-size: .92rem; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: grid; gap: .25rem; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.tile strong { font-size: 1.05rem; }
.tile span { color: var(--dim); font-size: .9rem; }
.tile.big { grid-column: 1 / -1; background: var(--acc2); border-color: var(--acc); }

/* ---------------------------------------------------------------------------
   Listing detail
   ------------------------------------------------------------------------- */
/* minmax(0, 1fr): without it the one phone column grows to fit a wide photo strip (6 photos ran 446px on a 390px screen). */
.detail { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "side" "desc"; }
.detail-photo { grid-area: photo; }
.detail-side { grid-area: side; display: grid; gap: 16px; align-content: start; }
.detail-side .card { margin: 0; }
.detail-desc { grid-area: desc; }
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "photo side" "desc side"; align-items: start; }
  .detail-side { position: sticky; top: 72px; }
}
.detail-request { max-width: 50rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "desc"; }
.detail-request .detail-side { position: static; }
.detail .photo { border-radius: var(--radius); }
.detail-price { font-size: 1.6rem; font-weight: 700; margin: 0; }
.detail h1 { margin: .15rem 0 .35rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: .5rem 0; }
.facts div { display: grid; }
.facts dt { color: var(--dim); font-size: .85rem; }
.facts dd { margin: 0; font-weight: 600; }
.transfer { background: var(--blue2); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .75rem; }
.seller-row { display: flex; align-items: center; gap: .75rem; }
.seller-row .avatar { margin: 0; flex: none; }
.seller-row p { margin: 0; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.share-row input { flex: 1 1 14rem; min-width: 0; font-size: .88rem; }
summary { cursor: pointer; min-height: 44px; padding-block: calc((44px - 1.5em) / 2); }
details.menu > summary { cursor: pointer; color: var(--dim); min-height: 44px; padding-block: calc((44px - 1.5em) / 2); }
details.menu .stack { margin-top: .5rem; }
.owner-box { border-color: var(--acc); }
.source-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border-radius: 8px; padding: .6rem .75rem; font-size: .92rem; }
.state-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.state-actions form { margin: 0; }
/* Mark sold with its optional "How did it go?" choice: the label, the select, then the button. */
.state-actions .close-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; flex-basis: 100%; }
.close-form .outcome-choice { flex-basis: 100%; font-size: .92rem; }
.close-form .outcome-select { flex: 1 1 12rem; min-width: 0; width: auto; }
.close-form .outcome-price { flex: 0 1 8rem; min-width: 0; width: auto; }
.follow-up { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.follow-up h2 { flex-basis: 100%; margin: 0; font-size: 16px; letter-spacing: 0; }
.follow-up form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.follow-up p { flex-basis: 100%; margin: 0; }

/* My listings, admin */
.mine-list { display: grid; gap: 12px; }
.mine-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.mine-row .photo { border-radius: 8px; }
.mine-row .band { top: 36%; font-size: .7rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td { text-align: left; border-top: 1px solid var(--line); padding: .45rem .35rem; vertical-align: top; }
.admin-table td { overflow-wrap: anywhere; }
/* the cell's overflow-wrap would otherwise split "Dismiss" across lines in a narrow column */
.admin-table .button { white-space: nowrap; overflow-wrap: normal; }

/* Building picker */
.pick-group { margin: 0 0 1rem; }
.pick-group h2 { font-size: 1rem; color: var(--dim); margin: .5rem 0; }
.pick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.pick-list form { margin: 0; }
.pick-row {
  width: 100%; display: flex; justify-content: space-between; gap: 1rem; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  min-height: 44px; align-items: center; padding: .6rem .75rem; font: inherit;
}
.pick-row.child { margin-left: 1.25rem; width: calc(100% - 1.25rem); }
.pick-row .count { color: var(--dim); white-space: nowrap; }
.pick-row.current { border-color: var(--acc); background: var(--acc2); }

.safety-list li { margin: .35rem 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* "This is what others will see" on the item, room and paste forms */
.public-preview { border: 1px dashed var(--line); border-radius: 10px; padding: .75rem 1rem; margin: 1rem 0; background: var(--bg); }
.preview-heading { font-size: 1rem; margin: 0 0 .5rem; }
.preview-title { font-weight: 700; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.preview-description { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .75rem; }
mark.flag { background: var(--warn2); color: var(--warn); border-radius: 4px; padding: 0 .15em; outline: 1px solid var(--warn); }

input[type="file"] { width: 100%; min-height: 44px; font: inherit; padding-block: .5rem; }

.saved-actions { margin: 1rem 0; }
.saved-actions form { margin: 0; }