/* Innkaupalistinn — "Ís á djúpu hafi", the design system on the Hönnunarkerfi
   artboard. Deep ocean ground with a faint grid, ice-white cards for content,
   Georgia for what is read at a glance, Inter for everything else.
   Class names are the artboards' own, so the next design pass reads as a diff.

   One palette. There is no light variant: inverting this would be a different
   design, so the page declares itself dark and stays dark. */

:root {
  --deep:     #061a2f;   /* ground, top                      */
  --ocean:    #0a3457;   /* ground, bottom · dark button     */
  --ice:      #edf8ff;   /* text on ground · primary button  */
  --card:     rgba(247,252,255,.97);
  --ink:      #0b1d2b;   /* text on a card                   */
  --ink-2:    #3b5262;   /* body copy on a card              */
  --muted:    #506675;   /* secondary text on a card         */
  --fog:      #91afbe;   /* secondary text on the ground     */
  --haze:     #cfe8f4;   /* tertiary text on the ground      */
  --accent:   #0d78af;   /* labels, progress                 */
  --glacier:  #73c8e9;   /* rule beside the wordmark         */
  --swatch:   #e7f2f8;   /* tint inside a card               */
  --hair:     rgba(9,47,76,.1);    /* rule inside a card     */
  --hair-up:  rgba(255,255,255,.1);/* rule on the ground     */
  --edge:     rgba(255,255,255,.18);
  --warn:     #fbe3ad;  --warn-ink: #4a3205;
  --bad:      #fde4e1;  --bad-ink:  #8f2a22;
  --ok:       #dcefe3;  --ok-ink:   #1f5f35;
  --live:     #4fb36d;
  --serif:    Georgia, "Times New Roman", serif;
  --tap:      44px;
  --pad:      16px;
  --col:      480px;    /* the phone column, capped for wider screens */
}

* { box-sizing: border-box; }

/* The ground is painted on the root and fixed, so it covers the viewport
   however short the page is and stays put while the content scrolls over it.
   On <body> it would stop where the content stops. */
html {
  background:
    radial-gradient(circle at 15% 8%, rgba(38,155,205,.30), transparent 22rem),
    linear-gradient(160deg, var(--deep), var(--ocean)) var(--deep);
  background-attachment: fixed;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ice);
  font: 500 16px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* The grid is decoration and must never take a tap. It fades out downwards,
   the same mask as the artboards. */
.gridbg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .33;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(black, transparent 70%);
          mask-image: linear-gradient(black, transparent 70%);
}

body.locked { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--glacier); }
a:hover { color: #9edffa; }

.sv { fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }

.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ layout */

#app {
  position: relative; z-index: 1;
  max-width: var(--col); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 24px) var(--pad) 140px;
  display: flex; flex-direction: column; gap: 14px;
}
#app.loading::after {
  content: ""; display: block; width: 26px; height: 26px; margin: 22vh auto 0;
  border: 2px solid var(--edge); border-top-color: var(--glacier);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar { display: flex; justify-content: space-between; align-items: center;
       gap: 12px; min-height: var(--tap); }

.mark {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(237,248,255,.76); text-decoration: none; min-width: 0;
}
.mark::before { content: ""; width: 24px; height: 2px; background: var(--glacier); flex: none; }
.mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon {
  width: var(--tap); height: var(--tap); border-radius: 13px;
  border: 1px solid var(--edge); background: rgba(255,255,255,.07);
  color: var(--ice); display: grid; place-items: center; flex: none;
  text-decoration: none;
}
.icon:active { background: rgba(255,255,255,.14); }

.title {
  margin: 6px 0 4px; font-family: var(--serif); font-size: 40px; font-weight: 500;
  letter-spacing: -.05em; line-height: 1; overflow-wrap: anywhere;
}
.status { margin: 0; font-size: 12.5px; color: var(--fog);
          display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block;
       flex: none; background: var(--live); }
.dot.flight { background: var(--glacier); }

.lbl { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .17em;
       text-transform: uppercase; color: #83b5cc; }
.lbl-ink  { color: var(--muted); }
.lbl-blue { color: var(--accent); }
.lbl-bad  { color: var(--bad-ink); }

.sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fog); }

.textbtn {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px;
  color: var(--haze); font-size: 14px; font-weight: 700; padding: 0 4px;
  text-decoration: none; align-self: center; flex: none;
}
.textbtn.danger { color: var(--bad-ink); }

/* --------------------------------------------------------------------- tabs */

