/* ===========================================================================
   Web hosting
   ---------------------------------------------------------------------------
   Loaded after main.css on web-ordering.php and web-order.php.

   Same construction as game.css and ssl.css: built from the palette already in
   main.css -- #242943 ground, #9bf1ff / #53e3fb accent, the muted status tones
   the theme already uses. Nothing here is a new colour and nothing here is a
   new breakpoint; the card grid auto-fits, so there is no column count to walk
   back down through media queries.

   WHY A THIRD FILE RATHER THAN SHARING game.css. The class names would then
   say "game" on a hosting page, and the next person to restyle the game shop
   would have no way of knowing this page rides on it. Three small prefixed
   files that can diverge beat one shared file nobody dares touch.

   THE main.css RULE THIS FILE WORKS AROUND: every <label> is styled as a field
   label -- uppercase, 600 weight, 0.25em letter-spacing. The domain label
   inside a plan card is a real field label so it keeps that, but the plan
   feature list must never be marked up with labels or it renders as shouting.
   =========================================================================== */

:root {
    --web-panel:       rgba(255, 255, 255, 0.045);
    --web-panel-hover: rgba(255, 255, 255, 0.075);
    --web-line:        rgba(255, 255, 255, 0.13);
    --web-line-strong: rgba(255, 255, 255, 0.3);
    --web-muted:       rgba(255, 255, 255, 0.62);
    --web-faint:       rgba(255, 255, 255, 0.42);
    --web-accent:      #9bf1ff;
    --web-accent-deep: #53e3fb;
    --web-good:        #87c5a4;
    --web-warn:        #e7b788;
    --web-bad:         #ec8d81;
    --web-radius:      10px;
    --web-radius-lg:   14px;
}

/* --- shared primitives --------------------------------------------------- */

.web-page .inner { max-width: 1400px; }

.web-lede {
    max-width: 62ch;
    color: var(--web-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.web-breadcrumb {
    margin-top: -1rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--web-muted);
}

.web-panel {
    background: var(--web-panel);
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius-lg);
    padding: 1.75rem;
}

.web-panel + .web-panel { margin-top: 1.5rem; }
.web-panel > h2, .web-panel > h3 { margin-top: 0; }

.web-muted { color: var(--web-muted); }

.web-mono {
    font-family: "Courier New", monospace;
    word-break: break-all;
}

/* --- trust strip --------------------------------------------------------- */

.web-assurances {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
}

.web-assurances li {
    padding: 0;
    color: var(--web-muted);
    font-size: 0.92rem;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.web-assurances li::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--web-accent);
}

/* --- plan grid ----------------------------------------------------------- */

/* Wider minimum than the game grid: every card carries a domain field and a
   feature list, so a 240px column would wrap the input onto two lines. */
/* Cards STRETCH rather than sizing to their own content: a row of pricing
   cards at three different heights reads as broken, and stretching is what
   lets the order buttons line up along the bottom (see .web-order-form). */
/* The upper bound matters as much as the lower one. With `1fr` a single plan
   stretches to the full 1400px content width and reads as a mistake rather
   than as a product -- and the catalogue really can be one plan, which is what
   it is today. Capping the track and centring the row keeps one, two or four
   cards all looking deliberate. */
.web-grid {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
    justify-content: center;
    gap: 1.5rem;
}

.web-card {
    padding: 0;
    background: var(--web-panel);
    border: 1px solid var(--web-line);
    border-radius: var(--web-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.web-card:hover,
.web-card:focus-within {
    background: var(--web-panel-hover);
    border-color: var(--web-line-strong);
}

/* The one plan we would rather sell sits in a lit border instead of a badge
   nobody reads. */
.web-card.is-featured { border-color: rgba(155, 241, 255, 0.45); }

.web-card.is-unavailable { opacity: 0.62; }

.web-card-head {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--web-line);
}

.web-card-head h2 {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    line-height: 1.35;
}

.web-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.web-price { margin: 0; line-height: 1.2; }
.web-price strong { font-size: 2rem; font-weight: 600; color: #fff; }
.web-price span { color: var(--web-muted); font-size: 0.85rem; }

/* min-height, so a one-line blurb and a two-line one leave the head/body rule
   at the same height across a row. Blurbs are operator-edited free text in
   web_plans, so this handles the common case rather than pretending to handle
   every case -- a genuinely long blurb will still push its own card's rule
   down, which is better than truncating what somebody wrote. */
.web-blurb {
    color: var(--web-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0.75rem 0 0;
    min-height: 2.8em;
}

/* The badge row is ALWAYS rendered, empty or not. Without it a card with no
   badge starts its title 1.5rem higher than its neighbours, and a row of
   pricing cards with titles at two different heights looks like a bug. */
.web-card-flag {
    min-height: 1.5rem;
    margin-bottom: 0.6rem;
}

.web-badge {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--web-line);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    color: var(--web-muted);
}

.web-badge-accent { border-color: rgba(155, 241, 255, 0.5); color: var(--web-accent); }
.web-badge-warn   { border-color: rgba(231, 183, 136, 0.5); color: var(--web-warn); }

/* Badge variants for the dashboard. The .web-status-* set above colours a
   LEFT BORDER and only makes sense on .web-status-banner; a badge is a pill
   with no left border to colour, so reusing those here renders nothing. Kept
   as separate names rather than "fixed" in place, because the banner styles
   are correct for the banner. */
.web-badge-good { border-color: rgba(135, 197, 164, 0.5); color: var(--web-good); }
.web-badge-bad  { border-color: rgba(236, 141, 129, 0.5); color: var(--web-bad); }

/* --- the feature list ---------------------------------------------------- */

.web-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.web-features li {
    padding: 0.4rem 0 0.4rem 1.4rem;
    position: relative;
    color: var(--web-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    border: 0;
}

.web-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--web-accent-deep);
}

/* --- the order form inside a card ---------------------------------------- */

.web-order-form { margin-top: auto; }

.web-order-form label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
}

.web-order-form input[type="text"] { margin-bottom: 0.75rem; }

