/* ==========================================================================
   Style podstron i elementów powłoki uzupełniających komponenty

   PORT: yourServer/prototyp/assets/css/pages.css. The first part of this file is a SUBSET of
   that sheet, rule for rule and unchanged - only the rules the reseller panel's markup uses,
   from six of its blocks (shell extras, auth, dashboard, finance, settings and cart headings,
   the card payment page, phone tweaks). A rule for an element the panel does not draw was left
   in the pattern: bring it over together with the markup that needs it. The second part,
   under the "RESELLER PANEL" banner, is what the pattern does not have: the balance pill, the
   top-up presets, the ledger filters, the top-up status page - written with the same tokens.
   ========================================================================== */
@layer rp-pages {

  /* ------------------------------------------------ powłoka: dodatki */
  .crumbs-slot { flex: 1; min-width: 0; display: flex; }
  .crumb-text { padding: 4px 8px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
  .tb-add { padding-inline: 14px 16px; }

  .card-title .count, .page-heading .count { color: var(--text-3); font-weight: 600; margin-left: 4px; }

  .user-menu { width: 320px; }
  .user-card { display: flex; align-items: center; gap: 12px; }
  .menu-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px 4px; & .theme-seg { width: auto; flex: 1; } }

  .confirm-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--info-soft); color: var(--info); &.danger { background: var(--danger-soft); color: var(--danger); } & svg { width: 24px; height: 24px; } }

  .seg a {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: var(--r-pill);
    color: var(--text-2); font-size: var(--fs-13); font-weight: 650; white-space: nowrap;
    &[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
  }
  .seg.sm a { height: 26px; padding: 0 10px; font-size: var(--fs-12); }

  /* ----------------------------------------------------------- auth */
  /* strona płatności kartą (pages/payment.js) — bez powłoki panelu, jak ekrany logowania */
  body[data-layout="auth"], body[data-layout="payment"] {
    & .sidebar, & .topbar, & .bottom-nav, & .app-footer, & .sidebar-backdrop { display: none !important; }
    & .app { grid-template-columns: minmax(0, 1fr) !important; }
    & .page { max-width: none; padding: 0; }
  }
  .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100dvh; }
  .auth-aside {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8);
    padding: clamp(24px, 5vw, 64px); overflow: hidden;
    background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%), var(--surface-inverse);
    color: var(--text-inverse);
    & .brand { color: var(--text-inverse); }
    & .brand-word span { color: color-mix(in oklab, var(--text-inverse) 70%, transparent); }
  }
  .auth-pitch h2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 650; max-width: 16ch; }
  .auth-points { display: grid; gap: var(--s-4); margin-top: var(--s-8); list-style: none; padding: 0; max-width: 46ch;
    & li { display: flex; gap: 14px; align-items: flex-start; color: color-mix(in oklab, var(--text-inverse) 78%, transparent); }
    & svg { width: 22px; height: 22px; flex-shrink: 0; color: color-mix(in oklab, var(--accent) 70%, #fff); margin-top: 2px; }
    & b { color: var(--text-inverse); }
  }
  .auth-foot { color: color-mix(in oklab, var(--text-inverse) 55%, transparent); font-size: var(--fs-12); }
  .auth-main { display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) var(--gutter); background: var(--bg); }
  .auth-card { display: grid; gap: var(--s-4); width: min(440px, 100%); }
  .auth-card .page-title { font-size: var(--fs-34); }
  .auth-alt { text-align: center; color: var(--text-2); }
  @media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth-aside { min-height: auto; }
    .auth-points, .auth-foot { display: none; }
    .auth-pitch h2 { font-size: 26px; }
  }

  /* ------------------------------------------------------------ Kokpit */
  .dash { display: grid; gap: var(--s-5); }
  .dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
  .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
  @container page (max-width: 1100px) {
    .span-4, .span-8 { grid-column: span 6; }
    .dash-grid > .span-8 { grid-column: 1 / -1; }
  }
  @container page (max-width: 720px) {
    .dash-grid > * { grid-column: 1 / -1 !important; }
  }

  .attention {
    border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--warn-strong) 35%, var(--border));
    background: linear-gradient(180deg, color-mix(in oklab, var(--warn-soft) 70%, var(--surface)), var(--surface));
    overflow: hidden;
  }
  .attention-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 14px 20px 6px; }
  .attention-head h2 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-15); font-weight: 750; & svg { width: 18px; height: 18px; color: var(--warn); } & .count { color: var(--warn); } }
  .attention-list { display: grid; list-style: none; padding: 6px 10px 10px; margin: 0; gap: 4px; }
  .att-item {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border);
    &::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--info); }
    &.warn::before { background: var(--warn-strong); }
    &.danger::before { background: var(--danger); }
    &.info::before, &:not(.warn):not(.danger)::before { background: var(--info); }
  }
  .att-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; & svg { width: 17px; height: 17px; } }
  .att-item.warn .att-ico { background: var(--warn-soft); color: var(--warn); }
  .att-item.danger .att-ico { background: var(--danger-soft); color: var(--danger); }
  .att-body { display: grid; gap: 1px; flex: 1; min-width: 0; & strong { font-size: var(--fs-14); } & span { color: var(--text-3); font-size: var(--fs-12); } }
  .attention-ok {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-lg);
    background: var(--ok-soft); color: var(--text); border: 1px solid color-mix(in oklab, var(--ok) 25%, transparent);
    & svg { width: 20px; height: 20px; color: var(--ok); }
  }

  .quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-3); }

  .fin { display: grid; gap: var(--s-4); }

  .ri-ico.big { width: 44px; height: 44px; border-radius: 12px; & svg { width: 22px; height: 22px; } }
  .kv-rows { display: grid; }

  /* ------------------------------------------------------------ Finanse */
  .doc-total { font-size: var(--fs-16); border-bottom: 0 !important; & > :last-child { font-family: var(--font-display); font-size: var(--fs-20); } }

  .pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
  @container page (max-width: 980px) { .pay-layout { grid-template-columns: minmax(0, 1fr); } }
  .pay-summary { position: sticky; top: calc(var(--topbar-h) + 12px); display: grid; gap: var(--s-4); }
  .timeline { display: grid; list-style: none; margin: 0; padding: 0; gap: 4px;
    & li { display: flex; align-items: center; gap: 16px; padding: 10px 6px; border-bottom: 1px dashed var(--border); }
    & li:last-child { border: 0; }
  }
  .tl-date { display: grid; justify-items: center; width: 52px; flex-shrink: 0; padding: 6px 0; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); line-height: 1.1;
    & strong { font-family: var(--font-display); font-size: var(--fs-20); }
    & span { font-size: var(--fs-11); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
  }
  .tl-body { display: grid; gap: 2px; flex: 1; min-width: 0; &:hover strong { color: var(--accent); } }

  .prepaid-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  @container page (max-width: 900px) { .prepaid-layout { grid-template-columns: minmax(0, 1fr); } }
  .prepaid-card { padding-block: var(--s-8); }
  .prepaid-form { max-width: 420px; margin: 0 auto; }
  .label.center, .cluster.center { justify-content: center; }
  .amount-input {
    display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 72px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border-strong);
    & input { flex: 1; border: 0; background: transparent; box-shadow: none !important; height: 100%; padding: 0; font-family: var(--font-display); font-size: var(--fs-34); font-weight: 650; font-variant-numeric: tabular-nums; }
    & span { color: var(--text-3); font-size: var(--fs-20); font-weight: 600; }
    &:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); background: var(--surface); }
    &.is-invalid { border-color: var(--danger); }
  }
  .balance-stat .stat-value { font-size: var(--fs-34); }

  .pay-methods { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; & legend { margin-bottom: 8px; } }
  .pay-progress { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--info-soft); font-weight: 600; font-size: var(--fs-13); }

  /* -------------------------------------------------------- Ustawienia */
  .sub-title { font-size: var(--fs-15); font-weight: 700; margin-top: var(--s-2); }

  /* --------------------------------------------------------------- Koszyk */
  .order-done { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding-block: var(--s-12);
    & h2 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 650; }
    & p { max-width: 56ch; }
    & .btn-row { justify-content: center; margin-top: var(--s-3); }
  }
  .done-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); & svg { width: 34px; height: 34px; } }

  .notfound { max-width: 720px; margin: 8vh auto; }

  /* ---------------------------------------------------- telefon: drobne */
  @media (max-width: 720px) {
    .page-title { font-size: var(--fs-24); }
    .page-head { margin-bottom: var(--s-4); }
  }

  /* ==================================================================== M-stripe: card payment page
     /payment/card, /payment/confirm, /payment/save-card (payment.html) — summary on the left, card form on the right;
     one column on a phone (summary above the form, its lines collapsed). Own block: nothing else uses .pay-page. */
  .pay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  @media (min-width: 860px) {
    .pay-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); }
    .pay-summary { position: sticky; top: var(--s-6); }
  }
  .pay-summary, .pay-form { display: grid; gap: var(--s-4); align-content: start; }
  .pay-eyebrow { color: var(--text-3); font-size: var(--fs-12); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
  .pay-what-block { display: grid; gap: 4px; margin-top: calc(-1 * var(--s-2)); }
  .pay-what { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
  .pay-ref { color: var(--text-2); font-size: var(--fs-14); overflow-wrap: anywhere; }
  .pay-totals { padding-top: var(--s-2); border-top: 1px solid var(--border);
    & .kv-row { padding: 6px 0; border-bottom: 0; }
    & .doc-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); font-weight: 700;
      & > :first-child { color: var(--text); }
      & > :last-child { font-size: var(--fs-28); letter-spacing: -0.02em; }
    }
  }
  .pay-note, .pay-seller { color: var(--text-3); font-size: var(--fs-12); line-height: 1.5; & b { color: var(--text-2); font-weight: 650; } }
  .pay-element:empty { display: none; }
  .pay-safe { display: grid; gap: 8px; margin: 0; padding: var(--s-3) var(--s-4); list-style: none; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-13);
    & li { display: flex; align-items: flex-start; gap: 10px; }
    & svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
  }
  .pay-test { color: var(--text-3); font-size: var(--fs-12); }
  @media (max-width: 859px) {
    .pay-what { font-size: var(--fs-20); }
    .pay-totals .doc-total > :last-child { font-size: var(--fs-24); }
  }
}

