/* Colour and focus for the University edit pages (Certification Designer and Pathway Editor).
   Rules: no flat fill. Every solid colour carries a soft gradient. Sections get a colour marker so the page reads as parts, not one wall of data.
   Square-ish edges, nothing cartoonish. Loaded after each page's own styles, so it only has to say what changes. */

:root {
  --edit-blue: var(--accent-steel); --edit-blue-dark: var(--accent-steel-text); --edit-green: #78C832; --edit-green-dark: #2F6A0C; --edit-amber: #E9A648; --edit-amber-dark: #8A5A00; --edit-violet: #6C5BA8; --edit-rose: #B03A45;
}

/* ---- page and header ---- */
body { background: linear-gradient(180deg, #E4EBEE 0, #EFF1EC 360px) fixed; }
header.top { background: linear-gradient(115deg, #0F2038 0%, #17335A 55%, #1D4F7C 100%); border-bottom: 3px solid transparent; border-image: var(--accent-steel-gradient) 1; }
.mockbar { background: linear-gradient(90deg, #FFF1CC, #FFF8E6); }

/* ---- panels: a colour edge on top, a hint of tint underneath ---- */
.panel { background: linear-gradient(180deg, #FFFFFF 0, #FBFCFA 100%); border-top: 3px solid var(--edit-blue); box-shadow: 0 1px 3px rgba(15, 32, 56, .08); }
main > section.panel { border-top-color: var(--edit-green); }
aside.panel { border-top-color: var(--edit-blue); background: linear-gradient(180deg, #F3F9FD 0, #FFFFFF 220px); }

/* ---- section headings inside the editor: a marker and a wash of colour, each section its own ---- */
#editor h3, section.panel > h3, .stage-card h3 { padding: 8px 12px; margin-top: 22px; border-left: 4px solid var(--edit-blue); background: linear-gradient(90deg, #E3F1FA 0, rgba(250, 251, 247, 0) 85%); font-size: 17px; }
#editor h3:nth-of-type(2n) { border-left-color: var(--edit-amber); background: linear-gradient(90deg, #FBEFD8 0, rgba(250, 251, 247, 0) 85%); }
#editor h3:nth-of-type(3n) { border-left-color: var(--edit-green); background: linear-gradient(90deg, #E5F3D6 0, rgba(250, 251, 247, 0) 85%); }
#editor h3:nth-of-type(5n) { border-left-color: var(--edit-violet); background: linear-gradient(90deg, #ECE8F6 0, rgba(250, 251, 247, 0) 85%); }
#editor h4 { color: var(--edit-green-dark); letter-spacing: .02em; }

/* ---- cards: a stripe only where it says something (a graduation, a rule, a Pathway stage); the one you are in is ringed ---- */
.card { background: linear-gradient(180deg, #FFFFFF 0, #F5F8F3 100%); box-shadow: 0 1px 2px rgba(15, 32, 56, .06); transition: box-shadow .15s, border-color .15s; }
:where(:root[data-theme]) .card { border-left: 1.5px solid var(--th-card-line); }
/* Two levels at most: a card inside a card is a section of it, set off by a hairline, not a second box. */
.card .card { background: none; border: 0; border-top: 1px solid var(--th-border); box-shadow: none; margin-left: 0; padding-left: 0; padding-right: 0; }
:root[data-theme] .card .card { border: 0; border-top: 1px solid var(--th-border); box-shadow: none; }
.card.grad { background: linear-gradient(180deg, #EEF7E4 0, #DDEFC9 100%); border-left: 4px solid var(--edit-green-dark); }
.card.rule { background: linear-gradient(180deg, #FFFFFF 0, #FBF6EA 100%); border-left: 4px solid var(--edit-amber); }
.card:focus-within { border-color: var(--edit-blue-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-steel) 18%, transparent), 0 4px 14px rgba(15, 32, 56, .10); }
.cardhead strong { color: var(--ink, #0F2038); }
.code { background: linear-gradient(180deg, #1D3557, #0F2038); }
.code.none { background: linear-gradient(180deg, #EEF0F4, #DFE3EA); }

/* ---- buttons: gradient, edge and a pressed state ---- */
.btn { background: linear-gradient(180deg, #8EDC47 0, #62B01F 100%); border: 1px solid #4A9018; color: #0E2208; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(15, 32, 56, .22); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); transition: filter .12s, box-shadow .12s; }
.btn:hover { filter: brightness(1.06) saturate(1.05); }
.btn:active { filter: brightness(.94); box-shadow: inset 0 2px 3px rgba(15, 32, 56, .25); }
.btn.sec { background: linear-gradient(180deg, #FFFFFF 0, #EAF0EE 100%); border: 1px solid #B9C4CC; color: #0F2038; text-shadow: none; }
.btn.sec:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-steel) 5%, #fff) 0, color-mix(in srgb, var(--accent-steel) 18%, #fff) 100%); border-color: var(--edit-blue-dark); filter: none; }
.btn.danger { background: none; border: 0; box-shadow: none; text-shadow: none; }
.tabs .btn.on { background: linear-gradient(180deg, #254777, #0F2038); border-color: #0F2038; color: #fff; text-shadow: none; }
.btn:disabled, .btn[disabled] { filter: grayscale(.6) opacity(.7); cursor: not-allowed; }

/* ---- chips, notices and bars: no flat fills; chips lean square ---- */
.chip { background: linear-gradient(180deg, #EEF0F4, #DFE3EA); border-radius: 0; }
.chip.draft { background: linear-gradient(180deg, #F0F2F6, #DDE1E8); }
.chip.in_review { background: linear-gradient(180deg, #FDEFD0, #F8DCA0); }
.chip.published { background: linear-gradient(180deg, #E0F3C9, #C4E5A0); }
.problems { background: linear-gradient(180deg, #FEEFF1, #FADCE0); }
.ok { background: linear-gradient(180deg, #EFF9E3, #DCF0C4); }
.aibar { background: linear-gradient(180deg, #F3F9FF, #E1EEFB); }
.note.ok { background: linear-gradient(180deg, #EFF9E3, #DCF0C4); }
.note.warn { background: linear-gradient(180deg, #FFF8E6, #FFEBBF); }
.whytext { background: linear-gradient(90deg, #EAF4E0, #F7FAF3); }
.bar { background: linear-gradient(180deg, #FFFFFF 0, #F1F5F0 100%); border-top: 2px solid transparent; border-image: var(--accent-steel-gradient) 1; box-shadow: 0 -4px 10px rgba(15, 32, 56, .06); padding-left: 10px; }

/* ---- the list on the left ---- */
button.item { background: linear-gradient(180deg, #FFFFFF, #F4F7F2); border-left: 4px solid #C9D3CB; transition: border-color .12s, box-shadow .12s; }
/* Hover draws an ink line rather than lifting the item. */
button.item:hover { border-color: var(--th-text); border-left-color: var(--edit-blue); }
button.item.on { background: linear-gradient(180deg, #F0F9E6, #DDF0C6); border-color: var(--edit-green-dark); border-left-color: var(--edit-green-dark); box-shadow: 0 0 0 2px rgba(120, 200, 50, .28); }
.group h4 { color: var(--edit-blue-dark); border-bottom: 1px solid #D5E3EA; padding-bottom: 3px; }

/* ---- the Pathway Editor's timeline and calendar ---- */
.stage-card { border-top: 3px solid var(--edit-green); background: linear-gradient(180deg, #FFFFFF, #F8FAF6); }
.cal-bar { background: linear-gradient(180deg, #96E04F, #66B323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.cal-bar.t-roof { background: linear-gradient(180deg, #D3ECF9, #A8D3EA); }
.cal-bar.t-sales { background: linear-gradient(180deg, #FAE4BA, #F0C887); }
.cal-bar.t-tech { background: linear-gradient(180deg, #254777, #0F2038); }
.cal-bar.opt { background: #fff; }
.cal-zone.z1 { background: linear-gradient(180deg, #E8F5D8, #D2E9B8); }
.cal-zone.z0 { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-steel) 10%, #fff), color-mix(in srgb, var(--accent-steel) 20%, #fff)); }
.cal-row.head { background: linear-gradient(180deg, #FAFBF7, #EEF2EC); }

/* ---- status marks: a square before the state word, so status is shape plus colour. Draft is open (outlined),
   in review is half filled, published is filled, locked is dotted. ---- */
.chip:is(.draft, .in_review, .published, .lock)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px;
  box-sizing: border-box; border: 1.5px solid currentColor; vertical-align: 0; }
.chip.published::before { background: currentColor; }
.chip.in_review::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.chip.lock::before { border-style: dotted; }

/* ---- focus: you can always see where you are ---- */
label { color: #2A3A52; }
input, select, textarea { background: linear-gradient(180deg, #FDFEFD, #FFFFFF); border-color: #B9C4CC; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #7F95A8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--edit-blue-dark); box-shadow: 0 0 0 2px var(--accent-steel-focus); background: #fff; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-steel-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }