/* ===========================================================================
   Managed services
   ---------------------------------------------------------------------------
   Loaded after main.css on ms-ordering.php, ms-configure.php and ms-order.php.

   Same construction as web.css, 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 FOURTH PREFIXED FILE RATHER THAN SHARING web.css. The class names
   would then say "web" on a managed services page, and the next person to
   restyle the hosting shop would have no way of knowing this page rides on it.
   Four small prefixed files that can diverge beat one shared file nobody dares
   touch. The duplication is real and it is the cheaper of the two costs.

   THE main.css RULE THIS FILE WORKS AROUND: every <label> is styled as a field
   label -- uppercase, 600 weight, 0.25em letter-spacing. That is right for the
   real field labels on the configure page, and wrong for a feature list, so
   features are never marked up with labels or they render as shouting.

   WHAT IS NEW HERE, AND WHY. Managed services is the only product on this site
   priced PER UNIT, so two things exist that no other page needed: a quantity
   stepper (.ms-qty) and a sticky order summary (.ms-summary) that shows the
   arithmetic. A per-unit price with no visible total is a page that makes the
   customer do multiplication before they will hand over a card.
   =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

.ms-assurances li::before {
    content: "\2713";
    color: var(--ms-accent);
    margin-right: 0.55rem;
    font-weight: 600;
}

/* --- category sections --------------------------------------------------- */

.ms-section { margin-top: 3rem; }

.ms-section-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--ms-line);
    padding-bottom: 0.75rem;
    margin-bottom: 1.75rem;
}

.ms-section-head h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ms-section-head span {
    color: var(--ms-faint);
    font-size: 0.85rem;
}

/* --- the card grid ------------------------------------------------------- */

.ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: stretch;
}

.ms-card {
    display: flex;
    flex-direction: column;
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

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

.ms-card.is-featured { border-color: rgba(155, 241, 255, 0.45); }
.ms-card.is-unavailable { opacity: 0.72; }

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

.ms-card-head h3 {
    margin: 0.35rem 0 0.75rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

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

/* The per-unit price. The unit is not small print here -- it is half the
   price, and a customer who reads "£3.50" and misses "per workstation" has
   been misled by the typography rather than by the words. */
.ms-price { margin: 0; line-height: 1.2; }
.ms-price strong { font-size: 2rem; font-weight: 600; color: #fff; }
.ms-price span {
    color: var(--ms-muted);
    font-size: 0.85rem;
    display: block;
    margin-top: 0.2rem;
}

.ms-blurb {
    margin: 0.85rem 0 0;
    color: var(--ms-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Always rendered, badge or not, so cards in one row keep their headings on
   the same baseline whether or not they carry a flag. */
.ms-card-flag { min-height: 1.5rem; }

.ms-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--ms-line-strong);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ms-badge-accent { border-color: rgba(155, 241, 255, 0.5); color: var(--ms-accent); }
.ms-badge-warn   { border-color: rgba(231, 183, 136, 0.5); color: var(--ms-warn); }
.ms-badge-good   { border-color: rgba(135, 197, 164, 0.5); color: var(--ms-good); }

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

.ms-features li {
    padding: 0 0 0 1.4rem;
    position: relative;
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.45rem;
}

.ms-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ms-accent);
    font-weight: 600;
}

.ms-card-action { margin-top: auto; }

.ms-unavailable-note {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--ms-muted);
    font-size: 0.9rem;
}

.ms-unavailable-note p { margin-bottom: 0.85rem; }

/* --- notices and empties ------------------------------------------------- */

.ms-notice {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-line-strong);
    border-radius: var(--ms-radius);
    font-size: 0.95rem;
}

.ms-notice p:last-child { margin-bottom: 0; }
.ms-notice-good { border-left-color: var(--ms-good); }
.ms-notice-warn { border-left-color: var(--ms-warn); }
.ms-notice-bad  { border-left-color: var(--ms-bad); }