/* ==========================================================================
   RESELLER PANEL — blocks the pattern does not have.

   Same tokens, same grammar as above: a block per thing, nested states, container queries where
   the pattern uses them. Nothing here redefines a pattern rule; where a pattern class needs to
   behave differently inside the panel, the rule is scoped by a panel class.
   ========================================================================== */
@layer rp-pages {

  /* ---------------------------------------------------- with and without JS */
  /* boot.js puts `has-js` on <html> before the first paint. A control that only a script can
     work (theme switch, collapse, copy) is not drawn without it — a button that does nothing
     reads as a broken page. */
  :root:not(.has-js) .js-only { display: none !important; }
  .has-js .no-js-only { display: none !important; }

  /* ------------------------------------------------------------------ brand */
  .brand-text { display: grid; gap: 4px; min-width: 0; }
  .brand-sub {
    color: var(--text-3); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1;
    text-transform: uppercase; white-space: nowrap;
  }
  img.brand-mark { display: block; flex-shrink: 0; }
  .auth-aside .brand-sub { color: color-mix(in oklab, var(--text-inverse) 60%, transparent); }
  .tb-brand .brand-text { display: none; }
  @media (min-width: 900px) {
    :root[data-sidebar="rail"] .brand-text { display: none; }
  }

  /* --------------------------------------------------------- shell: extras */
  /* The pattern opens the drawer with a script. Without one, the same links point at `#sidebar`
     and `:target` does the opening; the close link in the drawer's head points back at the page. */
  .sb-close { display: none; }
  @media (max-width: 899px) {
    .sidebar:target { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
    .sidebar:target .sb-close, .app.is-drawer-open .sb-close { display: inline-grid; }
  }

  /* The balance in the top bar: the same pill as `.tb-user` and `.tb-search` */
  .tb-balance {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-13);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-1);
    &:hover { border-color: var(--accent); }
    & > svg { width: 17px; height: 17px; color: var(--accent); }
    & .tb-balance-label { color: var(--text-3); }
    & strong { font-weight: 700; font-variant-numeric: tabular-nums; }
    &.is-low { border-color: color-mix(in oklab, var(--warn-strong) 55%, var(--border)); }
    &.is-low > svg, &.is-low strong { color: var(--warn); }
  }
  @container topbar (max-width: 820px) {
    .tb-balance-label { display: none; }
  }
  @container topbar (max-width: 430px) {
    .tb-balance { padding: 0 12px; }
    .tb-balance > svg { display: none; }
  }
  @media (max-width: 899px) {
    .tb-balance { box-shadow: none; }
  }
  @media (max-width: 480px) {
    .tb-theme { display: none; }
  }

  /* The account menu is opened by the browser (popover), so its place is set by the sheet, not by
     a script: the bar sticks to the top of the window and the button stands at its right end. */
  .menu.user-menu {
    top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h) + 4px);
    right: var(--gutter);
    max-width: calc(100vw - 2 * var(--gutter));
  }
  .user-card .grow > * { display: block; }
  .menu form { display: block; margin: 0; }
  @supports not selector(:popover-open) {
    .menu[popover] { display: none; }
    .menu[popover].is-open { display: block; opacity: 1; scale: 1; }
  }

  /* ------------------------------------------------ messages and screen states */
  .flash-stack { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
  .page-banner { margin-bottom: var(--s-4); }
  .toast-close { color: inherit; }

  .empty.is-error .empty-ico { background: var(--danger-soft); color: var(--danger); }
  .empty.is-warn .empty-ico { background: var(--warn-soft); color: var(--warn); }
  .empty .empty-code { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-12); }

  /* A skeleton — only where a script fetches the content */
  .sk-stack { display: grid; gap: var(--s-3); }
  .sk-line { display: block; height: 14px; }
  .sk-line.lg { height: 30px; width: 62%; }
  .sk-line.short { width: 40%; }
  .sk-block { display: block; height: 48px; border-radius: var(--r-pill); }
  [aria-busy="true"] { cursor: progress; }

  /* ------------------------------------------------------------------ balance */
  .stat[data-balance-low].is-low .stat-value,
  [data-balance-low].is-low .balance-stat .stat-value,
  [data-balance-low].is-low .stat.is-accent .stat-value { color: var(--warn); }
  .balance-parts .kv-row { padding: 8px 0; }
  /* Tiles in a row are stretched to one height, and the pattern's `.stat` grid then spreads the
     spare height over its rows: one foot that wraps moves the label and the figure of every OTHER
     tile down by a few pixels. Packed at the top, the row reads as one line whichever foot wraps. */
  [data-balance-low] > .stat { align-content: start; }
  .stat.is-accent {
    border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent-soft) 60%, var(--surface)), var(--surface));
    & .stat-label svg { color: var(--accent); }
  }

  /* ---------------------------------------------------------------- dashboard */
  .spend { display: grid; gap: var(--s-3); }
  .spend-compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-13); }
  .shop-counts { display: grid; gap: var(--s-3); }
  .ri-amount {
    font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
    &.is-credit { color: var(--ok); }
  }
  .timeline .tl-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .card-foot .foot-sums { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--text-3); font-size: var(--fs-13); & b { color: var(--text); font-variant-numeric: tabular-nums; } }

  /* ------------------------------------------------------------- top-up: form */
  /* The preset amounts are radio inputs (they work without a script), drawn as the pattern's `.chip` */
  label.chip { cursor: pointer; }
  .chip:has(input:checked) { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
  .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .amount-input input::placeholder { color: var(--text-3); opacity: 1; }
  .prepaid-form .field-error.is-shown { display: block; text-align: center; }
  .prepaid-form .pay-methods .label { margin-bottom: 2px; }
  .topup-summary {
    padding: var(--s-1) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
  }

  /* ----------------------------------------------------------- top-up: status */
  /* Inside the shell the sticky summary has to stop under the top bar, not under the edge of the window */
  .topup-status .pay-summary { top: calc(var(--topbar-h) + 12px); }
  .topup-status .order-done { padding-block: var(--s-6); }
  .topup-state-title { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
  .transfer-rows .kv-row { align-items: center; }
  .transfer-rows .kv-row > :last-child { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
  .pay-form[aria-busy="true"] { pointer-events: none; }
  .inline-form { display: inline-flex; }
  .btn-row .inline-form { flex: 1 1 180px; & .btn { width: 100%; } }

  /* ------------------------------------------------------------------- ledger */
  .ledger-filters {
    & .select, & .input-group { flex: 0 1 200px; width: auto; }
    & .input-group .input { height: 34px; padding-right: 10px; font-size: var(--fs-13); }
    & .input-group { border-radius: var(--r-sm); }
  }
  .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0 var(--s-5) var(--s-3); color: var(--text-3); font-size: var(--fs-13); }
  .amount-credit { color: var(--ok); }
  .pager-cursor { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .table .t-shop { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @container (max-width: 700px) {
    .table.stackable .t-shop { max-width: none; }
  }

  /* ----------------------------------------------------- sign-in and forms */
  .auth-card .callout { margin: 0; }
  .auth-card.is-wide { width: min(680px, 100%); }
  .auth-main.is-top { place-items: start center; }
  .invite-list { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
  .invite-item {
    display: grid; gap: var(--s-3); padding: var(--s-4);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
    & .invite-meta { color: var(--text-3); font-size: var(--fs-13); }
    & .btn-row .inline-form { flex: 1 1 140px; }
  }
}

/* Transitions between pages, as in the pattern's application: there a script makes them (the
   View Transitions API inside one document), here - between documents - the browser does. The
   names `page` and `nav-active` and the animations stand in base.css and layout.css, unchanged.
   Outside the layer, because this is a rule about the document. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ==========================================================================
   RESELLER PANEL — stage F2b (Developers, Team, Company, Event log).
   One block at the end of the file; nothing above it is changed.
   ========================================================================== */
@layer rp-pages {
  /* A group of boxes is a <fieldset> (fragments/office :: choiceBoxes): without this the browser
     draws its own frame around the group and cuts it with the legend. */
  .choice-boxes { border: 0; padding: 0; margin: 0; min-width: 0; }
  .choice-boxes > legend { padding: 0; margin-bottom: var(--s-2); }

  /* A form that stands alone in a card as wide as the page: the pattern's fields and buttons take
     the whole width of their container, which at 1100 px reads as a banner, not as a form. */
  .form-narrow { max-width: 680px; }

  /* The secret shown once (fragments/office :: secretOnce): the pattern's callout and copy-field. */
  .secret-once { margin-top: var(--s-4); }
  .secret-once .copy-field { margin-block: var(--s-1); background: var(--surface); }

  /* A shell recipe wraps at spaces where it can - the pattern's code block breaks anywhere, also
     in the middle of a word, which is right for a token and wrong for a command. */
  .code-block[data-recipe] { word-break: normal; overflow-wrap: anywhere; }

  /* Documentation: a path or a key is one long word. Inside the pattern's grids (.stack) an item
     is as wide as its longest word, so on a phone the page itself grew wider than the screen. */
  .docs .stack > *, .docs .stack-sm > * { min-width: 0; }
  .docs [data-docs-group] .table td.mono { overflow-wrap: anywhere; }
  /* Each group of calls is a table of its own; the same widths keep their columns in one line
     down the page. Only while the table IS a table - narrower, the pattern turns rows into cards. */
  @container (min-width: 701px) {
    .docs [data-docs-group] .table { table-layout: fixed; }
    .docs [data-docs-group] .table td:nth-child(1) { width: 38%; }
    .docs [data-docs-group] .table td:nth-child(2) { width: 26%; }
  }
}

/* ==========================================================================
   RESELLER PANEL F2a — Shops, the shop card, New shop, Catalog and price list.

   Part 1 is brought over from the pattern (yourServer/prototyp/assets/css/pages.css), rule for
   rule and unchanged: the rules of its blocks "Domeny", "Strony WWW", "Serwery", "VPS" and "SSL"
   that the markup of this stage draws (quick filters, tab panel, plan cards, the configurator with
   its summary, add-on rows, feature list, danger zone). Part 2 is what the pattern does not have,
   written with the same tokens.
   ========================================================================== */
@layer rp-pages {

  /* ----------------------------------------------- part 1: from the pattern */
  .quick-filters .chip { height: 32px; }
  .tab-panel { margin-top: var(--s-4); }
  .danger-zone { border-color: color-mix(in oklab, var(--danger) 30%, var(--border)); & .card-title svg { color: var(--danger); } }
  .choice-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .choice-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .choice.is-disabled { opacity: 0.55; cursor: not-allowed; }

  .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
  .plan-card { display: flex; flex-direction: column; overflow: visible;
    &.is-featured { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent), var(--shadow-sm); }
  }
  .plan-flag { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; }
  .plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border);
    & h3 { font-size: var(--fs-15); font-weight: 650; color: var(--text-2); padding-top: 6px; }
  }
  .plan-price { display: grid; justify-items: end; line-height: 1.1;
    & s { font-size: var(--fs-12); }
    & strong { font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; letter-spacing: -0.02em; }
    & > span { font-size: var(--fs-12); }
  }
  .plan-specs { display: grid; gap: 0; padding: var(--s-3) var(--s-5); margin: 0; flex: 1;
    & div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--fs-13); border-bottom: 1px dashed var(--border); }
    & div:last-child { border: 0; }
    & dt { color: var(--text-2); }
    & dd { font-weight: 700; margin: 0; text-align: right; }
  }
  .plan-foot { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--border); }

  .cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: start; }
  @container page (max-width: 1080px) { .cfg-layout { grid-template-columns: minmax(0, 1fr); } }
  .cfg-summary { position: sticky; top: calc(var(--topbar-h) + 12px); display: grid; gap: var(--s-4); }
  @container page (max-width: 1080px) { .cfg-summary { position: static; } }
  .cfg-name { font-size: var(--fs-18); font-weight: 600; color: var(--accent); }
  .cfg-total { display: grid; gap: 2px; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
    & strong { font-family: var(--font-display); font-size: var(--fs-34); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
  }
  .addon { & .addon-price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } }
  .feature-list { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--s-2); font-size: var(--fs-13);
    & li { display: flex; gap: 8px; align-items: center; }
    & svg { color: var(--ok); flex-shrink: 0; }
  }

  /* ----------------------------------------------------- part 2: shops list */
  /* The filters next to the search: selects that do not stretch (the pattern's toolbar has chips there). */
  .shop-filters, .catalog-filters {
    & .select { flex: 0 1 190px; width: auto; }
  }
  /* On a phone the toolbar is a column: a filter as wide as the search above it. */
  @container page (max-width: 640px) { .shop-filters .select, .catalog-filters .select { flex: 1 1 100%; } }
  /* The status chips stand under the toolbar, in the card's own padding. */
  .shop-statuses { padding: 0 var(--s-5) var(--s-4); }
  .shop-billing { font-weight: 600;
    &[data-tone="ok"] { color: var(--ok); }
    &[data-tone="warn"] { color: var(--warn); }
    &[data-tone="danger"] { color: var(--danger); }
  }

  /* ------------------------------------------------------------- shop card */
  .shop-facts { row-gap: 6px; }
  /* A card that is its heading alone (the plan of a shop nobody may change): the heading has no foot of its own. */
  [data-shop] .card > .card-head:last-child { padding-bottom: var(--s-5); }
  /* A cell that says two things - a state and the reason under it: one box, so that the table drawn
     as cards keeps "label on the left, value on the right" instead of three columns. */
  .t-cell { display: grid; justify-items: start; gap: 2px; min-width: 0; }
  @container (max-width: 700px) { .table.stackable .t-cell { justify-items: end; } }
  .shop-progress { display: grid; gap: var(--s-3); margin-bottom: var(--s-4);
    & .card-title { display: flex; align-items: center; gap: 10px; }
    & .meter-label { margin-bottom: 0; }
  }
  .shop-state, .shop-retry, .funds-block { margin-bottom: var(--s-4); }
  .tabs + .tab-panel > .shop-confirm { margin-bottom: var(--s-4); }
  /* A change waiting for a "yes": the pattern's featured-card ring, so that it is the first thing read. */
  .shop-confirm { display: grid; gap: var(--s-4); border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent), var(--shadow-sm);
    & .card-title { display: flex; align-items: center; gap: 8px; }
  }

  /* A quote: its lines (what, for how long, list price struck through next to the reseller's), then the totals. */
  .quote { display: grid; gap: var(--s-2); }
  .quote-items { display: grid; list-style: none; margin: 0; padding: 0;
    & li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: 10px 0; border-bottom: 1px dashed var(--border); }
  }
  .quote-what { display: grid; gap: 2px; min-width: 0;
    & small { color: var(--text-3); font-size: var(--fs-12); }
  }
  .quote-price { display: grid; justify-items: end; gap: 3px; white-space: nowrap;
    & s { font-size: var(--fs-12); }
  }
  .own-price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

  /* 402 PA018: three amounts in a row, the missing one last. */
  .funds-amounts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-2) 0;
    & div { display: grid; gap: 1px; }
    & dt { color: var(--text-2); font-size: var(--fs-12); font-weight: 600; }
    & dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-18); font-weight: 650; }
  }

  /* A field with its button on one line (add a domain, change the plan): the button stands at the field's foot. */
  .inline-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
    & .field { flex: 1 1 260px; max-width: 480px; }
    & > .btn { flex: 0 0 auto; }
    /* a hint or a reason under the field must not push the button off the field's line */
    &:has(.help, .has-error) { align-items: flex-start; & > .btn { margin-top: 26px; } }
  }
  /* ...and when the button has wrapped under the field there is no line left to keep. */
  @container (max-width: 560px) { .inline-fields:has(.help, .has-error) > .btn { margin-top: 0; } }
  .card-foot .inline-fields { flex: 1; }
  .switch-form { display: inline-flex; align-items: center; gap: var(--s-2); }
  .shop-renewal { padding-top: var(--s-4); border-top: 1px dashed var(--border); }

  .domain-list { display: grid; list-style: none; margin: 0; padding: 0; }
  .domain-item { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-top: 1px solid var(--border); }
  /* A domain attached with `www`: its two names, each with its own state and certificate (and its own sentence under them). */
  .domain-hosts { display: grid; gap: var(--s-2); list-style: none; margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
  .domain-host { display: grid; gap: 4px; min-width: 0; }
  .domain-steps { display: grid; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.2em); border-radius: var(--r-md); background: var(--surface-2); }
  .domain-step { display: grid; gap: 2px; min-width: 0; }
  .domain-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .domain-step[data-state="NOT_NEEDED"], .domain-step[data-state="WAITING"] { opacity: .72; }
  .dns-records .dns-value { word-break: break-all; }
  /* The value with its "copy" button stay on one line; what ishop says about the record goes under them. */
  .dns-copy { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

  /* A window that opens WITHOUT a script: by `:target`, and - after a refused form - written `open`
     by the server. With reseller.js the same <dialog> is opened by showModal() and none of this applies. */
  .modal:target, .modal[open]:not(:modal) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 90; margin: auto; height: fit-content;
    opacity: 1; scale: 1; translate: 0 0;
    box-shadow: var(--shadow-lg), 0 0 0 100vmax var(--backdrop);
  }

  /* --------------------------------------------------------- the order form */
  /* The three steps are one form; the pattern's stepper is the way to jump between them. */
  .order-steps { margin-bottom: var(--s-4);
    & a { color: inherit; }
    & li:has(a:hover) { color: var(--text); }
  }
  .cfg-form > .card { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .cfg-form .card-title { margin-bottom: var(--s-4); }
  /* The address field is an input inside a group: the group carries the border, so it carries the error too. */
  .cfg-form .field.has-error .input-group { border-color: var(--danger); }
  /* A plan as a choice card: the name on the left, both prices of each period on the right. */
  .plan-choice { align-items: stretch;
    & .choice-body { flex: 1; }
    & .plan-choice-prices { display: grid; gap: 4px; margin-top: 6px; font-size: var(--fs-13); }
    & .plan-choice-prices > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
    & .plan-choice-prices s { font-size: var(--fs-12); }
  }
  .order-group { display: grid; gap: var(--s-2); }
  .order-extras { display: grid; }
  .order-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: 12px 0; border-bottom: 1px dashed var(--border);
    &:last-child { border-bottom: 0; }
    & .order-extra-what { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
    & .order-extra-what small { color: var(--text-3); font-size: var(--fs-12); }
    & .select { flex: 0 1 280px; width: auto; }
    & .field-error { flex-basis: 100%; }
    &.has-error .field-error { display: block; }
  }
  .address-state { display: block; min-height: 1.4em; font-size: var(--fs-13); color: var(--text-3);
    &[data-state="free"] { color: var(--ok); }
    &[data-state="taken"] { color: var(--danger); }
  }
  .summary-stale { display: none; }
  .cfg-summary.is-stale {
    & .summary-stale { display: flex; }
    & .quote { opacity: 0.45; }
  }
  .cfg-summary .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

  /* -------------------------------------------------- catalog and price list */
  .catalog-head { margin-bottom: var(--s-4); }
  /* Several periods of one item stand one under another, and the three price columns line up by row. */
  .t-stack > span { display: block; white-space: nowrap; min-height: 26px; line-height: 26px; }
  .catalog-name { display: flex; align-items: center; gap: var(--s-3); min-width: 0;
    & > span { min-width: 0; }
  }
  .catalog-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; }
  .plan-head .plan-code { display: block; margin-top: 2px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500; }
  .plan-foot .btn-row > * { flex: 1 1 120px; }
  /* A plan here costs hundreds and carries two prices per period, where the pattern's card had "9,90 zł":
     wider cards, a price that may go under the name, and a value that may go under its label. */
  [data-catalog] .plan-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
  [data-catalog] .plan-head { flex-wrap: wrap; & .plan-price { margin-left: auto; } }
  [data-catalog] .plan-specs div { flex-wrap: wrap; & dd { margin-left: auto; } }
  /* The same rows inside a card's body: the body already has the padding. */
  .card-body > .plan-specs { padding: 0; }
  /* The list drawn as cards: the periods of an item stand one under another on the right, in the same order in every cell. */
  @container (max-width: 700px) {
    .table.stackable td.t-stack { display: grid; grid-template-columns: auto 1fr; align-items: start; row-gap: 0;
      &::before { grid-row: 1 / span 4; line-height: 26px; }
      & > span { grid-column: 2; justify-self: end; }
    }
  }
  .item-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: start; }
  @container page (max-width: 1080px) { .item-layout { grid-template-columns: minmax(0, 1fr); } }
  .item-text { white-space: pre-line; overflow-wrap: anywhere; }
  .item-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3);
    & img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
  }
}