/* The emergency brake and the sending-safety gauge under the pal, the panel
   the gauge opens, the app-wide paused strip and Settings → Sending safety.
   Red is reserved for the brake, and the brake is quiet until it is needed: a
   small row with a red pause mark, the shortcut on hover. Paused is the state
   to notice, so that one is ink. The gauge is calm green, amber at a limit. */
body.pal-experience {
  --pal-brake: #d4332f; --pal-brake-ink: #b3261e; --pal-brake-soft: #fdeeed; --pal-brake-line: #f2c8c5;
  --pal-safe: #2f8a57; --pal-warn: #b06a00; --pal-warn-fill: #e09b2d; --pal-warn-soft: #fdf3e2;
}
@media(prefers-color-scheme:dark) {
  html:not([data-theme=light]) body.pal-experience:not([data-theme=light]) {
    --pal-brake: #d4332f; --pal-brake-ink: #ff9b95; --pal-brake-soft: #3a1f1e; --pal-brake-line: #6b302d;
    --pal-safe: #4cb47c; --pal-warn: #f0b04f; --pal-warn-fill: #e6a43c; --pal-warn-soft: #3a2e1a;
  }
}
html[data-theme=dark] body.pal-experience, body.pal-experience[data-theme=dark] {
  --pal-brake: #d4332f; --pal-brake-ink: #ff9b95; --pal-brake-soft: #3a1f1e; --pal-brake-line: #6b302d;
  --pal-safe: #4cb47c; --pal-warn: #f0b04f; --pal-warn-fill: #e6a43c; --pal-warn-soft: #3a2e1a;
}

/* ------------------------------------------------------------ the rail */
.pal-safety-rail { display: flex; flex-direction: column; gap: 7px; margin: -8px 0 18px; }
.pal-brake-note { display: flex; align-items: center; gap: 6px; margin: 0 2px; font: 750 11.5px/1.3 var(--font-ui); color: var(--pal-brake-ink); }
.pal-brake-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pal-brake); flex: none; }
.pal-brake-note[hidden] { display: none; }

.pal-brake {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 10px 5px 9px;
  border: 1px solid var(--pal-line); border-radius: 9px; background: transparent; color: var(--pal-ink);
  font: 600 12px/1.2 var(--font-ui); text-align: left; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pal-brake-icon { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--pal-brake); }
.pal-brake-glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pal-brake.is-paused .pal-brake-glyph { width: 12px; height: 12px; fill: currentColor; stroke-width: 1.5; }
.pal-brake-label { flex: 1; min-width: 0; }
/* The shortcut is in the tooltip; on hover or focus it shows here too. */
.pal-brake-keys { flex: none; padding: 0; border: 0; background: none; color: inherit; opacity: 0; font: 600 10.5px/1 var(--font-ui); letter-spacing: .3px; transition: opacity .12s ease; }
.pal-brake-keys[hidden] { display: none; }
.pal-brake:is(:hover, :focus-visible):not(:disabled) .pal-brake-keys { opacity: .75; }
.pal-brake:hover:not(:disabled) { background: var(--pal-brake-soft); border-color: var(--pal-brake-line); color: var(--pal-brake-ink); }
.pal-brake:active:not(:disabled) { transform: translateY(1px); }
.pal-brake:focus-visible { outline: 2px solid var(--pal-brake); outline-offset: 2px; }
/* Paused: the way back is ink, not red, so it never reads as the brake. */
.pal-brake.is-paused { background: var(--pal-ink); border-color: var(--pal-ink); color: var(--pal-paper); }
.pal-brake.is-paused .pal-brake-icon { color: var(--pal-paper); }
.pal-brake.is-paused:hover:not(:disabled) { background: var(--pal-ink); border-color: var(--pal-ink); color: var(--pal-paper); filter: brightness(1.15); }
.pal-brake:disabled { cursor: default; opacity: .55; }
.pal-brake[aria-busy=true] { opacity: .8; }

/* One line, the height of a nav item: shield, name, and on the right a green
   dot, the tightest account in amber, or Paused. */