.ms-empty {
    margin-top: 2.5rem;
    padding: 2.5rem;
    text-align: center;
    background: var(--ms-panel);
    border: 1px dashed var(--ms-line);
    border-radius: var(--ms-radius-lg);
    color: var(--ms-muted);
}

/* --- "your services" list ------------------------------------------------ */

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

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

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

/* --- the configure page -------------------------------------------------- */

.ms-configure {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 2.5rem;
}

@media screen and (max-width: 980px) {
    .ms-configure { grid-template-columns: 1fr; }
}

.ms-fieldset {
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    background: var(--ms-panel);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
}

.ms-fieldset legend {
    padding: 0 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-accent);
}

.ms-field-note {
    display: block;
    margin: -0.4rem 0 1.1rem;
    color: var(--ms-faint);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* The quantity stepper. A number input on its own is a fiddly target on a
   phone and gives no sense of the range; the buttons make the common change
   -- one more seat -- a single tap. The input stays a real number input so
   the keyboard is right and so the form works with the buttons removed. */
.ms-qty {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 15rem;
    margin-bottom: 0.5rem;
}

.ms-qty input[type="number"] {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    -moz-appearance: textfield;
}

.ms-qty input[type="number"]::-webkit-outer-spin-button,
.ms-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ms-qty button {
    flex: 0 0 3rem;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius);
    background: transparent;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ms-qty button:hover:not(:disabled) {
    background: var(--ms-panel-hover);
    border-color: var(--ms-accent);
}

.ms-qty button:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- the order summary --------------------------------------------------- */

.ms-summary {
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-lg);
    padding: 1.6rem;
    position: sticky;
    top: 2rem;
}

@media screen and (max-width: 980px) {
    .ms-summary { position: static; }
}

.ms-summary h2 { margin: 0 0 1.1rem; font-size: 1rem; }

.ms-summary dl { margin: 0 0 1.1rem; }

.ms-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--ms-line);
    font-size: 0.9rem;
}

.ms-summary dl > div:first-child { border-top: 0; }
.ms-summary dt { color: var(--ms-muted); margin: 0; }
.ms-summary dd { margin: 0; text-align: right; }

.ms-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ms-line-strong);
    margin: 0 0 0.4rem;
}

.ms-summary-total span { color: var(--ms-muted); font-size: 0.9rem; }
.ms-summary-total strong { font-size: 1.75rem; font-weight: 600; color: #fff; }

.ms-summary-note {
    color: var(--ms-faint);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 0.9rem 0 0;
}

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

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

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

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

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

.ms-status-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 1.5rem;
    background: var(--ms-panel);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-line-strong);
    border-radius: var(--ms-radius);
}

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

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

.ms-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
}

.ms-detail-grid dt {
    color: var(--ms-faint);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}

.ms-detail-grid dd { margin: 0; font-size: 0.98rem; }

.ms-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ms-timeline li {
    padding: 0.7rem 0 0.7rem 1.25rem;
    border-top: 1px solid var(--ms-line);
    position: relative;
    font-size: 0.92rem;
}

.ms-timeline li:first-child { border-top: 0; }

.ms-timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ms-accent);
}

.ms-timeline time {
    display: block;
    color: var(--ms-faint);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* The "what happens next" list on the order page. Numbered, because it is a
   sequence the customer is being asked to follow rather than a set of facts. */
.ms-next {
    counter-reset: ms-next;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ms-next li {
    counter-increment: ms-next;
    position: relative;
    padding: 0 0 0 2.4rem;
    margin-bottom: 1rem;
    color: var(--ms-muted);
    line-height: 1.6;
}

.ms-next li::before {
    content: counter(ms-next);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--ms-line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--ms-accent);
}

/* ===========================================================================
   The services hub and the manage page
   ---------------------------------------------------------------------------
   Added 2026-08-24. Everything below is layout for two pages that did not
   exist: my-services.php, and ms-manage.php.

   NO NEW COLOURS AND NO NEW BREAKPOINTS. Every value here comes from the
   token block at the top of this file, which is itself the palette main.css
   already uses. The grids auto-fit, so there is no column count to unwind.
   =========================================================================== */

/* --- stat tiles ----------------------------------------------------------
   Number first, label under, and the state carried by a left stripe as well
   as by the colour -- so "something needs attention" survives being read at a
   glance, on a bad monitor, or by somebody who does not distinguish the two
   warm hues. The stripe is the redundant encoding, not decoration. */
.ms-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.ms-stat {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid var(--ms-line);
    border-left-width: 3px;
    border-radius: var(--ms-radius);
    padding: 1rem 1.15rem;
}

.ms-stat-n {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    /* Digits line up between tiles rather than jittering by glyph width. */
    font-variant-numeric: tabular-nums;
}

.ms-stat-l {
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ms-faint);
    margin-top: 0.25rem;
}

