/* ==========================================================================
   Blog admin — loaded AFTER app.css, which supplies the tokens, fonts, glass
   surfaces and buttons. Only the pieces with no public-site equivalent live
   here: the top bar, the data table and the form grid.
   ========================================================================== */

body.admin {
    background: var(--bg);
    min-height: 100vh;
}

/* Same blue/gold wash as the banner, held well back so it reads as paper. */
.admin__wash {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(52% 46% at 8% 4%,  rgba(232, 170, 66, .20) 0%, rgba(232, 170, 66, 0) 66%),
        radial-gradient(48% 44% at 94% 8%, rgba(38, 173, 213, .22) 0%, rgba(38, 173, 213, 0) 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, var(--bg) 92%);
}
.admin__main { position: relative; z-index: 1; padding: clamp(24px, 4vw, 44px) 0 90px; }

/* ---- top bar: the site's flush nav, minus the public navigation ---- */
.abar {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--stroke);
}
.abar__in {
    min-height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; padding-block: 12px;
}
.abar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.abar__logo { height: 30px; width: auto; display: block; flex: none; }
.abar__brand span {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
    white-space: nowrap;                 /* never drops under the logo */
}
.abar__nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.abar__link {
    color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;                 /* keeps "View site ↗" on one line */
}
.abar__link:hover { color: var(--blue); }
.abar__link .ic { width: 14px; height: 14px; }
.abar__who { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-4); letter-spacing: .04em; }
.abar__out { padding: 9px 16px; font-size: .85rem; }

/* ---- notices ---- */
.note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: var(--r); margin: 0 0 22px;
    font-size: .9rem; border: 1px solid var(--stroke);
}
.note .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.note--ok  { background: rgba(18, 136, 92, .07);  border-color: rgba(18, 136, 92, .25);  color: #0d6b47; }
.note--bad { background: rgba(207, 50, 68, .06);  border-color: rgba(207, 50, 68, .24);  color: #9b2c20; }

/* ---- page heads ---- */
.head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; margin-bottom: clamp(20px, 3vw, 30px); flex-wrap: wrap;
}
.head h1 {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; color: var(--ink);
}
.head .count { color: var(--ink-4); font-weight: 400; font-size: 1rem; }

.empty {
    background: var(--surface); border: 1px dashed var(--stroke-2); border-radius: var(--r-lg);
    padding: 60px 30px; text-align: center; color: var(--ink-3);
}

/* app.css gives .glass a sheen across its top 30%, which is a highlight on a
   small card but a white veil over the first rows of a tall table or the top
   fields of a long form — and being absolutely positioned it paints above the
   text. The surface, border and shadow are kept; only the sheen goes. */
.admin .glass::before { content: none; }

/* Buttons come from app.css; these only stop long labels wrapping the icon
   onto its own line, which is what happens when the label runs out of room. */
.admin .btn { white-space: nowrap; }
.admin .btn .ic { flex: none; }

/* ---- data table, on a glass card ---- */
.tbl-wrap { border-radius: var(--r-lg); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--stroke); }
.tbl th {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
    background: rgba(255, 255, 255, .5);
}
.tbl tbody tr { transition: background .25s var(--ease); }
.tbl tbody tr:hover { background: rgba(38, 173, 213, .04); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl__title {
    display: block; color: var(--ink); font-weight: 550; text-decoration: none;
    font-family: var(--font-display); letter-spacing: -.02em;
}
.tbl__title:hover { color: var(--blue); }
.tbl__slug { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-4); }
.tbl .right { text-align: right; white-space: nowrap; }
.tbl .right form { display: inline; margin-left: 14px; }
.tbl .mono { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }

.thumb { width: 76px; }
.thumb img { width: 62px; height: 42px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--stroke); }
.thumb__none {
    width: 62px; height: 42px; border-radius: 8px; display: grid; place-items: center;
    background: var(--tint-b); color: var(--ink-4); font-size: .8rem;
}

.pill {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    background: var(--tint-c); color: var(--ink-3);
}
.pill--on { background: rgba(18, 136, 92, .1); color: #0d6b47; }

.lnk {
    color: var(--blue); text-decoration: none; font-size: .875rem; font-weight: 500;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.lnk:hover { text-decoration: underline; }
.lnk--bad { color: var(--down); }

/* ---- forms ---- */
.form { display: grid; gap: 20px; padding: clamp(22px, 3vw, 34px); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label { display: grid; gap: 7px; }
.form label > span { font-size: .84rem; font-weight: 550; color: var(--ink-2); }
.form label > span em { font-style: normal; font-weight: 400; color: var(--ink-4); }

.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=date], .form select, .form textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--stroke-2); border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .8);
    font-family: var(--font-body); font-size: .93rem; color: var(--ink);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form textarea { resize: vertical; line-height: 1.7; }
.form textarea.mono { font-family: var(--font-mono); font-size: .85rem; }
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(38, 173, 213, .16);
}
.form input[type=file] { font-size: .88rem; color: var(--ink-3); }

.check { display: flex; align-items: flex-start; gap: 11px; }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); }
.actions { display: flex; align-items: center; gap: 20px; padding-top: 6px; }

.current { display: flex; align-items: center; gap: 14px; font-size: .85rem; color: var(--ink-4); }
.current img { width: 132px; height: 80px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--stroke); }