.pal-safety-gauge {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 10px 5px 9px;
  border: 1px solid var(--pal-line); border-radius: 9px; background: transparent; color: var(--pal-ink);
  font: 600 12px/1.2 var(--font-ui); text-align: left; cursor: pointer;
}
.pal-safety-gauge:hover, .pal-safety-gauge[aria-expanded=true] { background: var(--pal-hover); }
.pal-safety-gauge:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }
.pal-safety-icon { position: relative; display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--pal-safe); }
.pal-safety-glyph { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-safety-gauge[data-tone=warn] .pal-safety-icon { color: var(--pal-warn); }
.pal-safety-gauge[data-tone=paused] .pal-safety-icon { color: var(--pal-muted); }
.pal-safety-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-safety-status { display: flex; align-items: center; gap: 5px; flex: none; margin-left: auto; font: 650 11px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pal-safety-status-text { display: inline-flex; align-items: center; gap: 4px; }
.pal-safety-status-text[hidden], .pal-safety-status-text > [hidden] { display: none; }
.pal-safety-status-mark .pal-safety-logo { flex-basis: 14px; width: 14px; height: 14px; border-radius: 3px; background: transparent; }
.pal-safety-status-mark .pal-safety-logo img, .pal-safety-status-mark .pal-safety-mail { width: 12px; height: 12px; }
.pal-safety-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--pal-safe); }
/* A word on the right replaces the dot; the collapsed rail keeps the dot, in the word's colour. */
.pal-safety-gauge:is([data-tone=warn], [data-tone=paused]) .pal-safety-dot { display: none; }
.pal-safety-gauge[data-tone=warn] .pal-safety-status { color: var(--pal-warn); }
.pal-safety-gauge[data-tone=warn] .pal-safety-dot { background: var(--pal-warn-fill); }
.pal-safety-gauge[data-tone=paused] .pal-safety-status { color: var(--pal-muted); }
.pal-safety-gauge[data-tone=paused] .pal-safety-dot { background: var(--pal-muted); }
.pal-safety-bar { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--pal-line); }
.pal-safety-fill { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: var(--pal-safe); }
.pal-safety-row:is([data-state=limit], [data-state=near]) .pal-safety-fill { background: var(--pal-warn-fill); }
.pal-safety-row[data-state=paused] .pal-safety-fill { background: var(--pal-muted); }

/* --------------------------------------------------------------- panel */
/* Compact: at most 420px and never taller than the window; the list scrolls. */
.pal-safety-panel {
  position: fixed; z-index: 70; top: 80px; left: 230px; width: 330px;
  display: flex; flex-direction: column; max-height: min(420px, calc(100vh - 16px)); overflow: hidden;
  border: 1px solid var(--pal-line); border-radius: 12px;
  background: var(--pal-elevated); color: var(--pal-ink); box-shadow: 0 14px 44px #0000002b, 0 2px 8px #00000014;
  font-family: var(--font-ui);
}
.pal-safety-panel[hidden] { display: none; }
.pal-safety-panel-head { display: flex; align-items: flex-start; gap: 10px; flex: none; padding: 11px 10px 8px 14px; border-bottom: 1px solid var(--pal-line); }
.pal-safety-panel-title { flex: 1; min-width: 0; }
.pal-safety-panel-head h2 { margin: 0; font: 750 13.5px/1.3 var(--font-ui); color: var(--pal-ink); }
.pal-safety-panel-head p { margin: 1px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--pal-muted); }
.pal-safety-close { flex: none; width: 26px; height: 26px; margin: -3px 0 0 auto; border: 0; border-radius: 7px; background: transparent; color: var(--pal-muted); font: 400 18px/1 var(--font-ui); cursor: pointer; }
.pal-safety-close:hover { background: var(--pal-hover); color: var(--pal-ink); }
.pal-safety-close:focus-visible, .pal-safety-adjust:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }
.pal-safety-accounts { display: grid; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px; }
.pal-safety-account { display: grid; }
.pal-safety-account + .pal-safety-account { border-top: 1px solid var(--pal-line); }
.pal-safety-logo { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; background: var(--pal-soft); font: 750 11px var(--font-ui); color: var(--pal-ink); }
.pal-safety-logo img { width: 14px; height: 14px; object-fit: contain; }
@media(prefers-color-scheme:dark) { html:not([data-theme=light]) body.pal-experience:not([data-theme=light]) .pal-safety-logo img[data-mono] { filter: invert(1); } }
html[data-theme=dark] .pal-safety-logo img[data-mono] { filter: invert(1); }
/* One row per account and limit: mark, name and account, count, a thin bar
   and a chip only when something is up; Raise limit sits right on a full one. */