nav.tabs {
  display: flex; gap: 4px; padding: 4px; border: 1px solid var(--edge);
  border-radius: 999px; background: rgba(255,255,255,.07);
}
nav.tabs a {
  flex: 1; min-height: 38px; display: flex; align-items: center;
  justify-content: center; border-radius: 999px; font-size: 12.5px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--haze); text-decoration: none;
}
nav.tabs a[aria-current="page"] {
  background: var(--ice); color: var(--ink); box-shadow: 0 5px 13px rgba(0,10,24,.25);
}
.tbadge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding: 0 5px; margin-left: 7px; border-radius: 999px;
  background: #f5b941; color: var(--warn-ink); font-size: 11px; letter-spacing: 0;
}

/* -------------------------------------------------------------------- cards */

/* Two card kinds, and they mean different things: an ice card is content you
   read, a ghost card is furniture on the ground. */
.ice {
  border-radius: 22px; background: var(--card); color: var(--ink);
  padding: 4px 16px; text-decoration: none; display: block;
}
.ice.pad { padding: 16px; }
.ice.flat { border-radius: 20px; }
.card {
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  background: rgba(255,255,255,.06); padding: 16px;
}

.listcard {
  border-radius: 22px; background: var(--card); color: var(--ink);
  padding: 18px 18px 16px; text-decoration: none; display: block;
}
.listcard.live { box-shadow: 0 24px 64px rgba(0,10,24,.3); }
.listcard h2 {
  margin: 8px 0 6px; font-family: var(--serif); font-size: 30px; font-weight: 500;
  letter-spacing: -.04em; line-height: 1; overflow-wrap: anywhere;
}
.listcard .meta { margin: 0; font-size: 13px; color: var(--muted); }
.listcard footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: 12.5px; color: var(--muted);
}
.listcard footer .chev { color: var(--ocean); flex: none; }
.listcard footer time { flex: none; }

.hero {
  border-radius: 26px; background: var(--card); border: 1px solid rgba(255,255,255,.72);
  color: var(--ink); padding: 26px 24px 24px; box-shadow: 0 32px 96px rgba(0,10,24,.35);
  display: flex; flex-direction: column; gap: 16px;
}
.hero h1 {
  margin: 0; font-family: var(--serif); font-size: 52px; font-weight: 500;
  line-height: .92; letter-spacing: -.055em;
}
.hero p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* -------------------------------------------------------------------- items */

ul.list, ol.list { list-style: none; margin: 0; padding: 0; }
/* `ul.list` is more specific than `.ice`, so an ice card that is also a list
   loses its side padding unless it is named here: rows would touch the edge. */
.ice.list { padding: 4px 16px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none;
}
.row:first-child, .row.first { border-top: 0; }
/* Tapping the row is the same +1 as its button, so no keyboard path is lost
   by the row itself not being focusable. */
.row.tap { cursor: pointer; }
.row.tap:active { background: rgba(9,47,76,.06); }

