/* =====================================================================
   MYAPIS DESIGN SYSTEM
   =====================================================================

   Taken from the WhizzyBase console designs in
   stitch_unified_api_marketplace/. The palette, the type scale and the
   radii below are the values from that design's Tailwind config, not an
   approximation of the screenshots.

   WHY THIS IS A STYLESHEET AND NOT A THEME

   themes/aurora/ is byte-identical to the pristine starter and every app
   on this instance renders inside it. Editing it would restyle the
   platform app and the script runner as a side effect of restyling
   MyAPIs, which is not a thing one app gets to decide.

   So this file is loaded by MyAPIs pages only, after the theme, and it
   wins on source order. It also redefines the theme's own --wb-*
   properties, which is how the rail and the topbar come along without
   the theme being touched.

   HOW IT IS LOADED

   ma_head() in ma_core.php prints the link, once per request. It is
   emitted inside the body, because the platform theme renders <head>
   and offers no hook to add to it. A stylesheet link in the body is
   honoured by every browser; the alternative was editing the theme.

   ORDER OF THIS FILE
     1. Tokens
     2. The platform shell, retuned through --wb-*
     3. Bootstrap primitives, restyled
     4. MyAPIs components: page head, stat tiles, pills, code, console
     5. Motion and small screens
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root {
    /* Surfaces, darkest to lightest. The design layers these rather than
       using shadow, which is why there are six of them. */
    --ma-surface-lowest:  #060e20;
    --ma-surface:         #0b1326;
    --ma-surface-low:     #131b2e;
    --ma-surface-c:       #171f33;
    --ma-surface-high:    #222a3d;
    --ma-surface-highest: #2d3449;
    --ma-surface-bright:  #31394d;

    /* Ink */
    --ma-on-surface:      #dae2fd;
    --ma-on-surface-var:  #c7c4d7;
    --ma-muted:           #8b93ad;

    /* Lines. outline-variant is the hairline between rows and around
       cards; outline is for something that should be noticed. */
    --ma-outline-variant: #464554;
    --ma-outline:         #908fa0;

    /* Accents */
    --ma-primary:         #c0c1ff;
    --ma-primary-strong:  #8083ff;
    --ma-primary-solid:   #5b5bd6;
    --ma-on-primary:      #ffffff;

    --ma-cyan:            #4cd7f6;
    --ma-cyan-deep:       #03b5d3;

    --ma-green:           #4edea3;
    --ma-green-deep:      #00885d;

    --ma-amber:           #f5c451;
    --ma-amber-deep:      #7a5a12;

    --ma-error:           #ffb4ab;
    --ma-error-deep:      #93000a;

    /* Radii. The design is squarer than Bootstrap's default: 2px on most
       things, 8px on cards, 12px only on pills. */
    --ma-radius-sm:  2px;
    --ma-radius:     4px;
    --ma-radius-lg:  8px;
    --ma-radius-pill: 999px;

    --ma-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --ma-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, "Liberation Mono", monospace;

    /* The theme's own properties, redefined. This is what carries the
       new palette into the rail and the topbar without editing
       themes/aurora/. */
    --wb-rail-bg:        #060e20;
    --wb-rail-fg:        #c7c4d7;
    --wb-rail-fg-active: #ffffff;
    --wb-rail-active-bg: #1b2440;
    --wb-rail-accent:    #8083ff;
    --wb-navy:           #dae2fd;
}


/* =====================================================================
   2. THE SHELL
   ===================================================================== */

body {
    background: var(--ma-surface);
    color: var(--ma-on-surface);
    font-family: var(--ma-font);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

.wb-content {
    background: var(--ma-surface);
    color: var(--ma-on-surface);
}

.wb-topbar {
    background: var(--ma-surface-lowest);
    border-bottom: 1px solid var(--ma-outline-variant);
    color: var(--ma-on-surface);
}

.wb-topbar .wb-page-title {
    color: var(--ma-on-surface);
    font-weight: 600;
}

.wb-topbar .wb-search input {
    background: var(--ma-surface-c);
    border: 1px solid var(--ma-outline-variant);
    color: var(--ma-on-surface);
    border-radius: var(--ma-radius);
}

.wb-topbar .wb-search input::placeholder { color: var(--ma-muted); }

.wb-rail {
    border-right: 1px solid var(--ma-outline-variant);
}

.wb-rail-group {
    color: var(--ma-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 600;
}

/* The active rail item in the design is marked with a bar on the right
   edge rather than only a fill, which reads at a glance on a dark
   background where fills are nearly invisible. */
.wb-rail a.wb-navlink.active {
    position: relative;
    border-radius: var(--ma-radius);
}

.wb-rail a.wb-navlink.active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--ma-primary-strong);
}