.pal-safety-row { display: grid; margin: 2px 0; border-radius: 8px; }
.pal-safety-row.is-open { background: var(--pal-hover); }
.pal-safety-item-head { display: flex; align-items: center; gap: 6px; }
.pal-safety-toggle {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "logo label count" "logo meter meter";
  align-items: center; column-gap: 9px; row-gap: 5px; flex: 1; min-width: 0; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--pal-ink); font: inherit; text-align: left; cursor: pointer;
}
.pal-safety-toggle:hover { background: var(--pal-hover); }
.pal-safety-toggle:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: -2px; }
.pal-safety-toggle > .pal-safety-logo { grid-area: logo; }
.pal-safety-item-label { grid-area: label; display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; font-size: 12.5px; line-height: 1.25; }
.pal-safety-item-label strong { flex: none; font-weight: 650; }
.pal-safety-item-account { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--pal-muted); }
/* No room beside the name (a full row, with Raise limit): the account goes,
   rather than a lone "l…"; the row's label and its group still name it. */
.pal-safety-item-label { container-type: inline-size; }
@container (max-width: 165px) { .pal-safety-item-account { display: none; } }
.pal-safety-item-count { grid-area: count; font: 650 11.5px/1.25 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--pal-muted); white-space: nowrap; }
.pal-safety-row[data-state=limit] .pal-safety-item-count { color: var(--pal-warn); }
.pal-safety-item-meter { grid-area: meter; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pal-safety-item-meter .pal-safety-bar { flex: 1; min-width: 40px; }
.pal-safety-chip { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--pal-soft); color: var(--pal-muted); font: 700 10.5px/1.4 var(--font-ui); white-space: nowrap; }
.pal-safety-chip.is-limit, .pal-safety-tag { background: var(--pal-warn-soft); color: var(--pal-warn); }
.pal-safety-details { display: grid; gap: 4px; padding: 0 10px 9px 37px; }
.pal-safety-details[hidden] { display: none; }
.pal-safety-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pal-safety-row-count { font-size: 11.5px; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--pal-ink); }
.pal-safety-facts .pal-safety-row-source::before { content: "·"; margin-right: 6px; color: var(--pal-muted); }
/* Both computers' sends on one account: the bar's paler end, and its legend. */
.pal-safety-fill.is-split {
  --pal-safety-tone: var(--pal-safe);
  background: linear-gradient(to right, var(--pal-safety-tone) 0 calc(100% - var(--pal-safety-there, 0%)),
    color-mix(in srgb, var(--pal-safety-tone) 45%, var(--pal-elevated, #fff)) calc(100% - var(--pal-safety-there, 0%)) 100%);
}
.pal-safety-row:is([data-state=limit], [data-state=near]) .pal-safety-fill.is-split { --pal-safety-tone: var(--pal-warn-fill); }
.pal-safety-row[data-state=paused] .pal-safety-fill.is-split { --pal-safety-tone: var(--pal-muted); }
.pal-safety-split { font-size: 11.5px; line-height: 1.3; color: var(--pal-muted); font-variant-numeric: tabular-nums; }
.pal-safety-swatch { --pal-safety-tone: var(--pal-safe); display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 0; border-radius: 2px; vertical-align: middle; background: var(--pal-safety-tone); }
.pal-safety-swatch.is-there { background: color-mix(in srgb, var(--pal-safety-tone) 45%, var(--pal-elevated, #fff)); }
.pal-safety-row:is([data-state=limit], [data-state=near]) .pal-safety-swatch { --pal-safety-tone: var(--pal-warn-fill); }
.pal-safety-row[data-state=paused] .pal-safety-swatch { --pal-safety-tone: var(--pal-muted); }
.pal-safety-panel-head p.pal-safety-peer { margin-top: 3px; font-size: 11px; }
.pal-safety-next { font-size: 11.5px; color: var(--pal-muted); }
.pal-safety-row[data-state=limit] .pal-safety-next { color: var(--pal-warn); font-weight: 700; }
/* Each limit changes right here: a quiet Change limit, or Raise limit on a full one. */
.pal-safety-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.pal-safety-row-foot .pal-safety-next { min-width: 0; }
.pal-safety-change, .pal-safety-raise { flex: none; font: 650 11.5px/1.2 var(--font-ui); cursor: pointer; }
.pal-safety-change { margin-right: -6px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--pal-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--pal-line); }
.pal-safety-change:hover { background: var(--pal-paper); }
.pal-safety-raise { margin-right: 4px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--pal-warn-fill) 60%, transparent); border-radius: 7px; background: var(--pal-warn-soft); color: var(--pal-warn); font-weight: 700; white-space: nowrap; }
.pal-safety-raise:hover { border-color: var(--pal-warn-fill); }
:is(.pal-safety-change, .pal-safety-raise, .pal-safety-step, .pal-safety-edit-cancel, .pal-safety-edit-save):focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }
:is(.pal-safety-change, .pal-safety-raise)[hidden] { display: none; }
.pal-safety-edit { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border: 1px solid var(--pal-line); border-radius: 10px; background: var(--pal-paper); }
.pal-safety-edit-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pal-safety-stepper { display: flex; align-items: center; }
.pal-safety-step {
  display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 1px solid var(--pal-line);
  background: var(--pal-elevated); color: var(--pal-ink); font: 600 15px/1 var(--font-ui); cursor: pointer;
}
.pal-safety-step:hover { background: var(--pal-hover); }
.pal-safety-step.is-down { border-radius: 8px 0 0 8px; }
.pal-safety-step.is-up { border-radius: 0 8px 8px 0; }
.pal-safety-stepper input {
  width: 46px; height: 30px; padding: 0 4px; border: 1px solid var(--pal-line); border-width: 1px 0; border-radius: 0;
  background: var(--pal-paper); color: var(--pal-ink); font: 700 13px var(--font-ui); text-align: center;
  font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.pal-safety-stepper input::-webkit-inner-spin-button, .pal-safety-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.pal-safety-stepper input:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--pal-focus); outline-offset: 0; }
.pal-safety-stepper-unit { margin-left: 7px; font-size: 11.5px; color: var(--pal-muted); white-space: nowrap; }
.pal-safety-edit-hint { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--pal-muted); }
.pal-safety-edit-status { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--pal-muted); }
.pal-safety-edit-status:empty { display: none; }
.pal-safety-edit-status[data-tone=error] { color: var(--pal-brake-ink); font-weight: 650; }
.pal-safety-edit-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pal-safety-edit-cancel, .pal-safety-edit-save { padding: 5px 11px; border-radius: 7px; font: 650 12px var(--font-ui); cursor: pointer; }
.pal-safety-edit-cancel { border: 1px solid var(--pal-line); background: transparent; color: var(--pal-ink); }
.pal-safety-edit-cancel:hover { background: var(--pal-hover); }
.pal-safety-edit-save { border: 1px solid var(--pal-ink); background: var(--pal-ink); color: var(--pal-paper); }
.pal-safety-edit-save:hover:not(:disabled) { filter: brightness(1.15); }
.pal-safety-edit-save:disabled { opacity: .6; cursor: default; }
.pal-safety-empty { margin: 10px 8px; font-size: 12.5px; line-height: 1.45; color: var(--pal-muted); }
/* One line: every account against the machine-wide cap, and the way to Settings. */
.pal-safety-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; padding: 7px 8px 7px 14px; border-top: 1px solid var(--pal-line); font-size: 11.5px; color: var(--pal-muted); }
.pal-safety-adjust { flex: none; padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--pal-ink); font: 650 12px var(--font-ui); cursor: pointer; }
.pal-safety-adjust:hover { background: var(--pal-hover); }