.thumb {
  width: 46px; height: 46px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--swatch); color: #6b8696; display: grid; place-items: center;
}
.thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.nm { flex: 1; min-width: 0; }
.nm b { display: block; font-weight: 650; font-size: 15px; line-height: 1.25;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The stepper is the control the whole app turns on, so both halves get a
   full 44px target even though the painted square is 32. */
.step { display: flex; align-items: center; flex: none; }
.sb { width: var(--tap); height: var(--tap); padding: 0; display: grid;
      place-items: center; color: var(--ocean); }
.sb span { width: 32px; height: 32px; border-radius: 10px; background: var(--swatch);
           display: grid; place-items: center; }
.sb:active span { background: #d6e7f0; }
.sn { min-width: 20px; text-align: center; font-weight: 750; font-size: 15px;
      font-variant-numeric: tabular-nums; }

.add { width: var(--tap); height: var(--tap); padding: 0; display: grid;
       place-items: center; color: #fff; flex: none; }
.add span { width: 34px; height: 34px; border-radius: 11px; background: var(--ocean);
            display: grid; place-items: center; }
.add:active span { transform: scale(.94); }
/* Explicit, because a `display` here would outrank the UA's [hidden] rule and
   leave the control clickable while invisible. */
.add[hidden], .step[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none;
}
.chip.warn { background: var(--warn); color: var(--warn-ink); }
.chip.bad  { background: var(--bad);  color: var(--bad-ink); }
.chip.ok   { background: var(--ok);   color: var(--ok-ink); }
.chip.blue { background: var(--swatch); color: var(--ocean); }
.chip.dark { background: rgba(255,255,255,.1); color: var(--haze);
             border: 1px solid var(--edge); }

.av {
  width: 36px; height: 36px; border-radius: 999px; background: var(--ocean);
  color: var(--ice); display: grid; place-items: center; overflow: hidden;
  font-family: var(--serif); font-size: 15px; flex: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.big { width: 42px; height: 42px; font-size: 17px; }
.av.pending { background: none; border: 1.5px dashed #6b8696; color: var(--muted); }
.av.small { width: 28px; height: 28px; font-size: 13px; }

/* ------------------------------------------------------------------ picker */

/* `name` on <details> makes the browser close the others, so one group is open
   at a time with no bookkeeping in the client. */
details.group { margin: 0; }
details.group + details.group { margin-top: 8px; }
details.group summary {
  display: flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 0 16px; cursor: pointer; list-style: none;
  background: var(--card); color: var(--ink); border-radius: 16px;
  font-weight: 650; font-size: 15px;
}
details.group summary::-webkit-details-marker { display: none; }
details.group summary .n { display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-weight: 600; font-size: 13px; flex: none;
  font-variant-numeric: tabular-nums; }
details.group[open] summary {
  background: var(--swatch); font-weight: 700;
  border-radius: 20px 20px 0 0;
}
details.group[open] summary .n { color: var(--ocean); }
details.group ul.list {
  background: var(--card); border-radius: 0 0 20px 20px; padding: 2px 14px;
}

/* The search sits in the bottom bar: it is the one field you reach for with a
   thumb, and the design keeps it out of the scrolling area for that reason. */
.sfield {
  display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%;
  padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(6,26,47,.72); color: var(--haze);
}
.sfield input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 15.5px; color: var(--ice);
}
.sfield input::placeholder { color: var(--fog); }

/* ---------------------------------------------------------------- bottom bar */

.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 28px var(--pad) calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(8,40,68,0), var(--ocean) 38%);
  display: flex; justify-content: center; pointer-events: none;
}
.bottom > * { max-width: var(--col); width: 100%; pointer-events: auto; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 18px; border-radius: 14px; width: 100%;
  font-size: 15.5px; font-weight: 750; text-decoration: none;
}
.btn-ice   { background: var(--ice); color: var(--ink);
             box-shadow: 0 14px 34px rgba(0,10,24,.35); }
.btn-white { background: #fff; color: var(--ink); }
.btn-ocean { background: var(--ocean); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--ice);
             border: 1px solid rgba(255,255,255,.25); }
.btn:active { filter: brightness(.94); }
.btn[disabled] { opacity: .5; box-shadow: none; filter: none; }
.btn .count { font-weight: 600; color: var(--muted); }

/* ----------------------------------------------------------------- progress */

/* p.bigcount, not .bigcount: inside a .hero it would otherwise lose to
   `.hero p`, which is the same specificity and sets 15.5px body copy. */
p.bigcount {
  margin: 10px 0 8px; font-family: var(--serif); font-size: 60px; font-weight: 500;
  line-height: .9; letter-spacing: -.05em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
p.bigcount small { font-size: 30px; color: var(--muted); letter-spacing: -.03em; }
.meter { margin-top: 16px; height: 6px; border-radius: 6px;
         background: rgba(13,120,175,.16); overflow: hidden; }
.meter div { height: 100%; border-radius: 6px; background: var(--accent);
             transition: width .3s; }

.mark-ok, .mark-bad, .mark-run, .mark-wait {
  width: 28px; height: 28px; border-radius: 999px; display: grid;
  place-items: center; flex: none;
}
.mark-ok  { background: var(--ok);  color: var(--ok-ink); }
.mark-bad { background: var(--bad); color: var(--bad-ink); }
.mark-run { border: 3px solid rgba(13,120,175,.2); border-top-color: var(--accent);
            animation: spin .8s linear infinite; }
.mark-wait { border: 1.5px dashed rgba(9,47,76,.25); }
.line { display: flex; align-items: center; gap: 12px; min-height: 46px;
        border-top: 1px solid var(--hair); color: var(--ink); }
.line:first-child { border-top: 0; }
.line.wait { color: #8aa0ad; }
.line b { flex: 1; font-weight: 650; font-size: 14.5px; }
.line b span { color: var(--muted); font-weight: 600; }
/* Why a line did not make it, under its name, once the run has stopped. The
   row is otherwise the same row it was while sending. */
.line b small.why {
  display: block; margin-top: 1px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}

/* ------------------------------------------------------------------- saga */

ol.saga {
  list-style: none; margin: 6px 0 0 8px; padding: 0;
  border-left: 2px solid rgba(115,200,233,.5);
}
ol.saga > li { position: relative; padding: 0 0 22px 22px; }
ol.saga > li::before {
  content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px;
  border-radius: 999px; background: var(--ocean); border: 2px solid var(--glacier);
}
ol.saga time { display: block; font-size: 12px; font-weight: 700; color: var(--fog);
               font-variant-numeric: tabular-nums; }
ol.saga h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 22px;
             font-weight: 500; letter-spacing: -.03em; }
ol.saga .ice { margin-top: 10px; }
.asked { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
         border-top: 1px solid var(--hair); color: var(--ink); }
.asked:first-child { border-top: 0; }
.asked b { flex: 1; font-weight: 650; font-size: 14.5px; }
.asked span { font-size: 13px; color: var(--muted); }

/* A flat event log is still the truthful fallback when a trip has no shape. */
ol.log { list-style: none; margin: 0; padding: 0; }
ol.log li { display: flex; gap: 10px; padding: 9px 0; align-items: baseline;
            border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink); }
ol.log li:first-child { border-top: 0; }
ol.log time { flex: 0 0 74px; color: var(--muted); font-size: 12px;
              font-variant-numeric: tabular-nums; }
ol.log .who { color: var(--muted); }

/* ------------------------------------------------------------------ writing */

.notebox {
  border-radius: 20px; background: var(--card); color: var(--ink);
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px;
}
.notebox header { display: flex; align-items: center; gap: 10px; }
.notebox header b { flex: 1; font-weight: 650; min-width: 0; }
.notebox header b span { font-weight: 500; color: var(--muted); }
.notebox header time { font-size: 12px; color: var(--muted); flex: none; }
.notebox textarea {
  display: block; width: 100%; resize: none; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(9,47,76,.18); background: #fff; font-size: 15px;
  line-height: 1.5; color: var(--ink);
}
.notebox p.said { margin: 0; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.notebox p.hint { margin: 0; font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px;
         color: var(--haze); }
.field input {
  min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: var(--ice); font-size: 15px;
}
.field input::placeholder { color: var(--fog); }

.note {
  margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--swatch);
  font-size: 13px; line-height: 1.5; color: var(--ocean);
}

/* ------------------------------------------------------- drawer, sheet, toast */

/* :not([hidden]) is load-bearing on both of these. A bare `display` here
   outranks the UA's `[hidden] { display: none }`, which leaves a full-viewport
   overlay painted and hit-testable at all times: the page dims slightly and
   every tap lands on the backdrop instead of the control underneath. */
#drawer, #sheet { position: fixed; inset: 0; z-index: 50; background: rgba(3,12,22,.6); }
#drawer:not([hidden]) { display: block; }
#sheet:not([hidden]) { display: flex; align-items: flex-end; justify-content: center; }

#drawer nav {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(310px, 86vw);
  background: var(--deep); border-left: 1px solid rgba(255,255,255,.14);
  padding: calc(env(safe-area-inset-top) + 24px) var(--pad)
           calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  animation: slide .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes slide { from { transform: translateX(16px); opacity: .4; } }
/* A menu row. It appears on the dark ground (the drawer) AND on a light card
   (a sheet), so it names no foreground of its own: it inherits, and derives
   its hairline, its secondary line and its pressed state from whatever it
   inherited. The drawer gets body's ice, a sheet gets the panel's ink, and
   neither has to be remembered.

   This is written out because the stylesheet has now produced three white-on-
   white bugs — this row in the language sheet, the consent checkbox, and a
   label colour — each from a component that declared a colour suited to one
   of the two grounds. Deriving from currentColor is the fix that does not
   need anybody to notice. */
.mi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 62px; padding: 8px 4px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  color: inherit; text-align: left; text-decoration: none;
}
.mi b { display: block; font-weight: 650; font-size: 16px; }
.mi small {
  display: block; font-size: 12.5px; margin-top: 2px;
  color: color-mix(in srgb, currentColor 62%, transparent);
}
.mi:active { background: color-mix(in srgb, currentColor 7%, transparent); }
/* A sheet's first row sits directly under its title and needs no rule above. */
#sheet .mi:first-child { border-top: 0; }

#sheet .panel {
  background: var(--card); color: var(--ink); width: 100%; max-width: var(--col);
  border-radius: 22px 22px 0 0;
  padding: 10px var(--pad) calc(22px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column; gap: 12px;
}
@keyframes rise { from { transform: translateY(14px); opacity: .5; } }
#sheet .grab { width: 38px; height: 4px; border-radius: 2px;
               background: rgba(9,47,76,.2); margin: 4px auto 2px; }
