/* ==========================================================================
   MGT2E DATAPAD — Astronav module (.astro)
   Layout, panes, bars, rows and buttons come from components.css.
   1. Map pane and bar        3. Search results
   2. Map (tiles, overlay)    4. World card
   5. Custom UWP
   ========================================================================== */

@layer modules {

  /* ---------- 1. Map pane and bar ---------- */
  .astro-chart {
    overflow: hidden;
  }

  .astro-where {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
  }

  .astro-where__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
    color: var(--c-ice-bright);
  }

  .astro-chart .bar .status {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
  }

  .astro-chart .bar__actions {
    align-items: center;
  }

  /* The menu buttons in the bar; their panels float over the map's top right corner */
  .astro-show {
    display: flex;
    gap: 6px;
    margin-right: 6px;
  }

  .astro-chart__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .astro-show__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 12px;
  }

  .astro-show__btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }

  .astro-show__btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Something differs from the defaults: an orange mark on the button */
  .astro-show__btn.is-changed::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 2px;
    background: var(--c-orange);
    box-shadow: 0 0 4px rgba(255, 138, 31, 0.7);
  }

  .astro-show__panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
    width: 440px;
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: auto;
    padding: 12px 14px;
    background: var(--surface-raised);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }

  .astro-show__panel[hidden] {
    display: none;
  }

  /* Map on the left; Worlds and Overlays stacked on the right */
  .astro-show__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
  }

  .astro-show__group:first-of-type {
    grid-row: span 2;
  }

  .astro-show__group legend {
    padding: 4px 0 2px;
  }

  .astro-show__foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--line-faint);
  }

  /* Checkbox rows, drawn like the confirm dialog's: an outlined square, filled when ticked */
  .astro-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
  }

  .astro-check input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--c-ice-dim);
    background: var(--well);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .astro-check input:hover {
    border-color: var(--c-ice);
  }

  .astro-check input:checked {
    border-color: var(--c-ice);
    background: var(--c-ice);
    box-shadow: inset 0 0 0 3px var(--c-void), var(--glow-ice);
  }

  .astro-check input:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: 2px;
  }

  /* ---------- 2. Map ---------- */
  .astro-chart__map {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #000;           /* the tiles' own black, so unloaded tiles don't flash the page grid */
    cursor: grab;
    touch-action: none;         /* the map handles its own drags */
    outline: none;
  }

  /* Over the map for a moment as the module opens (createLoadPanel in astronav.js). Clicks pass through. */
  .astro-load {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-content: center;
    justify-items: center;
    background: rgba(8, 20, 34, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--c-ice-dim);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: pre;
    pointer-events: none;
  }

  /* Each line's delay is set in createLoadPanel. */
  .astro-load__line {
    animation: astro-load-line 1ms steps(1) both;
  }

  .astro-load__line:last-child {
    margin-top: 0.3em;
    color: var(--c-green);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px var(--c-green);
  }

  @keyframes astro-load-line {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .astro-chart__map:focus-visible {
    box-shadow: inset 0 0 0 1px var(--c-ice);
  }

  .astro-map.is-dragging {
    cursor: grabbing;
  }

  .astro-map__layers,
  .astro-map__layer {
    position: absolute;
    inset: 0;
  }

  .astro-map__layer {
    transform-origin: 0 0;
  }

  .astro-map__tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 256px;
    height: 256px;
    pointer-events: none;
    user-select: none;
  }

  /* A world with a custom UWP, over the tiles (which arrive later, so document order won't do) */
  .astro-map__patch {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }

  .astro-map__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .astro-map__pick {
    fill: rgba(255, 138, 31, 0.08);
    stroke: var(--c-orange);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(255, 138, 31, 0.7));
  }

  .astro-map__route {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .astro-map__route--own {
    stroke: var(--c-orange);
    filter: drop-shadow(0 0 3px rgba(255, 138, 31, 0.7));
  }

  .astro-map__route--compare {
    stroke: var(--c-green);
    filter: drop-shadow(0 0 3px var(--c-green));
  }

  .astro-map__route--shared {
    stroke: var(--c-ice);
    filter: drop-shadow(0 0 3px var(--c-ice));
  }

  /* Each plotted route's heading in the panel is marked in the colour of its line */
  .astro-jump__block + .astro-jump__block {
    margin-top: 12px;
  }

  .astro-jump__block--own .astro-jump__sum     { border-left: 3px solid var(--c-orange); padding-left: 8px; }
  .astro-jump__block--compare .astro-jump__sum { border-left: 3px solid var(--c-green); padding-left: 8px; }
  .astro-jump__block--shared .astro-jump__sum  { border-left: 3px solid var(--c-ice); padding-left: 8px; }

  /* Route Details and Clear share a row, half each (a .btn fills its share of a row) */
  .astro-jump__actions {
    gap: 6px;
  }

  /* An empty result takes no room, so the panel's spacing doesn't leave a gap under the buttons */
  .astro-jump__result:empty {
    display: none;
  }

  .astro-jump__result > .astro-jump__note + .astro-jump__details {
    margin-top: 8px;
  }

  /* A route's heading: arrow, summary, then any tags against the right edge, all centred on one line */
  summary.astro-jump__sum {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
  }

  summary.astro-jump__sum::-webkit-details-marker {
    display: none;
  }

  summary.astro-jump__sum::before {
    content: "";
    flex: 0 0 auto;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent currentColor;
    transition: transform var(--dur) var(--ease);
  }

  .astro-jump__block[open] > summary.astro-jump__sum::before {
    transform: rotate(90deg);
  }

  .astro-jump__sum-text {
    flex: 1;
    min-width: 0;
  }

  /* No letter spacing, which would leave extra room after the last letter. Trimmed to the capitals' own height, as a
     line box leaves room below for descenders and the text then sits high. */
  .astro-jump__tag {
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid currentColor;
    font-family: var(--font-ui);
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;
  }

  .astro-jump__tag--shared {
    color: var(--c-ice);
  }

  /* Beside a stop's name in the text, a touch smaller than the tags in a route's heading */
  .astro-jump__tag--stop {
    display: inline-block;
    padding: 4px 5px;
    font-size: 0.5625rem;
    white-space: nowrap;
    vertical-align: middle;
  }

  .astro-jump__tag--waypoint {
    color: var(--c-ice);
  }

  /* Beside the Shared tag: bright while the route shows on this map, dim while it doesn't */
  .astro-jump__show {
    background: none;
    color: var(--c-text-muted);
    opacity: 0.55;
    cursor: pointer;
    touch-action: manipulation;
  }

  .astro-jump__show.is-on {
    color: var(--c-ice-bright);
    background: var(--wash-ice);
    opacity: 1;
  }

  /* Jump menu: the two ends, the rating, limits and the plotted stops */
  .astro-jump {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 380px;
  }

  .astro-jump__end {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line-faint);
    background: var(--well);
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
  }

  .astro-jump:focus {
    outline: none;   /* takes focus only so that Escape still closes it */
  }

  .astro-jump__ends {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .astro-jump__via {
    display: flex;
    gap: 6px;
  }

  .astro-jump__via .astro-jump__end {
    flex: 1;
    min-width: 0;
  }

  .astro-jump__remove {
    flex: 0 0 auto;
    align-self: stretch;
    width: 36px;
    height: auto;
    padding: 0;
    font-size: 1.1rem;
  }

  /* The + floats inside the To field, whose text stops short of it. It's a sibling, as a button can't hold a button. */
  .astro-jump__to {
    position: relative;
  }

  .astro-jump__to .astro-jump__end {
    padding-right: 44px;
  }

  .astro-jump__add {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    touch-action: manipulation;
  }

  summary.astro-jump__sum {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .astro-jump__block[open] summary.astro-jump__sum {
    margin-bottom: 6px;
  }

  .astro-jump__end.is-active {
    border-color: var(--c-orange);
  }

  .astro-jump__end.is-blank .astro-jump__world {
    color: var(--c-ice-dim);
  }

  .astro-jump__ratings {
    display: flex;
    gap: 4px;
  }

  .astro-jump__ratings.astro-jump__compare {
    gap: 2px;
    margin: 0;
  }

  .astro-jump__ratings.astro-jump__compare .astro-code {
    height: 26px;
    font-size: var(--fs-xs);
  }

  .astro-jump__compare[hidden] {
    display: none;
  }

  .astro-jump__ratings button.astro-code:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .astro-jump__ratings .astro-code {
    flex: 1;
    height: 30px;
    font-size: var(--fs-sm);
  }

  /* Two columns of three rows; the compare ratings take the last cell of the second */
  .astro-jump__limits {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
  }

  .astro-jump__limits .astro-check {
    white-space: nowrap;
  }

  .astro-jump__note {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-ice-dim);
  }

  .astro-jump__note.is-error {
    color: var(--c-red);
  }

  .astro-jump__sum {
    margin: 0 0 6px;
    font-size: var(--fs-sm);
    color: var(--c-ice-bright);
  }

  .astro-jump__stops {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .astro-jump__stop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
    border: none;
    border-top: 1px solid var(--line-faint);
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
  }

  .astro-jump__stop:hover .astro-jump__stop-name {
    color: var(--c-ice-bright);
  }

  .astro-jump__stop-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .astro-jump__leg {
    flex: 0 0 auto;
    color: var(--c-ice-dim);
  }

  /* ---------- 3. Search results ---------- */
  .astro-side__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .astro-help {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-text-muted);
  }

  .astro-results {
    flex: 0 0 auto;
    overflow: visible;
  }

  .astro-result {
    align-items: flex-start;
  }

  .astro-result__kind {
    flex: 0 0 74px;
    padding-top: 2px;
  }

  .astro-result__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .astro-result__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  /* Fan-made and other non-OTU data: listed last and dimmed */
  .astro-result.is-unofficial .row__label {
    color: var(--c-text-muted);
  }

  .astro-result:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: -1px;
  }

  /* ---------- 4. World card ---------- */
  .astro-back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 10px 12px 0;
    height: 30px;
    padding: 0 10px 0 6px;
  }

  .astro-back svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .astro-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px 18px;
    user-select: text;
  }

  .astro-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .astro-card__name {
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--c-ice-bright);
  }

  .astro-card__name.is-empty {
    color: var(--c-text-muted);
  }

  .astro-card__where {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
  }

  .astro-card__uwp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    color: var(--c-orange);
  }

  .astro-card__note {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
  }

  .astro-zone {
    padding: 2px 8px;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    border: 1px solid currentColor;
  }

  .astro-zone--amber { color: #ffc23d; }
  .astro-zone--red   { color: var(--c-red); }
  .astro-zone--custom { color: var(--c-ice); }

  .astro-uwp {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }

  .astro-uwp tr + tr {
    border-top: 1px solid var(--line-faint);
  }

  .astro-uwp th,
  .astro-uwp td {
    padding: 5px 0;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
  }

  .astro-uwp th {
    width: 24px;
    color: var(--c-orange);
  }

  .astro-uwp td.caps {
    width: 112px;
    padding-top: 7px;
  }

  .astro-uwp td:last-child {
    color: var(--c-text);
  }

  .astro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .astro-chip {
    padding: 3px 8px;
    font-size: var(--fs-xs);
    color: var(--c-text);
    background: var(--wash-ice);
    border: 1px solid var(--glass-border);
  }

  .astro-chip b {
    font-weight: normal;
    color: var(--c-ice-bright);
  }

  .astro-chip.is-raw {
    color: var(--c-text-muted);
  }

  .astro-chip.is-custom {
    border-color: var(--c-ice);
  }

  .astro-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .astro-fact {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0 12px;
    align-items: baseline;
    font-size: var(--fs-sm);
  }

  .astro-fact dd {
    overflow-wrap: anywhere;
  }

  .astro-card__source {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--c-text-muted);
  }

  .astro-card__source a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    color: var(--c-ice);
    text-decoration: none;
    letter-spacing: 0.06em;
  }

  .astro-card__source a:hover {
    color: var(--c-ice-bright);
    text-decoration: underline;
  }

  .astro-card__source svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- 5. Custom UWP ---------- */
  /* Drawn like the Manifest's Statistics: a full-width button at the foot, and a panel rising over the card
     from the dock's top edge, so the button stays visible and toggles it. The panel is placed in the pane, not the
     dock: with the on-screen keyboard up the pane is short, and the panel then scrolls instead of leaving the screen. */
  .astro-dock {
    --dock-h: 52px;
    flex: 0 0 auto;
  }

  .astro-dock[hidden],
  .astro-edit[hidden] {
    display: none;
  }

  .astro-dock__footer {
    display: flex;
    align-items: center;
    gap: 8px; /* the Referee has a second button beside Edit UWP, sharing the width */
    height: var(--dock-h);
    padding: 0 12px;
    border-top: 1px solid var(--glass-border);
  }

  .astro-edit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--dock-h);
    max-height: calc(100% - var(--dock-h));
    overflow-y: auto;
    z-index: 6;
    background: var(--surface-raised);
    border-top: 1px solid var(--glass-border-hi);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }

  .astro-edit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 12px 0;
  }

  .astro-edit__box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--well);
    border: 1px solid var(--glass-border);
  }

  .astro-edit__box--codes {
    padding: 8px 6px;
  }

  .astro-edit__box--codes .caps {
    padding-left: 2px;
  }

  .astro-edit__extras {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 0;
  }

  .astro-edit__name[hidden] {
    display: none;
  }

  .astro-edit__world {
    width: 100%;
    min-width: 0;
  }

  .astro-edit__details {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px 6px;
    padding: 10px 12px 0;
  }

  .astro-edit__details[hidden] {
    display: none;
  }

  /* 12 columns: Owner / Conflict / Invader and Bases / PBG / Worlds take 4 each, Stars and Zone 6 each,
     Ix / Ex / Cx / Nobility 3 each (set per field in astronav.js) */
  .astro-edit__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: span 4;
    min-width: 0;
  }

  .astro-edit__field--zone {
    grid-column: span 6;
  }

  /* Owner, Conflict, Invader: one row of three, the tick box level with the two text boxes */
  .astro-edit__conflict-box {
    grid-column: span 4;
    align-self: end;
    justify-content: center;
    min-height: 34px;
  }

  .astro-edit__field.is-off {
    opacity: 0.4;
  }

  .astro-card__was {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
  }

  .astro-edit__detail {
    width: 100%;
    min-width: 0;
    font-size: var(--fs-sm);
  }

  .astro-edit__detail::placeholder {
    font-size: var(--fs-xs);
  }

  .astro-edit__zones {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  /* Half a row beside Stars: small buttons, level with the Stars box */
  .astro-edit__zones .astro-code {
    width: 100%;
    height: 100%;
    min-height: 24px;
    font-size: 0.62rem;
  }

  .astro-edit__extra-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .astro-edit__extra {
    width: 100%;
    min-width: 0;
    font-size: var(--fs-sm);
  }

  .astro-codes {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1px;
  }

  .astro-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 22px;
    padding: 0;
    font-size: 0.62rem;
    color: var(--c-text-muted);
    background: transparent;
    border: 1px solid var(--line-faint);
    user-select: none;
  }

  button.astro-code {
    border-color: var(--glass-border);
    cursor: pointer;
    touch-action: manipulation;
  }

  .astro-code.is-on {
    color: var(--c-ice-bright);
    background: var(--wash-ice);
    border-color: var(--c-ice);
  }

  button.astro-code:focus-visible {
    outline: 1px solid var(--c-ice-bright);
    outline-offset: 1px;
  }

  .astro-edit:focus {
    outline: none;   /* takes focus only so that Escape and Tab start here */
  }

  @media (pointer: coarse) {
    .astro-code {
      height: 28px;   /* the width is set by the 9 columns; a fingertip gets some height at least */
    }
  }

  /* The dialog for Reset goes over the panel, which is above the rest of the pane, and sits at the bottom of the
     pane where the panel is. An auto margin rather than flex-end: a card too tall for the pane can still scroll. */
  .astro-side > .confirm {
    z-index: 7;
  }

  .astro-side > .confirm > .confirm__card {
    margin-top: auto;
  }

  .astro-edit__current,
  .astro-edit__custom {
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
    color: var(--c-ice-bright);
  }

  .astro-edit__current {
    padding: 6px 0;   /* level with the text in the box beside it */
    border: 1px solid transparent;
  }

  .astro-edit__custom {
    width: 100%;
    text-transform: uppercase;
  }

  .astro-edit__custom::placeholder {
    font-size: var(--fs-xs);
    letter-spacing: normal;
    text-transform: none;
  }

  .astro-edit__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 12px;
  }

  .astro-edit__foot .status {
    flex: 1;
    min-width: 0;
  }

  .astro-edit__foot .btn {
    flex: 0 0 80px;
  }
}