/* -------------------------------------------------- everything is paused */

/* ------------------------------------------- Settings and Connections */
.pal-safety-limits { display: grid; margin-top: 4px; border-top: 1px solid var(--pal-line); }
.pal-safety-limit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--pal-line); }
.pal-safety-limit-copy { display: grid; gap: 3px; }
.pal-safety-limit-copy strong { font-size: 14px; color: var(--pal-ink); }
.pal-safety-limit-name { display: flex; align-items: center; gap: 9px; }
.pal-safety-limit-copy .pal-settings-help { padding-left: 31px; }
.pal-safety-mail { width: 14px; height: 14px; fill: currentColor; color: var(--pal-muted); }
.pal-safety-limit-fields { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pal-safety-number { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pal-muted); white-space: nowrap; }
/* Scoped under the form so it outranks `.pal-settings-form input`, whose
   width: 100%, 10px/12px pad and 15px type made each limit a 44px box as
   wide as its row allowed: the Email box sat 9px left of the three above. */
.pal-settings-form .pal-safety-number input, .pal-safety-number input {
  width: 64px; padding: 7px 8px; border: 1px solid var(--pal-line); border-radius: 8px;
  background: var(--pal-paper); color: var(--pal-ink); font: 650 13px var(--font-ui); text-align: right;
}
.pal-safety-number input:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 1px; }
/* Doubled class: pal-settings.css loads later and its `.pal-settings-help
   { margin: 0 }` was pulling the note up against the last row's rule. */