.wb-brand .wb-mark {
    background: var(--ma-primary-solid);
    color: #fff;
    border-radius: var(--ma-radius);
}


/* =====================================================================
   3. BOOTSTRAP PRIMITIVES
   ===================================================================== */

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

.card {
    background: var(--ma-surface-c);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    color: var(--ma-on-surface);
    box-shadow: none;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ma-outline-variant);
    color: var(--ma-on-surface);
    font-weight: 600;
    padding: .85rem 1.1rem;
}

.card-body { padding: 1.1rem; }

.card.bg-light,
.card.border-0.bg-light {
    background: var(--ma-surface-low) !important;
    border: 1px solid var(--ma-outline-variant) !important;
}

/* A card that carries a state gets a coloured left edge rather than a
   fully coloured border. On a dark surface a four-sided colour reads as
   an error even when it means "verified". */
.card.border-success,
.card.border-warning,
.card.border-danger,
.card.border-primary,
.card.border-info,
.card.border-secondary {
    border-color: var(--ma-outline-variant) !important;
    border-left-width: 3px !important;
}

.card.border-success { border-left-color: var(--ma-green) !important; }
.card.border-warning { border-left-color: var(--ma-amber) !important; }
.card.border-danger  { border-left-color: var(--ma-error) !important; }
.card.border-primary { border-left-color: var(--ma-primary-strong) !important; }
.card.border-info    { border-left-color: var(--ma-cyan) !important; }

.card-header.bg-primary {
    background: var(--ma-surface-high) !important;
    color: var(--ma-on-surface) !important;
    border-bottom-color: var(--ma-outline-variant);
}

/* ---- type ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { color: var(--ma-on-surface); font-weight: 600; }

h2 { font-size: 2rem; letter-spacing: -.02em; }
h5 { font-size: 1.05rem; }

.text-secondary { color: var(--ma-muted) !important; }
.text-body-secondary { color: var(--ma-muted) !important; }
.small { font-size: 12.5px; }

a { color: var(--ma-primary); text-decoration: none; }
a:hover { color: var(--ma-primary-strong); text-decoration: underline; }

/* ---- buttons -------------------------------------------------------- */

.btn {
    border-radius: var(--ma-radius);
    font-weight: 500;
    font-size: 13px;
    padding: .45rem .9rem;
    border-width: 1px;
}

.btn-sm { font-size: 12.5px; padding: .3rem .7rem; }

.btn-primary {
    background: var(--ma-primary-solid);
    border-color: var(--ma-primary-solid);
    color: var(--ma-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #4b4bc4;
    border-color: #4b4bc4;
    color: #fff;
}

.btn-outline-secondary {
    background: var(--ma-surface-high);
    border-color: var(--ma-outline-variant);
    color: var(--ma-on-surface-var);
}

.btn-outline-secondary:hover {
    background: var(--ma-surface-highest);
    border-color: var(--ma-outline);
    color: var(--ma-on-surface);
}

.btn-outline-primary {
    border-color: var(--ma-primary-strong);
    color: var(--ma-primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(128, 131, 255, .14);
    border-color: var(--ma-primary-strong);
    color: var(--ma-primary);
}

.btn-dark, .btn-outline-dark {
    background: var(--ma-surface-high);
    border-color: var(--ma-outline-variant);
    color: var(--ma-on-surface-var);
}

.btn-dark:hover, .btn-outline-dark:hover {
    background: var(--ma-surface-highest);
    color: var(--ma-on-surface);
}

.btn-warning {
    background: var(--ma-amber);
    border-color: var(--ma-amber);
    color: #2a1f04;
}

.btn-outline-danger {
    border-color: rgba(255, 180, 171, .5);
    color: var(--ma-error);
    background: transparent;
}

.btn-outline-danger:hover {
    background: rgba(255, 180, 171, .12);
    color: var(--ma-error);
}

.btn:disabled, .btn.disabled { opacity: .4; }

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

.form-control, .form-select {
    /* background-color, NOT the background shorthand. The shorthand resets
       every background property, including the repeat, position and size that
       Bootstrap uses to place the chevron on a select. With those gone the
       chevron tiled across the whole control and the field showed a row of
       little arrows. */
    background-color: var(--ma-surface-lowest);
    border: 1px solid var(--ma-outline-variant);
    color: var(--ma-on-surface);
    border-radius: var(--ma-radius);
    font-size: 13px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--ma-surface-lowest);
    border-color: var(--ma-primary-strong);
    color: var(--ma-on-surface);
    box-shadow: 0 0 0 3px rgba(128, 131, 255, .16);
}

.form-control::placeholder { color: var(--ma-muted); }
.form-control[readonly] { background: var(--ma-surface-low); color: var(--ma-on-surface-var); }
.form-label { color: var(--ma-on-surface-var); font-weight: 500; }
.form-text { color: var(--ma-muted); font-size: 12px; }

/* ---- tables --------------------------------------------------------- */

.table {
    color: var(--ma-on-surface);
    border-color: var(--ma-outline-variant);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ma-on-surface);
}