#sheet h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500;
            letter-spacing: -.04em; }
#sheet p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
/* :not([type="checkbox"]) is load-bearing. `#sheet input` is (1,0,1) and
   outranks `.check input[type="checkbox"]` at (0,2,1), so without it the
   consent box is stretched to 100% width and 50px tall and its label is
   pushed clean off the sheet. Narrowing the selector fixes the cause; raising
   the other rule's specificity would only have moved the trap. */
#sheet input:not([type="checkbox"]), #sheet .textin {
  min-height: 50px; padding: 0 14px; border-radius: 12px; width: 100%;
  border: 1px solid rgba(9,47,76,.18); background: #fff; color: var(--ink);
  font-size: 16px;
}
#sheet .out { font-size: 13px; color: var(--muted); word-break: break-all; }

#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60;
  background: var(--ice); color: var(--ink); padding: 11px 16px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(0,10,24,.45);
  max-width: 90vw; text-align: center;
}

/* ------------------------------------------------------------------- empty */

.blank { text-align: center; padding: 40px 20px; }
.blank h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px;
            font-weight: 500; letter-spacing: -.03em; }

/* ------------------------------------------------- added by multi-tenancy
   Four things the single-household version had no screens for: the store a
   list is for, who you are signed in as, a consent checkbox, and a select. */