.web-field-note {
    display: block;
    color: var(--web-faint);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: -0.35rem 0 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.web-unavailable-note {
    margin-top: auto;
    color: var(--web-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* --- notices ------------------------------------------------------------- */

.web-notice {
    background: var(--web-panel);
    border: 1px solid var(--web-line);
    border-left: 3px solid var(--web-line-strong);
    border-radius: var(--web-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--web-muted);
}

.web-notice p:last-child { margin-bottom: 0; }
.web-notice-good { border-left-color: var(--web-good); }
.web-notice-warn { border-left-color: var(--web-warn); }
.web-notice-bad  { border-left-color: var(--web-bad); }
/* Neither good nor bad: "we did the thing you asked and it was not an
   emergency". Disconnecting a repository is the case that needed it. */
.web-notice-mute { border-left-color: var(--web-line-strong); }

.web-empty {
    margin: 2.5rem 0;
    padding: 2rem;
    text-align: center;
    color: var(--web-muted);
    border: 1px dashed var(--web-line);
    border-radius: var(--web-radius-lg);
}

/* --- "your hosting" list ------------------------------------------------- */

.web-order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.web-order-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--web-line);
}

.web-order-list li:first-child { border-top: 0; }
.web-order-list .web-order-domain { font-weight: 600; }
.web-order-list .web-order-meta { color: var(--web-muted); font-size: 0.86rem; }
.web-order-list .web-order-action { margin-left: auto; }

/* --- order page ---------------------------------------------------------- */

.web-track {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media screen and (max-width: 736px) {
    .web-track { grid-template-columns: repeat(2, 1fr); }
}

.web-track li {
    padding: 0.75rem 0 0;
    border-top: 3px solid var(--web-line);
    color: var(--web-faint);
    font-size: 0.85rem;
}

.web-track li strong { font-weight: 500; }
.web-track li.is-done    { border-top-color: var(--web-good); color: var(--web-muted); }
.web-track li.is-current { border-top-color: var(--web-accent); color: #fff; }

.web-status-banner {
    background: var(--web-panel);
    border: 1px solid var(--web-line);
    border-left: 3px solid var(--web-line-strong);
    border-radius: var(--web-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    gap: 0.35rem;
}

.web-status-banner strong { font-size: 1.05rem; }
.web-status-banner p { margin: 0; color: var(--web-muted); font-size: 0.92rem; }

.web-status-pending  { border-left-color: var(--web-warn); }
.web-status-progress { border-left-color: var(--web-accent); }
.web-status-good     { border-left-color: var(--web-good); }
.web-status-bad      { border-left-color: var(--web-bad); }
.web-status-muted    { border-left-color: var(--web-line-strong); }

.web-kv { margin: 0; }

.web-kv > div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--web-line);
}

@media screen and (max-width: 736px) {
    .web-kv > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

.web-kv > div:first-child { border-top: 0; }
.web-kv dt { color: var(--web-muted); margin: 0; font-weight: 400; }
.web-kv dd { margin: 0; word-break: break-word; }

.web-timeline {
    list-style: none;
    padding: 0 0 0 1.25rem;
    margin: 0;
}

.web-timeline li {
    position: relative;
    padding: 0 0 1.1rem 1rem;
    border-left: 1px solid var(--web-line);
    color: var(--web-muted);
    font-size: 0.9rem;
}

.web-timeline li::before {
    content: '';
    position: absolute;
    left: -4.5px;
    top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--web-line-strong);
}

.web-timeline li:last-child::before { background: var(--web-accent); }
.web-timeline li strong { color: #fff; display: block; }
.web-timeline time { display: block; color: var(--web-faint); font-size: 0.8rem; margin-top: 0.1rem; }

/* --- accessibility ------------------------------------------------------- */

.web-page :focus-visible {
    outline: 2px solid var(--web-accent);
    outline-offset: 2px;
}

/* --- management dashboard ------------------------------------------------ */

/* web-manage.php only. The shop's .web-card is a plan you might buy; the same
   card on the dashboard is a site you already own, so it grows a row of
   controls and loses the hover lift that implied it was clickable. */
.web-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    padding-top: 1.25rem;
}

.web-actions form { margin: 0; }

.web-actions .button {
    font-size: 0.8rem;
    padding: 0 1rem;
    height: 2.4rem;
    line-height: 2.4rem;
}

/* The head can carry two badges -- the order's status and the site's live
   state -- and they must not run into each other or into the domain above. */
.web-card-head .web-badge + .web-badge { margin-left: 0.4rem; }

/* .web-kv was designed for web-order.php, which is a full-width page: a 10rem
   label column against a wide value column reads well there. Inside a 380px
   card it does not -- 10rem leaves the VALUE column narrower than the LABEL
   (160px against 154px), so "87.9GB used" wraps while half the row sits empty.
   Narrowed here only; the order page keeps the wider gutter it was drawn for. */
.web-card .web-kv > div { grid-template-columns: 6.5rem 1fr; }

@media screen and (max-width: 736px) {
    /* The base rule already collapses to one column below this width. Restated
       so the override above cannot resurrect two columns on a phone. */
    .web-card .web-kv > div { grid-template-columns: 1fr; }
}

.web-smallprint {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--web-line);
    color: var(--web-faint);
    font-size: 0.85rem;
    max-width: 78ch;
}

/* --- reseller-manage.php --------------------------------------------------
   The bundle around a reseller's sites. Each site row is a web hosting order
   and links to its own /web-order page, so the list is deliberately thin: the
   domain, its state, what it is using. */

.rs-add-site { margin: 1.25rem 0 0; }
.rs-add-site label { display: block; margin-bottom: 0.4rem; }

.web-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.web-inline input[type="text"] { flex: 1 1 16rem; max-width: 28rem; }

.rs-sites { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rs-sites li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--web-line);
}
.rs-sites li:first-child { border-top: 0; }