.table thead th {
    background: transparent;
    color: var(--ma-muted);
    border-bottom: 1px solid var(--ma-outline-variant);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11px;
    font-weight: 600;
    padding: .7rem .85rem;
}

/* THE COLUMN PICKER.

   A <details> styled as a button with a panel hanging off it. The panel is
   positioned rather than in the flow so that opening it does not shove the
   records table down the page, which is what an unstyled <details> would do
   and which makes the thing you were looking at jump away as you reach for it.

   It is pinned to the right edge of the summary. Pinned left it would run off
   the side of the card on a narrow window, because the gear sits well along the
   row. The height is capped and scrolls: a table is allowed twelve columns and
   a list that long would otherwise reach past the bottom of the screen with the
   buttons on it. */
.ma-columns {
    position: relative;
    display: inline-block;
}

.ma-columns > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

/* Both spellings are needed: one for Safari, one for everybody else. Without
   them the browser draws its own triangle next to the gear. */
.ma-columns > summary::-webkit-details-marker { display: none; }
.ma-columns > summary::marker { content: ""; }

.ma-gear {
    flex: none;
    display: block;
}

.ma-columns-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 15rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: .9rem 1rem;
    background: var(--ma-surface-high);
    border: 1px solid var(--ma-outline);
    border-radius: var(--ma-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.ma-columns-hint {
    color: var(--ma-muted);
    font-size: 12px;
    margin: 0 0 .6rem;
}

/* A COLUMN HEADING YOU CAN SORT BY.
   It inherits the heading's own colour rather than the link colour, because a
   row of blue underlined words along the top of a table reads as navigation
   away from the page rather than as a control on the table itself. The one
   being sorted by is the one that brightens. */
.ma-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.ma-sort:hover,
.ma-sort:focus-visible {
    color: var(--ma-on-surface);
    text-decoration: none;
}

.ma-sort-on {
    color: var(--ma-primary);
}

.table td, .table th {
    border-color: var(--ma-outline-variant);
    padding: .7rem .85rem;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.table-hover tbody tr:hover > * {
    background: var(--ma-surface-high);
    color: var(--ma-on-surface);
}

/* ---- badges and pills ----------------------------------------------- */

.badge {
    border-radius: var(--ma-radius-pill);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .02em;
    padding: .3em .7em;
}

.text-bg-success   { background: rgba(78, 222, 163, .16) !important; color: var(--ma-green) !important; }
.text-bg-warning   { background: rgba(245, 196, 81, .16) !important; color: var(--ma-amber) !important; }
.text-bg-danger    { background: rgba(255, 180, 171, .16) !important; color: var(--ma-error) !important; }
.text-bg-primary   { background: rgba(128, 131, 255, .18) !important; color: var(--ma-primary) !important; }
.text-bg-info      { background: rgba(76, 215, 246, .16) !important; color: var(--ma-cyan) !important; }
.text-bg-secondary { background: var(--ma-surface-highest) !important; color: var(--ma-on-surface-var) !important; }
.text-bg-light     { background: var(--ma-surface-high) !important; color: var(--ma-on-surface-var) !important; }
.text-bg-dark      { background: var(--ma-surface-highest) !important; color: var(--ma-on-surface-var) !important; }

/* ---- alerts --------------------------------------------------------- */

.alert {
    border-radius: var(--ma-radius-lg);
    border: 1px solid var(--ma-outline-variant);
    border-left-width: 3px;
    font-size: 13px;
    background: var(--ma-surface-c);
    color: var(--ma-on-surface);
}

.alert-success { border-left-color: var(--ma-green); }
.alert-warning { border-left-color: var(--ma-amber); }
.alert-danger  { border-left-color: var(--ma-error); }
.alert-info    { border-left-color: var(--ma-cyan); }
.alert-light   { border-left-color: var(--ma-outline); background: var(--ma-surface-low); }

/* ---- lists ---------------------------------------------------------- */

.list-group { border-radius: var(--ma-radius-lg); }

.list-group-item {
    background: transparent;
    border-color: var(--ma-outline-variant);
    color: var(--ma-on-surface);
    font-size: 13px;
}

.list-group-item.bg-light { background: var(--ma-surface-low) !important; }

.list-group-item-action:hover {
    background: var(--ma-surface-high);
    color: var(--ma-on-surface);
}

.list-group-item-action.active,
.list-group-item.active {
    background: var(--ma-surface-high);
    border-color: var(--ma-outline-variant);
    color: var(--ma-on-surface);
    box-shadow: inset 3px 0 0 var(--ma-primary-strong);
}

/* ---- code ----------------------------------------------------------- */

code, kbd, samp {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    color: var(--ma-primary);
    background: rgba(128, 131, 255, .1);
    padding: .1em .4em;
    border-radius: var(--ma-radius-sm);
}

pre {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    line-height: 1.6;
    background: var(--ma-surface-lowest) !important;
    border: 1px solid var(--ma-outline-variant) !important;
    border-radius: var(--ma-radius-lg) !important;
    color: var(--ma-on-surface-var);
}

pre code { background: transparent; color: inherit; padding: 0; }

.font-monospace { font-family: var(--ma-mono) !important; }

/* Bootstrap's bg-body-tertiary and bg-light are light greys, which are
   unreadable here. Both appear in pages written before this stylesheet. */
.bg-body-tertiary { background: var(--ma-surface-lowest) !important; }
.bg-light { background: var(--ma-surface-low) !important; }

hr { border-color: var(--ma-outline-variant); opacity: 1; }
.border-bottom { border-color: var(--ma-outline-variant) !important; }
.vr { background-color: var(--ma-outline-variant); opacity: 1; }

details summary { cursor: pointer; color: var(--ma-muted); }
details summary:hover { color: var(--ma-on-surface); }


/* =====================================================================
   4. MYAPIS COMPONENTS
   ===================================================================== */

/* ---- page head ------------------------------------------------------ */

.ma-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ma-outline-variant);
}

