/* ---------------------------------------------------------------- tokens -- */
:root {
  --bg:        #f4f7f9;
  --surface:   #ffffff;
  --surface-2: #eef3f6;
  --ink:       #0f2430;
  --ink-2:     #375063;
  --muted:     #6c8394;
  --line:      #dbe4ea;
  --accent:    #0d6e8c;
  --accent-in: #ffffff;
  --brass:     #a8752a;
  --good:      #1d7a4c;
  --bad:       #b03030;
  --shadow:    0 1px 2px rgba(15,36,48,.06), 0 8px 24px rgba(15,36,48,.06);
  --radius:    12px;
  --serif:     Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a141c;
    --surface:   #11202b;
    --surface-2: #162734;
    --ink:       #e8f0f5;
    --ink-2:     #b9cbd8;
    --muted:     #86a0b1;
    --line:      #21384a;
    --accent:    #4fb3d4;
    --accent-in: #06222e;
    --brass:     #d8a655;
    --good:      #4cc38a;
    --bad:       #e26d6d;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.1rem; }
.main { padding-top: 1.6rem; padding-bottom: 4rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- topbar -- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 500;
}
.topbar-in { display: flex; align-items: center; gap: 1.2rem; height: 58px; }
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
  text-decoration: none; letter-spacing: .01em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 22px; height: 22px; color: var(--accent); }
.topnav { display: flex; gap: 1.1rem; margin-left: auto; }
.topnav a { color: var(--ink-2); font-size: .93rem; }
.topright { display: flex; align-items: center; gap: .85rem; }
.who { font-size: .9rem; color: var(--muted); }
.lang {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 6px; padding: .18rem .42rem;
  color: var(--ink-2);
}
.lang:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.inline { display: inline; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: .93rem;
}
.linkish:hover { text-decoration: underline; }