.ms-stat-note { font-size: 0.82rem; color: var(--ms-muted); margin: 0.4rem 0 0; }

.ms-stat-good { border-left-color: var(--ms-good); }
.ms-stat-warn { border-left-color: var(--ms-warn); }
.ms-stat-acc  { border-left-color: var(--ms-accent); }
.ms-stat-mute { border-left-color: var(--ms-line-strong); }

/* --- status pills --------------------------------------------------------
   A dot plus a word. The dot is what makes a row scannable in a list; the
   word is what makes it unambiguous. */
.ms-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border: 1px solid var(--ms-line-strong);
    border-radius: 999px;
    padding: 0.16rem 0.6rem;
    white-space: nowrap;
}

.ms-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ms-pill-good { color: var(--ms-good); border-color: rgba(135, 197, 164, 0.45); }
.ms-pill-warn { color: var(--ms-warn); border-color: rgba(231, 183, 136, 0.45); }
.ms-pill-bad  { color: var(--ms-bad);  border-color: rgba(236, 141, 129, 0.45); }
.ms-pill-acc  { color: var(--ms-accent); border-color: rgba(155, 241, 255, 0.45); }
.ms-pill-mute { color: var(--ms-faint); }

/* --- the subscription list ----------------------------------------------- */
.ms-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.95rem 0;
    border-top: 1px solid var(--ms-line);
}

.ms-sub:first-of-type { border-top: 0; }
.ms-sub-name { font-weight: 600; }
.ms-sub-meta { color: var(--ms-muted); font-size: 0.86rem; }
.ms-sub-act  { margin-left: auto; display: flex; gap: 0.5rem; }

/* --- the console hand-off panel ------------------------------------------
   Deliberately accent-bordered: on the manage page it is the thing the
   customer came for, and everything else is administration around it. */
.ms-console { border-color: rgba(155, 241, 255, 0.35); }

.ms-btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- billing smallprint --------------------------------------------------- */
.ms-danger { color: var(--ms-warn); font-weight: 600; }

/* --- inline code block, for the agent config ------------------------------ */
.ms-code {
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    padding: 0.9rem 1rem;
    margin: 0.8rem 0 0;
    /* Wide content scrolls inside its own box; the page never scrolls
       sideways because of it. */
    overflow-x: auto;
    color: var(--ms-muted);
    white-space: pre;
}

/* --- usage meter ----------------------------------------------------------
   Shown only when something has actually been measured. The bar is capped at
   100% while the numbers above it are not -- "40 of 5" stays 40 of 5, because
   the fact is the point and a bar cannot express it. */
.ms-meter {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    margin-top: 0.6rem;
}

.ms-meter i { display: block; height: 100%; background: var(--ms-accent); }

/* Over the allowance changes the colour as well as the width, so the state
   survives being read at a glance or by somebody who cannot separate the two. */
.ms-meter i.is-over { background: var(--ms-warn); }

/* A neutral notice. "Nothing was different, so nothing changed" is not good
   news, bad news or a warning -- it is an acknowledgement, and colouring it
   as any of the other three would overstate it. */
.ms-notice-mute { border-left-color: var(--ms-line-strong); }