.ma-page-head h2 {
    margin: 0 0 .3rem 0;
    font-size: 2.1rem;
    letter-spacing: -.025em;
}

.ma-page-head .ma-sub {
    color: var(--ma-muted);
    font-size: 13px;
    margin: 0;
    max-width: 60ch;
}

/* ---- stat tiles ----------------------------------------------------- */

/* The design makes the number the loudest thing on the screen and the
   label the quietest. That is the right way round: the label is read
   once and the number is read every time. */
.ma-tile {
    position: relative;
    background: var(--ma-surface-c);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    padding: 1.15rem 1.25rem;
    height: 100%;
    overflow: hidden;
}

.ma-tile-label {
    color: var(--ma-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    font-weight: 600;
    margin-bottom: .35rem;
}

.ma-tile-value {
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--ma-primary);
}

.ma-tile-hint {
    color: var(--ma-muted);
    font-size: 12px;
    margin-top: .35rem;
}

/* A hairline bar under the number, filled to the share this tile
   represents. Cheap, and it turns four numbers into a comparison. */
.ma-tile-bar {
    margin-top: .7rem;
    height: 3px;
    border-radius: 3px;
    background: var(--ma-surface-highest);
    overflow: hidden;
}

.ma-tile-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ma-primary-strong);
}

.ma-tile-cyan  .ma-tile-value { color: var(--ma-cyan); }
.ma-tile-cyan  .ma-tile-bar > span { background: var(--ma-cyan); }
.ma-tile-green .ma-tile-value { color: var(--ma-green); }
.ma-tile-green .ma-tile-bar > span { background: var(--ma-green); }
.ma-tile-amber .ma-tile-value { color: var(--ma-amber); }
.ma-tile-amber .ma-tile-bar > span { background: var(--ma-amber); }
.ma-tile-error .ma-tile-value { color: var(--ma-error); }
.ma-tile-error .ma-tile-bar > span { background: var(--ma-error); }

.ma-tile-alert { border-left: 3px solid var(--ma-error); }

/* ---- status pill with a dot ----------------------------------------- */

.ma-pill {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    border-radius: var(--ma-radius-pill);
    padding: .28em .75em;
    font-size: 11px;
    font-weight: 500;
    background: var(--ma-surface-highest);
    color: var(--ma-on-surface-var);

    /* A pill must not wrap. In a narrow table column it wrapped to three
       lines and the rounded corners turned it into a blob with a dot in it.
       Found by looking at the page rather than at the status code. */
    white-space: nowrap;
}

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