/* ---- login ---- */
.login { max-width: 420px; margin: clamp(40px, 9vh, 90px) auto 0; }
.login__mark { display: block; height: 34px; width: auto; margin: 0 auto 26px; }
.login h1 {
    margin: 0 0 6px; text-align: center;
    font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.03em;
}
.login__sub { margin: 0 0 26px; text-align: center; color: var(--ink-3); font-size: .92rem; }
.login .form { gap: 18px; }
.login .btn { width: 100%; justify-content: center; }

@media (max-width: 700px) {
    .form .row { grid-template-columns: 1fr; }
    .abar__who { display: none; }

    /* The table becomes stacked cards — a 6-column grid does not fit a phone. */
    .tbl thead { display: none; }
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
    .tbl tr { padding: 14px 4px; border-bottom: 1px solid var(--stroke); }
    .tbl td { border: 0; padding: 4px 16px; }
    .tbl .right { text-align: left; padding-top: 10px; }
}

/* ==========================================================================
   Portal + course/client/enrolment screens
   ========================================================================== */
.sub {
    margin: 30px 0 16px; font-family: var(--font-display); font-weight: 600;
    font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink);
}
.sub .count { color: var(--ink-4); font-weight: 400; font-size: .9rem; }
.hint { margin: 0; font-size: .84rem; color: var(--ink-4); }

.select {
    padding: 12px 14px; border: 1px solid var(--stroke-2); border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .8); font-family: var(--font-body); font-size: .93rem; color: var(--ink);
}

/* search */
.searchbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.searchbar input {
    padding: 10px 14px; border: 1px solid var(--stroke-2); border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .8); font: inherit; font-size: .9rem; min-width: 240px; color: var(--ink);
}

/* course cards in the portal */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.pcard { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-lg); }
.pcard h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.025em; color: var(--ink); }
.pcard__sum { margin: 0; font-size: .9rem; color: var(--ink-3); }
.pcard__price { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--blue); }
.pcard__price em { font-style: normal; font-size: .8rem; color: var(--ink-4); font-family: var(--font-mono); }
.pcard__meta { margin: 0; display: grid; gap: 8px; }
.pcard__meta > div { display: flex; justify-content: space-between; gap: 14px; font-size: .84rem; border-bottom: 1px solid var(--stroke); padding-bottom: 7px; }
.pcard__meta dt { color: var(--ink-4); margin: 0; }
.pcard__meta dd { margin: 0; color: var(--ink-2); text-align: right; }
.pcard__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pcard__pts li { display: flex; gap: 9px; font-size: .875rem; color: var(--ink-2); }
.pcard__pts .ic { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; }
.pcard .btn { margin-top: auto; }

/* the request summary strip on the enrol form */
.reqsum {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-radius: var(--r); background: var(--tint-b); border: 1px solid var(--stroke);
}
.reqsum span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.reqsum b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.reqsum em { font-style: normal; margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--blue); }

/* enrolment request rows in the admin */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filters .pill { text-decoration: none; }
.reqrow { padding: 20px 22px; border-radius: var(--r-lg); margin-bottom: 14px; display: grid; gap: 16px; }
.reqrow__main { display: grid; gap: 5px; }
.reqrow__course { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.reqrow__course em { font-style: normal; margin-left: 10px; font-size: .85rem; color: var(--blue); }
.reqrow__who { margin: 0; font-size: .875rem; color: var(--ink-2); }
.reqrow__who a { color: var(--blue); text-decoration: none; }
.reqrow__meta { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-4); }
.reqrow__note { margin: 6px 0 0; padding: 10px 14px; background: var(--tint-a); border-radius: var(--r-sm); font-size: .875rem; color: var(--ink-2); }
.reqrow__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.reqrow__form input[type=text] {
    flex: 1 1 220px; padding: 10px 14px; border: 1px solid var(--stroke-2);
    border-radius: var(--r-sm); background: rgba(255,255,255,.8); font: inherit; font-size: .88rem; color: var(--ink);
}
@media (min-width: 860px) { .reqrow { grid-template-columns: 1fr auto; align-items: start; } }


/* Body preview in the post editor — renders through the same sanitiser as the
   live article page, so it doubles as a check on what the allow-list keeps. */
.preview { display: grid; gap: 12px; }
.preview__pane {
    padding: clamp(18px, 2.5vw, 26px);
    border: 1px dashed var(--stroke-2); border-radius: var(--r);
    background: rgba(255, 255, 255, .6);
    max-height: 32rem; overflow-y: auto;
}
.preview__pane:empty::after { content: 'Nothing to preview yet.'; color: var(--ink-4); font-size: .9rem; }
.preview__pane > *:first-child { margin-top: 0; }
.preview__pane .muted { color: var(--ink-4); font-size: .9rem; }
.preview__note { margin: 0; font-size: .8rem; color: var(--ink-4); }
#previewToggle { justify-self: start; background: none; border: 0; cursor: pointer; padding: 0; }


/* Selects, restyled to match the text inputs. Kept as real <select> elements —
   appearance:none removes the native chrome but kicks the arrow out too, so we
   draw our own. A JS widget would look the same and cost keyboard navigation
   and the OS picker on mobile. */
.form select, .select {
    appearance: none; -webkit-appearance: none;
    padding-right: 42px; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2444' stroke-opacity='.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form select:hover, .select:hover { border-color: var(--tint-d); background-color: #fff; }
.select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(38, 173, 213, .16);
}
/* Firefox keeps a focus ring inside the box; Chrome tints the selected option. */
.form select:-moz-focusring, .select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }
.form select option, .select option { color: var(--ink); background: #fff; }