/* What every theme shares: the drawing beside each page title, the small samples of a theme (the theme picker and the
   Appearance page) and the theme picker in the top bar. The themes themselves (their colours, fonts and touches) are drawn
   by the server into /css/themes.css from public/js/lib/theme-defs.js and the imported themes. */

/* =====================================================================================================================
   All themes but Classic: the drawing beside each page title (the art itself is in app.js, coloured by --art-*)
   ===================================================================================================================== */
.page-art { display: none; }
:root[data-skin]:not([data-skin='classic']) .page-art { display: block; flex: none; margin-left: auto; width: 132px; height: 76px; color: var(--art-a); }
:root[data-skin]:not([data-skin='classic']) .page-art svg { width: 100%; height: 100%; overflow: visible; }
:root[data-skin]:not([data-skin='classic']) .page-art .fl { transform-box: fill-box; transform-origin: center; animation: art-float 6s ease-in-out infinite; }
:root[data-skin]:not([data-skin='classic']) .page-art .fl.d2 { animation-delay: -2s; }
:root[data-skin]:not([data-skin='classic']) .page-art .fl.d3 { animation-delay: -4s; }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
:root[data-skin]:not([data-skin='classic']) .pagehead:has(.schoolpick) .page-art { margin-left: 16px; }
@media (max-width: 760px) { :root[data-skin] .page-art { display: none !important; } }

/* =====================================================================================================================
   A sample of a theme (the theme picker and the Appearance page): a tiny window with the top bar, a panel and buttons
   ===================================================================================================================== */
.skin-sample {
  position: relative; display: grid; grid-template-rows: 14px 1fr; overflow: hidden; height: 92px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  background-color: var(--bg); background-image: var(--canvas-image); background-size: var(--canvas-size);
  font-family: var(--font-ui);
}
.skin-sample .s-bar { display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
.skin-sample .s-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-tile); }
.skin-sample .s-bar b { width: 22px; height: 3px; margin-left: 6px; border-radius: 2px; background: var(--tab-mark); }
.skin-sample .s-bar u { width: 16px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.skin-sample .s-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px; padding: 7px; }
.skin-sample .s-card { display: grid; align-content: start; gap: 4px; padding: 6px 7px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r-panel) / 2.4); }
.skin-sample .s-title { font: 700 11px/1.1 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-sample .s-line { height: 3px; border-radius: 2px; background: var(--line-strong); opacity: .7; }
.skin-sample .s-line.short { width: 60%; }
.skin-sample .s-btn { justify-self: start; width: 34px; height: 9px; margin-top: 2px; border-radius: calc(var(--r-ctl) / 2.4); background: var(--btn-primary-bg); }
.skin-sample .s-paper { background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); padding: 6px 6px 0; display: grid; gap: 3px; align-content: start; }
.skin-sample .s-paper span { height: 2px; background: #c5cad6; }
.skin-sample .s-paper span:first-child { width: 50%; justify-self: center; background: #555; }
:root[data-theme='dark'] .skin-sample .s-paper { box-shadow: 0 1px 3px rgb(0 0 0 / 50%); }

@media (prefers-reduced-motion: reduce) {
  :root[data-skin] .page-art .fl { animation: none !important; }
}

/* the drawings beside the page titles */
.page-art .pa-p { fill: var(--art-paper); }
.page-art .pa-a { fill: var(--art-a); }
.page-art .pa-b { fill: var(--art-b); }
.page-art .pa-c { fill: var(--art-c); }
.page-art .pa-o { fill: none; stroke: var(--art-line); stroke-width: 1.5; }
.page-art .pa-ol { stroke: var(--art-line); stroke-width: 1.5; }
.page-art .pa-ln { fill: var(--art-line); opacity: .75; }
.page-art :is(.pa-tick, .pa-trend, .pa-keyline, .pa-plus, .pa-dim, .pa-dimcap) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.page-art .pa-tick { stroke: var(--art-b); stroke-width: 2.6; }
.page-art .pa-trend { stroke: var(--art-b); stroke-width: 2.4; }
.page-art .pa-keyline { stroke: var(--art-c); stroke-width: 5; }
.page-art .pa-plus { stroke: var(--art-a); stroke-width: 2.4; }
.page-art :is(.pa-dim, .pa-dimcap) { stroke: var(--art-b); stroke-width: 1.8; }

/* ---------- the theme picker in the top bar ---------- */
.skinpick { position: relative; }
.skinbtn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.skinbtn:hover, .skinbtn[aria-expanded='true'] { background: var(--hover); color: var(--ink); }
.skinmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(560px, calc(100vw - 24px)); padding: 14px;
  background: var(--surface-solid, var(--surface)); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--shadow-pop);
}
.skinmenu-head { display: grid; gap: 2px; margin-bottom: 12px; }
.skingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skincard {
  display: grid; gap: 6px; padding: 6px 6px 8px; text-align: left; cursor: pointer; color: var(--ink);
  background: var(--surface-2); border: 2px solid transparent; border-radius: calc(var(--r-ctl) + 4px); font: inherit;
  transition: transform .15s ease, border-color .15s;
}
.skincard:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.skincard[aria-pressed='true'] { border-color: var(--blue); background: var(--blue-soft); }
.skinname { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; font-weight: 700; font-size: calc(.9 * var(--fz)); }
.skinname .icon { color: var(--blue-text); }
.skinmenu-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .skinmenu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
  .skingrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}