.ma-pill-green { background: rgba(78, 222, 163, .14); color: var(--ma-green); }
.ma-pill-amber { background: rgba(245, 196, 81, .14); color: var(--ma-amber); }
.ma-pill-red   { background: rgba(255, 180, 171, .14); color: var(--ma-error); }
.ma-pill-cyan  { background: rgba(76, 215, 246, .14); color: var(--ma-cyan); }

/* ---- method chips --------------------------------------------------- */

.ma-method {
    font-family: var(--ma-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: .25em .55em;
    border-radius: var(--ma-radius-sm);
    background: var(--ma-surface-highest);
    color: var(--ma-on-surface-var);
}

.ma-method-get  { background: rgba(76, 215, 246, .15); color: var(--ma-cyan); }
.ma-method-post { background: rgba(128, 131, 255, .18); color: var(--ma-primary); }

/* ---- icon badge ----------------------------------------------------- */

.ma-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ma-radius-lg);
    background: rgba(128, 131, 255, .14);
    color: var(--ma-primary);
    font-size: 1.05rem;
    flex: none;
}

/* ---- catalogue tile ------------------------------------------------- */

.ma-card-tile {
    transition: border-color .15s ease, transform .15s ease;
}

.ma-card-tile:hover {
    border-color: var(--ma-outline);
    transform: translateY(-1px);
}

/* ---- key and token fields ------------------------------------------- */

/* A key is read character by character when somebody is comparing it
   against another one, so it is monospace and it selects on click. */
.ma-key {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    background: var(--ma-surface-lowest);
    border: 1px solid var(--ma-outline-variant);
    color: var(--ma-on-surface);
    border-radius: var(--ma-radius);
    width: 100%;
    padding: .5rem .7rem;
}

.ma-key:focus {
    outline: none;
    border-color: var(--ma-primary-strong);
    box-shadow: 0 0 0 3px rgba(128, 131, 255, .16);
}

/* ---- the console response header ------------------------------------ */

.ma-response-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--ma-outline-variant);
    background: var(--ma-surface-low);
}

.ma-status {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .3em .75em;
    border-radius: var(--ma-radius-pill);
}

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

.ma-status-2xx { background: rgba(78, 222, 163, .14); color: var(--ma-green); }
.ma-status-4xx { background: rgba(245, 196, 81, .14); color: var(--ma-amber); }
.ma-status-5xx { background: rgba(255, 180, 171, .14); color: var(--ma-error); }
.ma-status-0   { background: var(--ma-surface-highest); color: var(--ma-muted); }

/* ---- JSON colouring, done by the server ----------------------------- */

/* The console prints JSON with these spans around the parts. Doing it
   server side means no syntax highlighting library and no script in a
   page that is already showing somebody else's data. */
.ma-json .k { color: var(--ma-cyan); }
.ma-json .s { color: var(--ma-green); }
.ma-json .n { color: var(--ma-amber); }
.ma-json .b { color: var(--ma-primary); }
.ma-json .z { color: var(--ma-muted); }

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

.ma-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    background: var(--ma-surface-low);
}

.ma-empty h5 { margin-bottom: .4rem; }
.ma-empty p { color: var(--ma-muted); margin: 0 auto; max-width: 46ch; font-size: 13px; }

/* ---- the nav row on dashboards -------------------------------------- */

.ma-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-bottom: .8rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--ma-outline-variant);
}

.ma-nav .btn { border-radius: var(--ma-radius-pill); }


/* =====================================================================
   5. MOTION AND SMALL SCREENS
   ===================================================================== */

/* The theme animates cards in. Anybody who has asked their system not to
   animate things has asked for a reason. */
@media (prefers-reduced-motion: reduce) {
    .wb-animate, .wb-animate-2, .wb-animate-3, .ma-card-tile {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    h2, .ma-page-head h2 { font-size: 1.55rem; }
    .ma-tile-value { font-size: 1.8rem; }
    .ma-page-head { gap: .8rem; }
}

/* Tables of keys and endpoints are wide by nature. They scroll inside
   their own box rather than making the whole page scroll sideways. */
.table-responsive { border-radius: var(--ma-radius-lg); }

/* ---- the landing hero, for a visitor who has not signed in -------------
   A signed-out visitor used to arrive at a bare grid of cards with nothing
   saying what any of it was. This is the one place in the app that sells
   rather than explains, so it is the one place with a gradient. It uses the
   same tokens as everything else, so it follows the theme rather than
   fighting it. */
.ma-hero {
    background:
        radial-gradient(1200px 400px at 15% -20%, rgba(128, 131, 255, .18), transparent 60%),
        var(--ma-surface-low);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    padding: 2.25rem 2rem;
}

.ma-hero-tag {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ma-primary);
    margin: 0 0 .85rem;
}

