/*
 * Shared components of the new app pages: Home, Articles, the article page
 * and Your site (helpers in UiHelper, partials in app/views/ui). Cards, the
 * warm panel, labels, buttons, links, chips, tags, meters, the hatch, icon
 * tiles, empty states, covers, step nodes, the mini ladder, popovers,
 * segmented controls, switches and form fields.
 *
 * They read the shell tokens (shell.css), so Day and Night come for free;
 * Night overrides tokens only, under html.dark .shell. One token is new:
 * --app-ok, only for "indexed" and "connected" checks. Every rule is scoped
 * under .shell: Propshaft links every stylesheet on every page, and this
 * file comes last, so a page that adjusts a component (size, spacing) does
 * it with one more class than the rule here.
 */

.shell {
  --app-ok: #1a7f55;
  --app-on-sheen: #16121c;
  --app-card-shadow: var(--app-lift), 0 12px 32px -20px rgba(22, 18, 28, 0.18);
  --app-warm-panel: linear-gradient(180deg, rgba(255, 165, 82, 0.12) 0%, rgba(255, 90, 60, 0.03) 70%);
  --app-warm-line: rgba(255, 90, 60, 0.22);
  --app-warm-wide: linear-gradient(135deg, rgba(255, 165, 82, 0.13) 0%, rgba(255, 90, 60, 0.06) 55%, rgba(255, 90, 60, 0.025) 100%);
  --app-warm-wide-line: rgba(255, 120, 70, 0.22);
}
html.dark .shell {
  --app-ok: #34d399;
  --app-card-shadow: var(--app-lift), 0 24px 60px -32px rgba(0, 0, 0, 0.9);
  --app-warm-panel: linear-gradient(180deg, rgba(255, 165, 82, 0.08) 0%, rgba(255, 165, 82, 0) 70%);
  --app-warm-line: rgba(255, 165, 82, 0.22);
  --app-warm-wide: linear-gradient(135deg, rgba(255, 165, 82, 0.11) 0%, rgba(255, 90, 60, 0.07) 55%, rgba(255, 90, 60, 0.03) 100%);
  --app-warm-wide-line: rgba(255, 140, 90, 0.2);
}

.shell .ui-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Cards: one raised hero card per page, flat side cards. The page sets
   the padding (24 for a hero, 20 for a side card, 16 on phones). ── */
.shell .ui-card { background: var(--app-surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--app-hair); }
.shell .ui-card--hero { border-radius: 16px; box-shadow: var(--app-card-shadow); }

/* The current or attention panel: a warm gradient, never a solid fill.
   ui-warm is the wide one (a step of Your site's ladder), lit from its top
   left corner. A tall column (Home's ladder step) fades from the top with
   --app-warm-panel and --app-warm-line. */
.shell .ui-warm { border-radius: 12px; background: var(--app-warm-wide); box-shadow: inset 0 0 0 1px var(--app-warm-wide-line); }

/* ── Labels: mono, uppercase ("THIS ARTICLE", "CONNECTION") ── */
.shell .ui-label {
  margin: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-ink-3);
}