/* The store, named, on a list card and in a list header. Not a chip: it is
   part of the sentence, and a chip would compete with "in flight". */
.store { font-weight: 700; color: var(--glacier); }
.meta .store { color: var(--haze); }
.status .store { color: var(--glacier); }

/* Who you are signed in as, at the top of the account drawer. Three lines,
   because the email is the line that actually disambiguates two accounts and
   it must not be the one that gets dropped. */
.whoami {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 0 16px;
}
.whoami small {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fog);
  margin-bottom: 3px;
}
.whoami b { display: block; font-weight: 650; font-size: 15.5px; }
.whoami .sub { display: block; font-size: 12.5px; }

/* A labelled field. `field` already exists for the invite form; a <select>
   inside one needs its own appearance reset or iOS draws a native control
   that ignores every colour here. */
label.field select,
label.check select { font: inherit; }
.field select {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin-top: 6px; padding: 13px 14px;
  border: 1px solid var(--haze); border-radius: 12px;
  background: #fff; color: var(--ink); font-size: 16px;
  /* The chevron, drawn rather than imported: one more request for one glyph. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506675' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

/* The consent checkbox. The label is long on purpose — it is the whole of what
   is being agreed to — so the box is pinned to the first line rather than
   centred against a paragraph. */
.check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
  cursor: pointer;
}
.check input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--accent);
}
.check span { flex: 1 1 auto; }

/* A store on the stores screen: name, what is stored, then the actions on
   their own line. Both labels carry a store name, so neither can be relied on
   to be short. */
.storerow { align-items: flex-start; }
.storerow b { display: block; font-weight: 650; font-size: 16px; }
.storerow .sub { display: block; margin-top: 2px; }
.storerow .actions {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px;
}
.storerow .actions .textbtn { padding: 0; font-size: 13.5px; }

/* "Get a key", beside a store's help text. It sits inside a .sub, which is
   muted on purpose, so it has to assert its own colour to read as a link —
   and it is the one thing in that paragraph anybody is meant to click. */
.gethelp {
  color: var(--accent); font-weight: 650; text-decoration: none;
  white-space: nowrap;
}
.gethelp:hover { text-decoration: underline; }
.gethelp .sv { vertical-align: -1px; }

/* A select with nothing to choose. It still states the list's store, so it is
   shown rather than hidden — but it should not look like a control that will
   do something when tapped. */
.field select:disabled {
  background-image: none; padding-right: 14px;
  color: var(--ink-2); opacity: 1;      /* iOS greys disabled controls to illegible */
}

/* The permissions a store key has to carry. A list, because they map one to
   one onto switches on somebody else's page and the order matters. */
.scopes { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.scopes li {
  padding: 8px 10px; border-radius: 10px;
  background: rgba(9,47,76,.05); border: 1px solid var(--hair);
}
.scopes b { display: block; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.scopes small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* The next delivery window. A quiet card: it is information somebody wants
   just before sending, not a control and not a warning. */
.deliv { display: flex; flex-direction: column; gap: 4px; }
.deliv .when {
  margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ice);
}
.scopes.optional li { background: rgba(9,47,76,.03); }


/* disconnectAsk and friends carry their own line break: the question and its
   consequence are two sentences and should read as two. */
#sheet .panel p { white-space: pre-line; }