.ma-hero-title {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--ma-on-surface);
    margin: 0 0 .75rem;
    max-width: 30ch;
}

.ma-hero-sub {
    color: var(--ma-on-surface-var);
    font-size: 14.5px;
    max-width: 62ch;
    margin: 0;
}

/* The free package. Three figures, readable at a glance, wrapping to one per
   line on a phone rather than shrinking to nothing. */
.ma-hero-free {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ma-outline-variant);
}

.ma-hero-free-label {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-muted);
}

.ma-hero-figure {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.ma-hero-figure strong {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ma-primary);
    font-variant-numeric: tabular-nums;
}

.ma-hero-figure span {
    font-size: 13px;
    color: var(--ma-on-surface-var);
}

@media (max-width: 575.98px) {
    .ma-hero { padding: 1.5rem 1.25rem; }
    .ma-hero-free { gap: .85rem 1.25rem; }
}

/* ---- the agent's conversation view on the Live help dashboard ---------
   Deliberately the same shape as the visitor widget in myapis.js, so an
   agent and a visitor are looking at the same conversation drawn the same
   way, and neither has to translate. */
.ma-chat-log {
    max-height: 22rem;
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius);
    background: var(--ma-surface-lowest);
}

.ma-chat-line {
    display: flex;
    flex-direction: column;
    margin-bottom: .6rem;
}

.ma-chat-who {
    font-size: 11.5px;
    color: var(--ma-muted);
    margin-bottom: .15rem;
}

.ma-chat-body {
    white-space: pre-wrap;
    word-break: break-word;
    padding: .4rem .6rem;
    border-radius: var(--ma-radius-sm);
    background: var(--ma-surface-high);
    align-self: flex-start;
    max-width: 85%;
}

/* The agent's own messages sit on the right, which is the arrangement every
   messaging app has taught people to read without thinking about it. */
.ma-chat-agent {
    align-items: flex-end;
}

.ma-chat-agent .ma-chat-body {
    background: rgba(91, 91, 214, .22);
    align-self: flex-end;
}

/* =====================================================================
   THINGS THAT WERE BEING USED BEFORE THEY EXISTED
   =====================================================================

   Found on 2026-08-30 by listing every class the pages use and subtracting
   the ones this file defines.

   .ma-card was in six pages, twenty times, including the documentation, the
   app home page and site management, and it was never written. Those panels
   have been rendering as bare divs: no surface, no border, no padding, their
   contents running into the page. Nothing failed, no check went red, and a
   screenshot was the only way it was ever going to be noticed.

   The rest are Bootstrap components on a dark page. The body is dark because
   this file makes it dark, not because Bootstrap was told: there is no
   data-bs-theme on the document, so any component this file does not restate
   keeps its light defaults. A white select on a near-black panel is the
   result. */

/* ---- the panel the whole app is built out of ------------------------ */

/* Same surface, border and radius as .card, because it is the same idea with
   fewer parts. Kept as its own class rather than an alias so a page can say
   which it means. */
.ma-card {
    background: var(--ma-surface-c);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    color: var(--ma-on-surface);
    padding: 1.25rem 1.35rem;
}

.ma-card > h2:first-child,
.ma-card > h3:first-child {
    margin-top: 0;
}

/* A card that is about to do something irreversible. Used by Delete this
   site, which is the one action in the dashboard with no undo. */
.ma-card.border-danger {
    border-color: var(--ma-error);
}

/* ---- code somebody is meant to copy ---------------------------------- */

/* Darker than the panel it sits on, so a block of curl reads as a thing
   apart from the prose around it rather than as more prose. */
.ma-code {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--ma-surface-lowest);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius);
    color: var(--ma-on-surface-var);
    padding: .85rem 1rem;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

.ma-code code {
    color: inherit;
    background: none;
    padding: 0;
    font-size: inherit;
}

/* ---- Bootstrap components this file had not restated ----------------- */

/* Selects were already themed above, together with .form-control. The one
   thing that was not is the chevron: Bootstrap draws it as a dark SVG for a
   light control, so on this surface it is invisible against the field. Only
   that is restated here, because repeating the background and the focus ring
   would give selects a focus ring subtly different from every other field. */