/* ── Buttons: one primary per screen, always the next step ── */
.shell .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--app-surface); color: var(--app-ink); box-shadow: inset 0 0 0 1px var(--app-hair-2);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s var(--app-ease), box-shadow 0.15s var(--app-ease), opacity 0.15s var(--app-ease), transform 0.15s var(--app-ease);
}
.shell .ui-btn svg { flex: none; }
.shell .ui-btn:hover { background: var(--app-hover); }
.shell .ui-btn:active { transform: translateY(1px); }
.shell .ui-btn:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.shell .ui-btn--primary { background: var(--app-ink); color: var(--app-bg); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 18, 28, 0.18); }
.shell .ui-btn--primary:hover { background: var(--app-ink); opacity: 0.88; }
/* Ghost: no ring until hovered (Cancel, More, Edit). */
.shell .ui-btn--ghost { background: none; box-shadow: none; color: var(--app-ink-2); }
.shell .ui-btn--ghost:hover { background: var(--app-hover); color: var(--app-ink); }
/* Danger: the confirm button of a destructive dialog, never on a page. */
.shell .ui-btn--danger { background: var(--app-hot); color: #fff; box-shadow: none; font-weight: 600; }
.shell .ui-btn--danger:hover { background: color-mix(in srgb, var(--app-hot) 88%, #000); }
.shell .ui-btn--sm { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; gap: 6px; }
.shell .ui-btn--icon { width: 36px; padding: 0; }

/* ── Text links: accent, with an arrow that nudges on hover ── */
.shell .ui-link {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--app-accent); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.shell .ui-link svg { flex: none; transition: transform 0.15s var(--app-ease); }
.shell .ui-link:hover svg { transform: translateX(2px); }
.shell .ui-link--quiet { color: var(--app-ink-2); font-weight: 500; }
.shell .ui-link--quiet:hover { color: var(--app-ink); }
/* A label that may wrap keeps its arrow right after the last word. */
.shell .ui-link--wrap { display: inline; line-height: 1.4; text-align: left; white-space: normal; }
.shell .ui-link--wrap svg { display: inline-block; margin-left: 4px; vertical-align: -2px; }

/* ── Chips and tags ── */
.shell .ui-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 99px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--app-ink-2); background: var(--app-hover); box-shadow: inset 0 0 0 1px var(--app-hair);
}
.shell .ui-chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--app-ink-3); }
.shell .ui-chip--live { color: var(--app-accent); }
.shell .ui-chip--live i { background: var(--app-ember); animation: app-ping 2s ease-out infinite; }
.shell .ui-chip--ready i { background: var(--app-amber); }
.shell .ui-chip--writing i { width: 8px; height: 8px; background: none; border: 1.5px solid var(--app-ember); border-right-color: transparent; animation: ui-spin 0.9s linear infinite; }
.shell .ui-chip--scheduled i { background: none; box-shadow: inset 0 0 0 1.5px var(--app-amber); }
.shell .ui-chip--muted i { background: var(--app-ink-3); }
.shell .ui-chip--warn i { background: var(--app-hot); }
.shell .ui-chip--ok svg { color: var(--app-ok); }
/* Writing with a known progress: a ring that fills. */
.shell .ui-chip__ring {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: conic-gradient(var(--app-ember) calc(var(--p, 0) * 1%), var(--app-press) 0);
  -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px);
}
.shell .ui-chip__short { display: none; }
/* Keyword chips: the target keyword gets a warm tint. */
.shell .ui-chip--kw { height: 24px; border-radius: 8px; font-size: 12px; font-weight: 400; background: none; }
.shell .ui-chip--kw.is-target { color: var(--app-ink); background: rgba(255, 165, 82, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 165, 82, 0.4); }

.shell .ui-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--app-ink-2); background: var(--app-hover); box-shadow: inset 0 0 0 1px var(--app-hair);
}
.shell .ui-tag--warm { color: var(--app-accent); background: rgba(255, 165, 82, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 90, 60, 0.22); }
/* Next to a title, a tag takes the chip's shape ("NEXT STEP"). */
.shell .ui-tag--pill { height: 22px; padding: 0 8px; border-radius: 99px; }

/* ── Meters (on the shell's app-meter) ── */
.shell .ui-meter { height: 4px; }
.shell .ui-meter--thin { height: 3px; }
.shell .ui-meter.is-ahead { background: repeating-linear-gradient(90deg, var(--app-hair-2) 0 4px, transparent 4px 8px); }
.shell .ui-meter.is-over i { background: var(--app-hot); box-shadow: none; }

/* ── The hatch: a number not reached yet ── */
.shell .ui-hatch {
  position: relative; display: inline-block; flex: none; width: 64px; height: 48px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, var(--app-hair-2) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 0 0 1px var(--app-hair);
}

/* ── Icon tiles ── */
.shell .ui-tile {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--app-hover); box-shadow: inset 0 0 0 1px var(--app-hair); color: var(--app-ink-2);
}
.shell .ui-tile--warm { background: var(--app-sheen); box-shadow: none; color: var(--app-on-sheen); }

/* ── Empty states: stacked, or a row with the tile on the left ── */
.shell .ui-empty { display: grid; justify-items: start; gap: 8px; padding: 24px 0 8px; }
.shell .ui-empty__main { display: contents; }
.shell .ui-empty__title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--app-ink); }
.shell .ui-empty__text { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--app-ink-2); }
.shell .ui-empty--row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; color: var(--app-ink); }
.shell .ui-empty--row .ui-tile { color: var(--app-ink-3); }
.shell .ui-empty--row .ui-empty__main { display: block; min-width: 0; }
.shell .ui-empty--row .ui-empty__title { margin: 3px 0 2px; line-height: 1.35; }
.shell .ui-empty--row .ui-empty__text { max-width: 60ch; }
.shell .ui-empty--row .ui-link { margin-top: 8px; }

