/* Her brain on this phone (native.js): SETTINGS' brain picker, the first screen's way in without a PC, the mode tag next
   to her name and its notices. Colours are her desktop theme's, from app.css. */
.native-sheet .native-modes { display: flex; gap: 8px; margin-top: 10px; }
.native-sheet .native-modes .nbtn { flex: 1 1 0; }
.native-sheet .native-modes .nbtn[aria-pressed="true"] { --face: var(--deep); --rim: var(--cyan); --ink: var(--cyan); }
.native-part { margin-top: 4px; }
.native-free { margin-top: 12px; }
.native-own-key { margin: 8px 0 0; }
.native-free-kofi a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.native-line { margin: 12px 0 0; color: var(--white); font: 500 16px/1.3 var(--ui); font-stretch: 87.5%; }
.native-note { margin: 8px 0 12px; color: var(--faint); font: 500 14px/1.3 var(--ui); font-stretch: 87.5%; }
.native-part .code-label { display: block; margin: 14px 0 8px; }
.native-pick select { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 40px 0 14px; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235ef0f6' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--white); font: 600 17px/1 var(--ui); font-stretch: 87.5%; appearance: none; -webkit-appearance: none; }
.native-pick select:focus-visible { outline: none; }
.native-pick select option { background: var(--field); color: var(--white); }
.field input.native-key { height: 48px; font-size: 16px; letter-spacing: .02em; }
.native-get { display: inline-block; margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--rule); color: var(--cyan); font: 600 14px/1.2 var(--ui); font-stretch: 87.5%; letter-spacing: .04em; text-decoration: none; }
.native-row { display: flex; gap: 8px; }
.native-row .nbtn { flex: 1 1 0; }
.native-row .nbtn[hidden] { display: none; }
.native-sheet .card-note { margin: 0 0 12px; }
.native-sheet .native-home { margin-top: 10px; }
.native-sheet .native-over { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.native-sheet .native-over[aria-pressed="false"] .tag { color: var(--faint); }
.native-sheet .native-done { margin-top: 18px; }
.native-or { margin: 16px 0 8px; color: var(--faint); font: 600 12px/1 var(--ui); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.native-start { margin-bottom: 10px; }
.top .native-mode { flex: none; margin-left: 10px; }
.top .native-mode.phone { color: var(--cyan); }
.top .native-mode.phone::before { background: rgb(94 240 246 / .55); }
.top .native-mode.phone::after { background: var(--deep); }
.native-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: max-content; max-width: min(420px, calc(100% - 32px)); margin: 0; padding: 10px 14px; transform: translateX(-50%); border-top: 1px solid var(--hot); background: var(--band); color: var(--yellow); font: 600 14px/1.25 var(--ui); font-stretch: 87.5%; text-align: center; }
.native-toast[hidden] { display: none; }
/* Her brains on the paired PC: the three rungs under BRAIN, the one in use lit cyan. */
.native-brains .native-note:first-child { margin-top: 12px; }
.native-rung { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; margin-top: 8px; padding: 10px 14px; text-align: left; }
.native-rung-name { grid-column: 1; font: 600 16px/1.1 var(--display); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.native-rung-note { grid-column: 1; color: var(--faint); font: 500 13px/1.2 var(--ui); font-stretch: 87.5%; }
.native-rung .native-saved { grid-column: 2; grid-row: 1 / span 2; }
.native-rung .native-saved[hidden] { display: none; }
.native-rung[aria-pressed="true"] { --face: var(--deep); --rim: var(--cyan); --ink: var(--cyan); }
.native-now { color: var(--faint); font-size: 14px; }
.native-now[hidden] { display: none; }
.native-send { margin-top: 10px; }
.native-brains .card-note { margin: 12px 0 0; }
/* What went wrong with her brain, at the end of the chat until her next good reply (native.js notice). */
.native-notice { align-self: stretch; margin: 0; padding: 10px 12px; border-top: 1px solid var(--hot); background: var(--band); }
.native-notice-words { margin: 0; color: var(--yellow); font: 600 14px/1.3 var(--ui); font-stretch: 87.5%; }
.native-notice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.native-notice-row .nbtn { min-height: 44px; padding: 0 14px; font-size: 14px; }
.native-notice-raw { max-height: 30vh; overflow: auto; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--faint); font: 12px/16px var(--mono); }
/* What's left of the free messages, next to THIS PHONE. */
.top .native-left { flex: none; margin-left: 6px; color: var(--cyan); }
.top .native-left::before { background: rgb(94 240 246 / .55); }
.top .native-left::after { background: var(--deep); }
.top .native-left-day { white-space: pre; }
@media (max-width: 430px) {
  .top .native-left-day { display: none; }
  .top .native-mode { margin-left: 6px; }
  .top .native-mode, .top .native-left { letter-spacing: .08em; }
  .top .native-left { margin-left: 4px; }
}
/* Under 380 px the count is worth more than THIS PHONE: the tag steps aside while it shows. */
@media (max-width: 380px) {
  .top.native-counting .native-mode { display: none; }
}
.native-line.native-free-on { color: var(--faint); }