/* Look and feel the teacher picks in Settings. teacher-boot.js sets these
   attributes on <html>; everything here only reads them. */

/* ---- accent colour: the buttons, links and highlights that use --blue ---- */
html[data-accent="indigo"]{--blue:#4F46E5;--blue-dark:#4338CA;--indigo:#7C3AED;}
html[data-accent="teal"]{--blue:#0D9488;--blue-dark:#0F766E;--indigo:#0891B2;}
html[data-accent="green"]{--blue:#16A34A;--blue-dark:#15803D;--indigo:#0D9488;}
html[data-accent="rose"]{--blue:#E11D48;--blue-dark:#BE123C;--indigo:#DB2777;}
html[data-accent="orange"]{--blue:#EA580C;--blue-dark:#C2410C;--indigo:#D97706;}
html[data-accent="purple"]{--blue:#9333EA;--blue-dark:#7E22CE;--indigo:#C026D3;}
html[data-accent="slate"]{--blue:#475569;--blue-dark:#334155;--indigo:#64748B;}
html[data-theme="dark"][data-accent="indigo"]{--blue:#818CF8;--blue-dark:#A5B4FC;--indigo:#A78BFA;}
html[data-theme="dark"][data-accent="teal"]{--blue:#2DD4BF;--blue-dark:#5EEAD4;--indigo:#22D3EE;}
html[data-theme="dark"][data-accent="green"]{--blue:#4ADE80;--blue-dark:#86EFAC;--indigo:#2DD4BF;}
html[data-theme="dark"][data-accent="rose"]{--blue:#FB7185;--blue-dark:#FDA4AF;--indigo:#F472B6;}
html[data-theme="dark"][data-accent="orange"]{--blue:#FB923C;--blue-dark:#FDBA74;--indigo:#FBBF24;}
html[data-theme="dark"][data-accent="purple"]{--blue:#C084FC;--blue-dark:#D8B4FE;--indigo:#E879F9;}
html[data-theme="dark"][data-accent="slate"]{--blue:#94A3B8;--blue-dark:#CBD5E1;--indigo:#A1A1AA;}
html[data-accent]:not([data-accent="blue"]) .btn-primary{box-shadow:0 8px 20px -8px color-mix(in srgb,var(--blue) 60%,transparent);}

/* ---- text size ---- */
html[data-fontsize="sm"] body{zoom:.92;}
html[data-fontsize="lg"] body{zoom:1.1;}

/* ---- corners ---- */
html[data-radius="sharp"] .btn,html[data-radius="sharp"] .panel,html[data-radius="sharp"] .set-card,html[data-radius="sharp"] .mini-card,html[data-radius="sharp"] .library-list,html[data-radius="sharp"] input,html[data-radius="sharp"] select,html[data-radius="sharp"] textarea,html[data-radius="sharp"] .toast,html[data-radius="sharp"] dialog{border-radius:4px;}
html[data-radius="round"] .btn{border-radius:999px;}
html[data-radius="round"] .panel,html[data-radius="round"] .set-card,html[data-radius="round"] .mini-card,html[data-radius="round"] .library-list,html[data-radius="round"] dialog{border-radius:24px;}
html[data-radius="round"] input,html[data-radius="round"] select,html[data-radius="round"] textarea{border-radius:14px;}

/* ---- spacing ---- */
html[data-density="compact"] .panel{padding:14px 16px;margin-bottom:12px;}
html[data-density="compact"] .set-card{padding:12px;gap:4px;}
html[data-density="compact"] .btn{padding:9px 16px;}
html[data-density="compact"] .btn-sm{padding:6px 11px;}

/* ---- the settings tab itself ---- */
.tp{display:grid;gap:18px;}
.tp-me{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;}
.tp-avatar{grid-row:span 2;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:700 26px/1 'Prompt',sans-serif;color:#fff;background:linear-gradient(135deg,var(--blue),var(--indigo));}
.tp-me h3{margin:0;font-size:19px;}
.tp-me .sub{margin:0;color:var(--sub);font-size:13px;}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.tp-chip{padding:3px 10px;border-radius:999px;background:var(--grid);color:var(--sub);font-size:12px;font-weight:600;}
.tp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px;}
.tp-fact{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--grid);min-width:0;}
.tp-fact b{display:block;font:700 22px/1.2 'Prompt',sans-serif;color:var(--ink);}
.tp-fact span{display:block;font-size:12px;color:var(--sub);overflow-wrap:anywhere;}
.tp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0;border-top:1px dashed var(--line);}
.tp-row:first-of-type{border-top:0;}
.tp-row label,.tp-row .tp-label{font-weight:600;font-size:14px;}
.tp-row small{display:block;color:var(--sub);font-weight:400;font-size:12px;}
.tp-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);}
.tp-seg button{border:0;background:transparent;padding:8px 14px;font:600 13px 'Sarabun',sans-serif;color:var(--sub);cursor:pointer;}
.tp-seg button+button{border-left:1px solid var(--line);}
.tp-seg button[aria-pressed="true"]{background:var(--blue);color:#fff;}
.tp-status{min-height:18px;font-size:12.5px;color:var(--sub);}
.tp-status.ok{color:var(--green);}
.tp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
@media (max-width:560px){.tp-me{grid-template-columns:1fr;}.tp-avatar{grid-row:auto;}}

/* ---- coloured banner: the top bar and tab row take a deep shade of the accent,
   always darker than the page behind them, and the page picks up a faint tint ---- */
html[data-banner="color"]{--ac:#1E3A8A;}
html[data-banner="color"][data-accent="indigo"]{--ac:#312E81;}
html[data-banner="color"][data-accent="teal"]{--ac:#115E59;}
html[data-banner="color"][data-accent="green"]{--ac:#14532D;}
html[data-banner="color"][data-accent="rose"]{--ac:#881337;}
html[data-banner="color"][data-accent="orange"]{--ac:#7C2D12;}
html[data-banner="color"][data-accent="purple"]{--ac:#581C87;}
html[data-banner="color"][data-accent="slate"]{--ac:#1E293B;}
html[data-banner="color"]{--bg:color-mix(in srgb,var(--ac) 9%,#fff);--grid:color-mix(in srgb,var(--ac) 14%,#fff);--banner:var(--ac);--banner-2:color-mix(in srgb,var(--ac) 84%,#fff);}
html[data-banner="color"][data-theme="dark"]{--bg:color-mix(in srgb,var(--ac) 16%,#0B1120);--grid:color-mix(in srgb,var(--ac) 24%,#0B1120);--line:color-mix(in srgb,var(--ac) 30%,#26314A);--banner:color-mix(in srgb,var(--ac) 22%,#000);--banner-2:color-mix(in srgb,var(--ac) 32%,#000);}
html[data-banner="color"] .admin-topbar{background:var(--banner);border-bottom-color:transparent;color:#fff;}
html[data-banner="color"] .admin-topbar .brand{color:#fff;}
html[data-banner="color"] .admin-tabs{background:var(--banner-2);border-bottom-color:transparent;}
html[data-banner="color"] .admin-topbar .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;}
html[data-banner="color"] .admin-topbar .btn-ghost:hover{background:rgba(255,255,255,.22);}
html[data-banner="color"] .admin-tab-btn{color:rgba(255,255,255,.76);}
html[data-banner="color"] .admin-tab-btn:hover,html[data-banner="color"] .admin-tab-btn.active{color:#fff;-webkit-text-fill-color:#fff;background:none;animation:none;}
html[data-banner="color"] .tab-indicator{background:#fff;}
html[data-banner="color"] .tp-avatar,html[data-banner="color"] .tp-avatar-img{box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--blue) 55%,transparent);}

/* ---- profile picture ---- */
.brand-face{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;font-size:18px;line-height:1;flex:none;}
.brand-face img{width:100%;height:100%;object-fit:cover;display:block;}
.tp-avatar{overflow:hidden;position:relative;}
.tp-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.tp-avatar-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;grid-column:2;}
.tp-avatar-tools .btn{padding:6px 12px;font-size:12.5px;}
.tp-avatar-note{grid-column:2;margin:0;font-size:12px;color:var(--sub);}
@media (max-width:560px){.tp-avatar-tools,.tp-avatar-note{grid-column:1;}}

/* ---- the account panel, now in step with the others ---- */
.tp .tp-account-actions{display:flex;flex-wrap:wrap;gap:8px;position:relative;justify-content:flex-start;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}

/* ---- more colours, and one the teacher mixes (set as --custom by teacher-boot.js) ---- */
html[data-accent="sky"]{--blue:#0284C7;--blue-dark:#0369A1;--indigo:#4F46E5;}
html[data-accent="lime"]{--blue:#4D7C0F;--blue-dark:#3F6212;--indigo:#16A34A;}
html[data-accent="amber"]{--blue:#B45309;--blue-dark:#92400E;--indigo:#D97706;}
html[data-accent="pink"]{--blue:#DB2777;--blue-dark:#BE185D;--indigo:#9333EA;}
html[data-accent="red"]{--blue:#DC2626;--blue-dark:#B91C1C;--indigo:#E11D48;}
html[data-accent="brown"]{--blue:#78350F;--blue-dark:#451A03;--indigo:#92400E;}
html[data-theme="dark"][data-accent="sky"]{--blue:#38BDF8;--blue-dark:#7DD3FC;--indigo:#818CF8;}
html[data-theme="dark"][data-accent="lime"]{--blue:#A3E635;--blue-dark:#BEF264;--indigo:#4ADE80;}
html[data-theme="dark"][data-accent="amber"]{--blue:#FBBF24;--blue-dark:#FCD34D;--indigo:#FB923C;}
html[data-theme="dark"][data-accent="pink"]{--blue:#F472B6;--blue-dark:#F9A8D4;--indigo:#C084FC;}
html[data-theme="dark"][data-accent="red"]{--blue:#F87171;--blue-dark:#FCA5A5;--indigo:#FB7185;}
html[data-theme="dark"][data-accent="brown"]{--blue:#D6A27A;--blue-dark:#E7C4A5;--indigo:#FBBF24;}
html[data-accent="custom"]{--blue:var(--custom,#2563eb);--blue-dark:color-mix(in srgb,var(--custom,#2563eb) 78%,#000);--indigo:color-mix(in srgb,var(--custom,#2563eb) 65%,#7C3AED);}
html[data-theme="dark"][data-accent="custom"]{--blue:color-mix(in srgb,var(--custom,#2563eb) 62%,#fff);--blue-dark:color-mix(in srgb,var(--custom,#2563eb) 40%,#fff);--indigo:color-mix(in srgb,var(--custom,#2563eb) 55%,#C084FC);}
html[data-accent]:not([data-accent="blue"]) .btn-primary,html[data-accent]:not([data-accent="blue"]) .tp-seg button[aria-pressed="true"]{color:var(--on-accent,#fff);}
html[data-theme="dark"][data-accent]:not([data-accent="blue"]):not([data-accent="custom"]) .btn-primary,html[data-theme="dark"][data-accent]:not([data-accent="blue"]):not([data-accent="custom"]) .tp-seg button[aria-pressed="true"]{color:#0B1120;}
html[data-banner="color"][data-accent="sky"]{--ac:#075985;}
html[data-banner="color"][data-accent="lime"]{--ac:#365314;}
html[data-banner="color"][data-accent="amber"]{--ac:#78350F;}
html[data-banner="color"][data-accent="pink"]{--ac:#831843;}
html[data-banner="color"][data-accent="red"]{--ac:#7F1D1D;}
html[data-banner="color"][data-accent="brown"]{--ac:#431407;}
html[data-banner="color"][data-accent="custom"]{--ac:color-mix(in srgb,var(--custom,#2563eb) 55%,#000);}

/* ---- cards that stand out from the page ----
   The grid shade used to be the card colour, which sat right on top of the page
   colour. Cards are now the surface colour with a firmer edge and a soft shadow. */
.course-group-head,.set-card,.mini-card{background:var(--surface);border-color:color-mix(in srgb,var(--ink) 13%,var(--line));box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 20px -16px rgba(15,23,42,.4);}
.course-group-head:hover,.set-card:hover{border-color:var(--blue);}
html[data-theme="dark"] .course-group-head,html[data-theme="dark"] .set-card,html[data-theme="dark"] .mini-card{box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 20px -14px rgba(0,0,0,.7);}
html[data-banner="color"]{--grid:color-mix(in srgb,var(--ac) 4%,#fff);--line:color-mix(in srgb,var(--ac) 22%,#DDE3EE);}
html[data-banner="color"][data-theme="dark"]{--grid:color-mix(in srgb,var(--ac) 20%,#0B1120);--line:color-mix(in srgb,var(--ac) 40%,#26314A);}
html[data-banner="color"] .course-group-head,html[data-banner="color"] .set-card{box-shadow:0 1px 2px color-mix(in srgb,var(--ac) 18%,transparent),0 10px 22px -16px color-mix(in srgb,var(--ac) 55%,transparent);}

/* ---- colour picker beside the swatches ---- */
.tp-custom{display:inline-flex;align-items:center;gap:8px;}
.tp-custom input[type="color"]{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;}
.tp-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.tp-custom input[type="color"]::-webkit-color-swatch{border:3px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1.5px var(--line);}
.tp-custom.is-on input[type="color"]::-webkit-color-swatch{box-shadow:0 0 0 2.5px var(--ink);}
.tp-custom input[type="text"]{width:92px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 13px 'Sarabun',monospace;text-transform:uppercase;}
.tp-custom input[type="text"]:focus{outline:2px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:1px;}

/* ---- ready-made looks ---- */
.tp-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:4px 0 8px;}
.tp-preset{display:flex;flex-direction:column;gap:8px;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:600 13px 'Sarabun',sans-serif;cursor:pointer;text-align:center;}
.tp-preset:hover{border-color:var(--blue);}
.tp-preset[aria-pressed="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,var(--surface));}
.tp-preset-look{position:relative;display:block;height:46px;border-radius:8px;overflow:hidden;background:var(--pg);box-shadow:inset 0 0 0 1px rgba(15,23,42,.1);}
.tp-preset-look i{position:absolute;left:0;right:0;top:0;height:14px;background:var(--bn);}
.tp-preset-look b{position:absolute;left:8px;bottom:8px;width:34px;height:12px;border-radius:6px;background:var(--ac);}
.tp-backup-result{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink);}
.tp-backup-result:empty{display:none;}