/* ── Covers: the picture, or sheen rings with the format and the site ── */
.shell .ui-cover {
  position: relative; flex: none; display: block; width: var(--w); height: var(--h); overflow: hidden;
  border-radius: 10px; background: var(--app-hover); box-shadow: inset 0 0 0 1px var(--app-hair);
}
.shell .ui-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shell {
  --ui-cover-bg:
    radial-gradient(circle at 100% 100%, transparent 0 18%, rgba(255, 90, 60, 0.30) 18.5% 19.5%, transparent 20% 30%, rgba(255, 122, 69, 0.22) 30.5% 31.5%, transparent 32% 44%, rgba(255, 165, 82, 0.18) 44.5% 45.5%, transparent 46%),
    linear-gradient(135deg, #fff6ea 0%, #ffe3c4 60%, #ffcfa6 100%);
}
html.dark .shell {
  --ui-cover-bg:
    radial-gradient(circle at 100% 100%, transparent 0 18%, rgba(255, 90, 60, 0.45) 18.5% 19.5%, transparent 20% 30%, rgba(255, 122, 69, 0.32) 30.5% 31.5%, transparent 32% 44%, rgba(255, 165, 82, 0.22) 44.5% 45.5%, transparent 46%),
    linear-gradient(135deg, #1c1622 0%, #221a24 60%, #2a1c1c 100%);
}
.shell .ui-cover--fallback { background: var(--ui-cover-bg); }
/* A picture that fails to load: browsers draw ::after only on broken
   images, so the sheen covers the broken-image icon. */
.shell .ui-cover img { position: relative; color: transparent; }
.shell .ui-cover img::after { content: ''; position: absolute; inset: 0; background: var(--ui-cover-bg); }
.shell .ui-cover__kicker {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #9a4a0b;
}
.shell .ui-cover__kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--app-ember); }
.shell .ui-cover__site {
  position: absolute; left: 10px; bottom: 9px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(22, 18, 28, 0.08);
  font-family: var(--f-mono); font-size: 9.5px; color: var(--app-ink-2);
}
html.dark .shell .ui-cover__kicker { color: #ffc58f; }
html.dark .shell .ui-cover__site { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* ── Step nodes ── */
.shell .ui-node {
  position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--app-surface); box-shadow: inset 0 0 0 1.5px var(--app-hair-2); color: #fff;
}
.shell .ui-node--sm { width: 16px; height: 16px; }
.shell .ui-node--done { background: var(--app-sheen); box-shadow: none; }
.shell .ui-node--done svg { filter: drop-shadow(0 0 1px rgba(150, 50, 20, 0.35)); }
.shell .ui-node--current { box-shadow: inset 0 0 0 2px var(--app-ember); }
.shell .ui-node--current::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--app-ember); animation: app-ping 2s ease-out infinite; }
.shell .ui-node--warn { box-shadow: inset 0 0 0 2px var(--app-hot); }
.shell .ui-node--warn::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--app-hot); }

/* ── Mini ladder: how far one article went ── */
.shell .ui-mini { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.shell .ui-mini__bars { display: inline-flex; gap: 3px; }
.shell .ui-mini__bars i { width: 10px; height: 3px; border-radius: 2px; background: var(--app-hair-2); }
.shell .ui-mini__bars i.is-on { background: var(--app-sheen); }
.shell .ui-mini__label { font-family: var(--f-mono); font-size: 11px; color: var(--app-ink-2); }

/* ── Popovers: a panel in the shell's menu style ── */
.shell .ui-popover { position: relative; display: inline-flex; }
.shell .ui-popover__panel { width: 320px; max-width: calc(100vw - 32px); padding: 14px 16px; overflow: visible; max-height: none; }

/* ── Segmented radios (app-seg look) ── */
.shell .ui-seg {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: var(--app-hover); box-shadow: inset 0 0 0 1px var(--app-hair);
}
.shell .ui-seg__opt { position: relative; display: inline-flex; }
.shell .ui-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.shell .ui-seg__opt span {
  display: inline-grid; place-items: center; min-width: 44px; height: 28px; padding: 0 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--app-ink-2);
  transition: background-color 0.15s var(--app-ease), color 0.15s var(--app-ease);
}
.shell .ui-seg__opt input:checked + span { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-lift); }
.shell .ui-seg__opt input:focus-visible + span { outline: 2px solid var(--app-focus); outline-offset: 1px; }
.shell .ui-seg--count input {
  width: 56px; height: 28px; padding: 0 4px 0 10px; border: 0; border-radius: 6px;
  background: var(--app-surface); box-shadow: var(--app-lift); color: var(--app-ink);
  font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.shell .ui-seg--count input:focus { outline: 2px solid var(--app-focus); outline-offset: 1px; }

/* ── Switches: a 36x20 track, sheen when on, in a labelled pill ── */
.shell .ui-switch {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-hair-2);
  color: var(--app-ink); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: box-shadow 0.15s var(--app-ease);
}
.shell .ui-switch:hover { box-shadow: inset 0 0 0 1px var(--app-ink-3); }
.shell .ui-switch:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.shell .ui-switch__label:first-child { margin-left: 2px; }
.shell .ui-switch__label:last-child { margin-right: 2px; }
.shell .ui-switch__track {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px;
  background: var(--app-press); box-shadow: inset 0 0 0 1px var(--app-hair); transition: background 0.2s var(--app-ease);
}
.shell .ui-switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(22, 18, 28, 0.3); transition: transform 0.2s var(--app-ease);
}
.shell .ui-switch[aria-checked="true"] .ui-switch__track { background: var(--app-sheen); box-shadow: none; }
.shell .ui-switch[aria-checked="true"] .ui-switch__track::after { transform: translateX(16px); }
/* Pill: 32px and round, for a switch inside the content ("Auto-publish");
   the default one sits in a header next to buttons and shares their shape. */