.form-select {
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b93ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* An open dropdown is drawn by the operating system, so its list needs the
   colours stating even though the closed control already has them. */
.form-select option {
    background: var(--ma-surface-c);
    color: var(--ma-on-surface);
}

/* Checkboxes and radios. */
.form-check-input {
    background-color: var(--ma-surface-lowest);
    border: 1px solid var(--ma-outline);
}

.form-check-input:checked {
    background-color: var(--ma-primary-solid);
    border-color: var(--ma-primary-solid);
}

.form-check-input:focus {
    border-color: var(--ma-primary-strong);
    box-shadow: 0 0 0 3px rgba(128, 131, 255, .16);
}

.form-check-label {
    color: var(--ma-on-surface-var);
}

/* The two outline buttons that were missed when the others were done. */
.btn-outline-success {
    color: var(--ma-green);
    border-color: var(--ma-green);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--ma-green);
    color: var(--ma-surface-lowest);
    border-color: var(--ma-green);
}

.btn-outline-warning {
    color: var(--ma-amber);
    border-color: var(--ma-amber);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: var(--ma-amber);
    color: var(--ma-surface-lowest);
    border-color: var(--ma-amber);
}

/* Bootstrap's muted grey is chosen for a white page and is close to unreadable
   on this one. This file already has a colour for the same intent. */
.text-muted {
    color: var(--ma-muted) !important;
}

.text-danger { color: var(--ma-error) !important; }

/* Definition lists, used by the workflow page to explain the steps. */
dl dt { color: var(--ma-on-surface); font-weight: 600; }
dl dd { color: var(--ma-muted); }

/* ---- the workflow canvas -------------------------------------------- */

/* Drawflow ships a stylesheet drawn for a white page: white nodes, dark text,
   dark connector lines. On this surface every one of those is wrong, so the
   parts that carry colour are restated here.
   These lived in a <style> block inside api_flow.php with six hard coded
   colours, one of which fell back to white and put a bright panel in the
   middle of a dark page. */
.ma-flow-canvas {
    position: relative;
    width: 100%;
    height: 460px;
    background: var(--ma-surface-lowest);
    background-image: radial-gradient(var(--ma-outline-variant) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius-lg);
    overflow: hidden;
}

.drawflow .drawflow-node {
    background: var(--ma-surface-high);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius);
    color: var(--ma-on-surface);
    padding: .7rem .8rem;
    width: auto;
    min-width: 200px;
    box-shadow: none;
}

.drawflow .drawflow-node.selected {
    border-color: var(--ma-primary-strong);
    background: var(--ma-surface-highest);
}

/* The dots a connection is dragged between. */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    background: var(--ma-surface-bright);
    border: 2px solid var(--ma-primary-strong);
    height: 13px;
    width: 13px;
}

.drawflow .connection .main-path {
    stroke: var(--ma-primary-strong);
    stroke-width: 2.5px;
}

.drawflow .connection .main-path:hover {
    stroke: var(--ma-cyan);
}

/* The step itself. */
.ma-flow-node { font-size: .8rem; }

.ma-flow-head {
    font-weight: 600;
    color: var(--ma-primary);
    letter-spacing: .01em;
    margin-bottom: .1rem;
}

.ma-flow-hint {
    color: var(--ma-muted);
    font-size: .71rem;
    margin-bottom: .4rem;
}

.ma-flow-check {
    display: block;
    font-size: .71rem;
    color: var(--ma-on-surface-var);
}

.ma-flow-fields {
    max-height: 108px;
    overflow-y: auto;
    padding-right: .2rem;
}