/* ------------------------------------------------------------- trip head -- */
.triphead { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: 1.4rem; }
.triphead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.trip-title { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; }
.trip-meta { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dot { opacity: .5; }

.tabs { display: flex; gap: .2rem; margin-top: 1.1rem; overflow-x: auto; }
.tabs a {
  padding: .55rem .8rem; font-size: .92rem; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { text-decoration: none; color: var(--accent); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .18rem .45rem; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-2);
}
.badge-active  { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.badge-planned { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.badge-done    { background: var(--surface-2); color: var(--muted); }

/* ---------------------------------------------------------------- cards --- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.section-head h2 { margin: 0; }

/* ----------------------------------------------------------- definitions -- */
dl.facts { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: .35rem 1rem; margin: 0; }
dl.facts dt { color: var(--muted); font-size: .87rem; }
dl.facts dd { margin: 0; }

/* ---------------------------------------------------------------- lists --- */
.trip-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.trip-card {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: inherit;
}
.trip-card:hover { text-decoration: none; border-color: var(--accent); }
.trip-card-body { padding: 1rem 1.15rem; }
.trip-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-bottom: .2rem; }
.trip-card .when { color: var(--muted); font-size: .9rem; }
.trip-cover { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; background: var(--surface-2); }

/* --------------------------------------------------------------- tables --- */
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- forms ---- */
label { display: block; font-size: .85rem; color: var(--ink-2); margin-bottom: .25rem; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 1px; border-color: var(--accent);
}
textarea { min-height: 90px; resize: vertical; }
.field { margin-bottom: .9rem; }
.fields { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.hint { font-size: .82rem; color: var(--muted); margin-top: .25rem; font-weight: 400; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .93rem; color: var(--ink); }
/* flex-shrink, or a long label squeezes the box into an oval. */
.check input { width: auto; margin: 0; flex: 0 0 auto; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0 0 1.1rem; }
legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 0 .3rem; }

.btn {
  display: inline-block; padding: .5rem .95rem; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-in); font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-sm { padding: .3rem .6rem; font-size: .84rem; }
.actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }

/* --------------------------------------------------------------- flash ---- */
.flash { margin: 1rem 0 0; padding: .65rem .9rem; border-radius: 8px; font-size: .93rem; }
.flash-ok  { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.flash-err { background: color-mix(in srgb, var(--bad) 12%, var(--surface));  color: var(--bad);  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.error-box { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); padding: .65rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .93rem; }

/* ----------------------------------------------------------------- map ---- */
.map { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
.map-sm { height: 240px; }
.map-tall { height: 520px; }
.leaflet-container { font: inherit; background: var(--surface-2); }

/* -------------------------------------------------------------- logbook --- */
.day { border-left: 2px solid var(--line); padding: 0 0 1.8rem 1.4rem; position: relative; }
.day:last-child { padding-bottom: .4rem; }
.day::before {
  content: ""; position: absolute; left: -6px; top: .45rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface);
}
.day-date { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.day-leg { font-family: var(--serif); font-size: 1.25rem; margin: .1rem 0 .4rem; }
.day-stats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: var(--muted); margin-bottom: .5rem; }
.leg-arrow { color: var(--muted); margin: 0 .35rem; }

/* --------------------------------------------------------------- photos --- */
.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.photo-strip { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); margin-top: .6rem; }
.photo-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
/* A long passage of notes: a little more air between the lines than a label,
   and a measure short enough to read comfortably on a wide screen. */
.prose { line-height: 1.65; max-width: 62ch; }

/* Two small buttons side by side in a section heading, wrapping when narrow. */
.btn-row { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* The map's key: a dash of the colour each track is drawn in. */
.key { display: inline-block; width: 1.6rem; height: 0; vertical-align: middle;
       border-top: 2px dashed currentColor; margin-right: .15rem; }
.key-main { color: #0d6e8c; }
.key-alt  { color: #7a5ea8; }

/* A photograph placed from its clock rather than its coordinates: hollow,
   because the position is worked out rather than recorded. */
.key-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
           border: 1.5px dotted #a8752a; vertical-align: middle; margin-right: .15rem; }

/* A photograph offered for deletion: ticking it should be obvious. */
label.card.pick:has(input:checked) { border-color: var(--bad); }

figure.ph { margin: 0; }
figure.ph figcaption { font-size: .82rem; color: var(--muted); margin-top: .25rem; }
/* Who added the picture: its own line under the caption, quieter than it. */
.byline { display: block; font-size: .78rem; opacity: .8; }

/* -------------------------------------------------------------- budget ---- */
.totals { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.stat .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.45rem; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.bar { height: 6px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.bar-track { background: var(--surface-2); border-radius: 3px; overflow: hidden; height: 6px; margin-top: .3rem; }

.owes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.owes:last-child { border-bottom: 0; }
.owes .amt { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; font-size: 1.05rem; }
.arrow { color: var(--muted); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg a { padding: .3rem .7rem; font-size: .85rem; color: var(--ink-2); }
.seg a:hover { text-decoration: none; background: var(--surface-2); }
.seg a.on { background: var(--accent); color: var(--accent-in); }

/* --------------------------------------------------------------- login ---- */
.bare { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.bare-main { width: 100%; max-width: 380px; padding: 1.5rem; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.login-mark { width: 34px; height: 34px; color: var(--accent); margin-bottom: .6rem; }
.login-card h1 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }

/* ---------------------------------------------------------- back to top -- */
/* Phones only: a trip page is several screens long and the tabs live at the
   very top. Hidden until there is something to scroll back up from. */
.to-top {
  position: fixed; z-index: 450;
  right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top svg { width: 22px; height: 22px; display: block; }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:active { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* --------------------------------------------------------------- footer --- */
.foot { border-top: 1px solid var(--line); padding: 1.2rem 0; color: var(--muted); font-size: .85rem; }
.foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- misc ---- */
.empty { color: var(--muted); font-style: italic; padding: 1rem 0; }
.rowlist { display: flex; flex-direction: column; }
.rowitem { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.rowitem:last-child { border-bottom: 0; }
.rowitem .grow { flex: 1; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: .75rem; padding: .12rem .45rem; border-radius: 20px;
  background: var(--surface-2); color: var(--muted);
}
/* A category: both spellings, its position, and Save. */
.catrow { display: grid; grid-template-columns: 1fr 1fr 70px auto; gap: .5rem; align-items: center; }

/* A family and its Bulgarian spelling, side by side until there is no room. */
.famrow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.famrow input { flex: 1 1 9rem; min-width: 9rem; max-width: 280px; }
.famrow input[name="name_bg"] { max-width: 200px; }

.wp-row { display: grid; grid-template-columns: 1.3fr 9rem .7fr .7fr 1.5fr 8.5rem 4.5rem 8rem auto; gap: .4rem; margin-bottom: .5rem; align-items: start; }
.wp-row input { font-size: .88rem; }

/* The WhatsApp mark in front of a harbour master's number, in its own green so
   it reads as a badge on the number rather than as another link. */
.wa { width: 1em; height: 1em; fill: #25d366; vertical-align: -.15em; }
.wa-link { text-decoration: none; margin-right: .35em; }
.wa-link:hover .wa { fill: #1da851; }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 720px) {
  .topnav { margin-left: 0; }
  .topbar-in { gap: .7rem; }
  .who { display: none; }
  .trip-title { font-size: 1.5rem; }
  dl.facts { grid-template-columns: 1fr; gap: .1rem .5rem; }
  dl.facts dd { margin-bottom: .5rem; }

  /* All seven tabs on screen at once. Dragging the strip sideways meant the
     tab you were on could sit off the edge, so the page looked as though it
     had gone back to the overview. Nothing scrolls now, so nothing hides. */
  nav.tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
    gap: .3rem; overflow: visible; margin-top: .9rem; padding-bottom: .9rem;
  }
  nav.tabs a {
    text-align: center; white-space: normal; line-height: 1.15;
    padding: .5rem .25rem; font-size: .8rem;
    border: 1px solid var(--line); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
  }
  nav.tabs a.on {
    background: var(--accent); color: var(--accent-in);
    border-color: var(--accent); font-weight: 600;
  }

  /* A waypoint becomes a small card: two fields to a line, the notes pair and
     the delete button across the full width so nothing is left ragged. */
  .wp-row {
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line); border-radius: 10px;
    padding: .6rem; margin-bottom: .7rem;
  }
  .wp-row > div, .wp-row .wp-del { grid-column: 1 / -1; }

  /* Two 55px-wide name boxes side by side are no use to anyone. */
  .catrow { grid-template-columns: 5rem 1fr; }
  .catrow input[type=text] { grid-column: 1 / -1; }

  /* A map that fills the whole screen is worse than one you can see past, and
     a short phone deserves a shorter map than a tall one. */
  .map { height: clamp(230px, 40vh, 300px); }
  .map-sm { height: clamp(180px, 30vh, 210px); }
  .map-tall { height: clamp(280px, 45vh, 360px); }

}

/* Touch targets. A 23px sign-out link is a coin toss with a thumb. Tablets are
   wider than a phone and still driven by one, hence the pointer query. */
@media (max-width: 820px), (pointer: coarse) {
  .btn-sm { padding: .45rem .8rem; }
  .linkish { padding: .35rem 0; }
  .tabs a { padding: .65rem .8rem; }
  .to-top { display: flex; }
  input[type=checkbox], input[type=radio],
  .check input[type=checkbox], .check input[type=radio] {
    width: 20px; min-width: 20px; height: 20px;
  }
  .owes { padding: .85rem 0; }
}

/* On the narrowest phones two columns leave 70px per field, so give up and
   put one field to a line. */
@media (max-width: 430px) {
  .wp-row { grid-template-columns: 1fr; }
}

/* The top bar has to hold a longer word in Bulgarian ("Администрация" against
   "Admin"), which pushed the sign-out button off the screen. Below this width
   the two links drop to a line of their own in both languages. */
@media (max-width: 620px) {
  .topbar-in { flex-wrap: wrap; height: auto; padding-top: .45rem; padding-bottom: .2rem; }
  .brand { font-size: 1.05rem; }
  .topnav { order: 3; width: 100%; margin-left: 0; gap: 1.3rem; }
  .topnav a { padding: .25rem 0; }
  .topright { margin-left: auto; }
}

/* ------------------------------------------------- tables on a phone ----- */
/* A six-column table cannot be read on a 375px screen, and dragging it
   sideways hides half the numbers. Each row becomes a card instead, with every
   cell carrying its column heading in data-label. */
@media (max-width: 820px) {
  table.data.stack,
  table.data.stack tbody, table.data.stack tfoot,
  table.data.stack tr, table.data.stack td { display: block; width: auto; }
  table.data.stack thead { display: none; }
  table.data.stack tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: .6rem .75rem; margin-bottom: .55rem;
    background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
  }
  table.data.stack tr:last-child { margin-bottom: 0; }
  table.data.stack td {
    border: 0; padding: .12rem 0; text-align: left;
    padding-left: 0 !important;   /* beats the indent on nested budget rows */
  }
  table.data.stack td:empty { display: none; }
  table.data.stack td[data-label] {
    display: flex; gap: .9rem; justify-content: space-between; align-items: baseline;
  }
  table.data.stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: .73rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); font-weight: 600;
  }
  /* The cell that names the row: no heading, it is the heading. */
  table.data.stack td.lead { font-weight: 600; margin-bottom: .15rem; }
  table.data.stack td.idx { display: none; }
}

/* Something still has to scroll sideways now and then; say so. */
.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left,  var(--surface) 30%, transparent) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left / 10px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* ---------------------------------------------- bilingual admin fields ---- */
/* The Bulgarian companion sits under its original, tinted so the pair reads
   as one field rather than two unrelated inputs. */
.bgfield { margin-top: .3rem; position: relative; }
.bgfield::before {
  content: "БГ";
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); pointer-events: none;
}
.bgfield input, .bgfield textarea {
  padding-left: 2.1rem;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border-style: dashed;
}
.bgfield textarea { padding-left: .6rem; padding-top: 1.4rem; min-height: 70px; }
.bgfield:has(textarea)::before { top: .5rem; left: .6rem; transform: none; }