.shell .ui-switch--pill { height: 32px; gap: 8px; padding: 0 12px 0 6px; border-radius: 99px; font-weight: 500; }
.shell .ui-switch--pill .ui-switch__label { margin: 0; }
/* The track alone, for a row that is its own label. */
.shell .ui-switch--bare { height: auto; padding: 4px; border-radius: 12px; background: none; box-shadow: none; }
.shell .ui-switch--bare:hover { box-shadow: none; }

/* ── Form fields ── */
.shell .ui-input {
  display: block; width: 100%; min-height: 40px; margin: 0; padding: 9px 12px;
  border: 0; border-radius: 10px; box-sizing: border-box;
  background: var(--app-surface); box-shadow: inset 0 0 0 1px var(--app-hair-2);
  color: var(--app-ink); font-family: var(--f-body); font-size: 14px; line-height: 1.5;
  transition: box-shadow 0.15s var(--app-ease);
  -webkit-appearance: none; appearance: none;
}
.shell .ui-input::placeholder { color: var(--app-ink-3); opacity: 1; }
.shell .ui-input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink) 24%, transparent); }
.shell .ui-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--app-focus), 0 0 0 3px rgba(232, 85, 58, 0.16); }
.shell .ui-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--app-hot); }
.shell .ui-textarea { min-height: 88px; resize: vertical; }
.shell .ui-select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c8498' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
html.dark .shell .ui-select option { background: var(--app-raised); color: var(--app-ink); }

/* On phones a popover is a sheet above the tab bar, full width. */
@media (max-width: 639.98px) {
  .shell .ui-popover > .ui-popover__panel.app-menu {
    position: fixed; top: auto; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--app-tab-h) + env(safe-area-inset-bottom) + 12px);
    width: auto; max-width: none; max-height: min(70dvh, 520px); overflow-y: auto;
    transform-origin: bottom center; transform: translateY(8px);
  }
  .shell .ui-popover.is-open > .ui-popover__panel.app-menu { transform: none; }
}

/* Phones: chips show their short label. */
@media (max-width: 767.98px) {
  .shell .ui-chip__long { display: none; }
  .shell .ui-chip__short { display: inline; }
}

@keyframes ui-spin { to { transform: rotate(360deg); } }

@media (max-width: 1023.98px) {
  /* Text links keep their size but get a 44px tall tap area. */
  .shell .ui-link { position: relative; }
  .shell .ui-link::after { content: ''; position: absolute; inset: -12px -4px; }
  .shell .ui-btn { min-height: 44px; }
  .shell .ui-btn--sm { min-height: 44px; }
  .shell .ui-btn--icon { width: 44px; height: 44px; }
  .shell .ui-btn--block { width: 100%; height: 44px; }
  .shell .ui-seg__opt span { height: 36px; }
  .shell .ui-seg--count input { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell [class*="ui-"], .shell [class*="ui-"]::before, .shell [class*="ui-"]::after,
  .shell [class*="ui-"] i, .shell [class*="ui-"] svg {
    animation: none !important; transition-duration: 0.01ms !important;
  }
}