/* One palette button per step type, so the canvas reads as a toolbox. */
.ma-flow-palette { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---- the expandable detail on each documented action ----------------- */

/* Thirty one of these sit inside the endpoint tables on the documentation
   page. Without a rule the summary is a bare browser triangle on a table row,
   and the panel it opens runs straight into the row below it. */
.ma-doc-detail {
    border-top: 1px dashed var(--ma-outline-variant);
    background: var(--ma-surface-low);
}

.ma-doc-detail > summary {
    cursor: pointer;
    padding: .5rem .75rem;
    color: var(--ma-primary);
    list-style: none;
    user-select: none;
}

/* The browser's own marker is replaced so the open and shut states read the
   same way in every browser rather than three different ways. */
.ma-doc-detail > summary::-webkit-details-marker { display: none; }

.ma-doc-detail > summary::before {
    content: "+";
    display: inline-block;
    width: 1rem;
    font-family: var(--ma-mono);
    color: var(--ma-muted);
}

.ma-doc-detail[open] > summary::before { content: "-"; }

.ma-doc-detail > summary:hover { color: var(--ma-cyan); }

.ma-doc-detail[open] {
    border-bottom: 1px solid var(--ma-outline-variant);
}

/* =====================================================================
   BOOTSTRAP COLOURS THAT ARE STILL THE WRONG WAY UP
   =====================================================================

   Found on 2026-08-30 by listing every colour bearing class the pages use and
   subtracting the ones this file restates.

   The worst of them are the emphasis inks. Bootstrap picks those for text on a
   white page, so danger is #58151c and success is #0a3622: near black reds and
   greens, printed here on a panel that is #171f33. They are legible in the
   sense that the pixels differ, and unreadable in every sense that matters.

   The rest are lines and fills that quietly belong to another palette: the
   default border is #dee2e6, which on this surface is a bright white rule. */

/* Emphasis inks, using this app's own accents rather than Bootstrap's. */
.text-danger-emphasis  { color: var(--ma-error) !important; }
.text-success-emphasis { color: var(--ma-green) !important; }
.text-warning-emphasis { color: var(--ma-amber) !important; }
.text-info-emphasis    { color: var(--ma-cyan) !important; }

/* Bare .border draws --bs-border-color, which is nearly white. */
.border,
.border-top,
.border-end,
.border-bottom,
.border-start { border-color: var(--ma-outline-variant) !important; }

.border-primary        { border-color: var(--ma-primary-strong) !important; }
.border-danger         { border-color: var(--ma-error) !important; }
.border-warning        { border-color: var(--ma-amber) !important; }
.border-success        { border-color: var(--ma-green) !important; }

/* The subtle variants are lighter still, and used on the documentation page
   to separate a good example from a bad one. */
.border-danger-subtle  { border-color: rgba(255, 180, 171, .35) !important; }
.border-success-subtle { border-color: rgba(78, 222, 163, .35) !important; }
.border-warning-subtle { border-color: rgba(255, 200, 120, .35) !important; }

/* Fills. bg-primary was Bootstrap's blue rather than this app's. */
.bg-primary { background-color: var(--ma-primary-solid) !important; }

.btn-danger {
    background: var(--ma-error-deep);
    border-color: var(--ma-error-deep);
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--ma-error);
    border-color: var(--ma-error);
    color: var(--ma-surface-lowest);
}

/* =====================================================================
   NOTHING WIDER THAN THE BOX IT IS IN
   =====================================================================

   This app prints values that are unusually hostile to a layout, because none
   of them contain a space and so nothing wraps them on its own:

     a publishable key      38 characters
     a bundle checksum      64
     a secret               70
     a studio endpoint url  81 and upwards

   Those were being handled by a style="overflow-x:auto" written inline on six
   of the eleven <pre> elements in the app, which means five were not handled at
   all, and a long line in one of those pushes the whole page sideways rather
   than scrolling inside its own panel.

   One rule, here, instead of six patches scattered through the markup. */

/* Any preformatted block scrolls inside itself. */
pre {
    overflow-x: auto;
    max-width: 100%;
}

/* The console's JSON, which is the longest thing on any page. */
.ma-json {
    font-family: var(--ma-mono);
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--ma-surface-lowest);
    border: 1px solid var(--ma-outline-variant);
    border-radius: var(--ma-radius);
    color: var(--ma-on-surface-var);
    overflow-x: auto;
    max-width: 100%;
}

/* A key or a URL inside a table cell breaks rather than widening the column.
   The table can still scroll, but a reader should not have to scroll to see
   the end of a value when it could simply wrap. */
td code,
td .ma-key,
th code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* A card is a box, and nothing in it may reach past its edge. Without this a
   single long word in any panel widens the panel, and the panel widens the
   page. */
.ma-card,
.card-body {
    overflow-wrap: anywhere;
}

/* Except where breaking a word would be wrong: code that is meant to be copied
   whole, and the canvas, which manages its own scrolling. */
.ma-card pre,
.card-body pre,
.ma-flow-canvas {
    overflow-wrap: normal;
}

/* An If has two outputs, and which is which has to be obvious without reading
   the documentation. The yes path leaves from the top. */
.ma-flow-branch .ma-flow-head { color: var(--ma-amber); }

.drawflow .ma-flow-branch .output_1 { border-color: var(--ma-green); }
.drawflow .ma-flow-branch .output_2 { border-color: var(--ma-error); }