.pal-settings-help.pal-safety-explain { margin-top: 14px; line-height: 1.5; }
.setup[data-manage="true"] .service-row > .service-sub.pal-safety-usage { grid-row: auto; grid-column: name / end; margin-top: -1px; }
.service-sub.pal-safety-usage[data-state=limit] { color: var(--pal-warn, #b06a00); font-weight: 600; }

/* ---------------------------------------------------------- narrow */
@media (max-width: 1000px) {
  /* A narrower sidebar keeps the name whole: the dot alone, in the word's
     colour, and the account and count in the tooltip. */
  .pal-safety-status-text { display: none !important; }
  .pal-safety-gauge:is([data-tone=warn], [data-tone=paused]) .pal-safety-dot { display: block; }
}
@media (max-width: 760px) {
  .pal-safety-rail { align-items: center; gap: 6px; margin: -6px 0 14px; }
  .pal-brake-note, .pal-brake-label, .pal-brake-keys, .pal-safety-title, .pal-safety-status-text { display: none !important; }
  /* An icon like the rest of the collapsed rail: a red pause mark on the
     sidebar, the soft red only on hover. */
  .pal-brake { width: 44px; height: 34px; min-height: 34px; padding: 0; justify-content: center; }
  .pal-brake .pal-brake-glyph { width: 16px; height: 16px; }
  .pal-brake.is-paused .pal-brake-glyph { width: 14px; height: 14px; }
  /* A shield with a dot: green, amber at a limit, grey when paused. */
  .pal-safety-gauge { position: relative; width: 44px; height: 34px; min-height: 34px; padding: 0; justify-content: center; gap: 0; }
  .pal-safety-icon, .pal-safety-glyph { width: 18px; height: 18px; }
  .pal-safety-status { position: absolute; top: 6px; right: 8px; margin: 0; }
  .pal-safety-gauge:is([data-tone=warn], [data-tone=paused]) .pal-safety-dot { display: block; }
}
@media (max-width: 600px) {
  .pal-safety-limit { grid-template-columns: 1fr; gap: 10px; }
  .pal-safety-limit-fields { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .pal-brake:active:not(:disabled) { transform: none; } }

/* Why a limit is its number, in its open row: warm-up, the owner's, the default. */
.pal-safety-row-source { font-size: 11px; line-height: 1.35; color: var(--pal-muted); }
.pal-safety-total { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The machine-wide cap, full: one amber line over every account. */
.pal-safety-global { margin: 6px 2px 4px; padding: 8px 10px; border-radius: 9px; background: var(--pal-warn-soft); color: var(--pal-warn); font: 700 11.5px/1.4 var(--font-ui); }
/* "My account is already warmed up": quiet until asked, the risk said once. */
.pal-safety-warmed { margin-top: 2px; }
.pal-safety-warmed-ask { padding: 3px 0; border: 0; background: transparent; color: var(--pal-muted); font: 650 11.5px/1.3 var(--font-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pal-safety-warmed-ask:hover { color: var(--pal-ink); }
.pal-safety-warmed-ask:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; border-radius: 4px; }
.pal-safety-warmed-confirm { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--pal-line); border-radius: 10px; background: var(--pal-paper); }
.pal-safety-warmed-copy { margin: 0; font-size: 12px; line-height: 1.4; color: var(--pal-ink); }
.pal-safety-warmed-warning { display: flex; gap: 6px; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--pal-warn); font-weight: 600; }
.pal-safety-warmed-warning::before { content: "!"; display: grid; place-items: center; flex: 0 0 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: var(--pal-warn-soft); font-weight: 800; font-size: 10px; }

/* ------------------------------------------------ other websites */
/* The owner's own limits for the sites agents act on: rows like the limits
   above, a letter tile where the app ships no logo, and the add flow. */
/* Inputs here are 10px round, a step under the 12px cards they sit on. */
.pal-settings-form .pal-safety-number input:not([type=checkbox]), .pal-safety-number input { border-radius: 10px; }
.pal-safety-site-logo[data-letter] { background: var(--pal-soft); color: var(--pal-ink); font: 750 11px/1 var(--font-ui); }
.pal-safety-sites { display: grid; gap: 4px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--pal-line); }
.pal-safety-sites-title { margin: 0; font: 650 15px/1.4 var(--font-ui); color: var(--pal-ink); }
.pal-safety-site-list { margin-top: 10px; }
.pal-safety-site-empty { padding: 14px 0; border-bottom: 1px solid var(--pal-line); }
.pal-safety-limit-fields { align-items: center; }
.pal-safety-site-remove {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: -2px; padding: 0;
  border: 0; border-radius: var(--radius-btn, 8px); background: transparent; color: var(--pal-muted);
  font: 400 19px/1 var(--font-ui); cursor: pointer;
}
.pal-safety-site-remove:hover { background: var(--pal-hover); color: var(--pal-ink); }
.pal-safety-site-remove:focus-visible, .pal-safety-add-open:focus-visible, .pal-safety-site-choice:focus-visible, .pal-safety-kind:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }
.pal-safety-site-remove:disabled { opacity: .5; cursor: default; }
.pal-safety-add-open { justify-self: start; margin-top: 14px; }
.pal-safety-add-open[hidden] { display: none; }
.pal-safety-add { display: grid; gap: 8px; margin-top: 14px; padding: 16px; border: 1px solid var(--pal-line); border-radius: var(--radius-card, 12px); background: var(--pal-elevated); }
.pal-safety-add[hidden] { display: none; }
.pal-safety-add-label { margin: 4px 0 0; font: 600 13px/1.4 var(--font-ui); color: var(--pal-ink); }
.pal-safety-add-label:first-child { margin-top: 0; }
.pal-safety-site-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pal-safety-site-choice {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 6px 9px;
  border: 1px solid var(--pal-line); border-radius: 10px; background: var(--pal-paper); color: var(--pal-ink);
  font: 600 12.5px/1.2 var(--font-ui); text-align: left; cursor: pointer;
}
.pal-safety-site-choice span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-safety-site-choice:hover:not(:disabled) { background: var(--pal-hover); }
.pal-safety-site-choice[aria-checked=true] { border-color: var(--pal-ink); box-shadow: inset 0 0 0 1px var(--pal-ink); }
.pal-safety-site-choice:disabled { opacity: .45; cursor: default; }
.pal-safety-add-field { display: grid; gap: 6px; margin-top: 4px; }
.pal-safety-add-field-label { font-size: 12.5px; color: var(--pal-muted); }
.pal-settings-form .pal-safety-add-field input:not([type=checkbox]) { max-width: 320px; padding: 8px 11px; border-radius: 10px; font-size: 14px; }
.pal-safety-add-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--pal-muted); }
.pal-safety-add-note:empty { display: none; }
.pal-safety-add-note[data-tone=error] { color: var(--pal-brake-ink); font-weight: 600; }
.pal-safety-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-safety-kind {
  min-height: 32px; padding: 5px 12px; border: 1px solid var(--pal-line); border-radius: var(--radius-btn, 8px);
  background: var(--pal-paper); color: var(--pal-ink); font: 600 12.5px/1.2 var(--font-ui); cursor: pointer;
}
.pal-safety-kind:hover:not(:disabled) { background: var(--pal-hover); }
.pal-safety-kind[aria-checked=true] { border-color: var(--pal-ink); background: var(--pal-ink); color: var(--pal-paper); }
.pal-safety-kind:disabled { opacity: .45; cursor: default; }
.pal-safety-add-numbers { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; }
.pal-safety-add-hint { font-size: 12px; }
.pal-safety-add .pal-safety-edit-actions { margin-top: 4px; }
.pal-safety-add .pal-safety-edit-cancel, .pal-safety-add .pal-safety-edit-save { padding: 7px 14px; border-radius: var(--radius-btn, 8px); font-size: 13px; }
@media (max-width: 600px) {
  .pal-safety-site-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}