/* Shared core styles (/opt/frens-core/static/core.css): pieces both sites use. */

/* The Arrange layouts bar (templates/fragments/layout_bar.html). */
.layout-bar { position: sticky; top: 0; z-index: 950; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
              margin: 8px 12px; padding: 8px 12px; border-radius: var(--radius-md, 12px);
              background: var(--bg-panel); border: 2px solid var(--accent, var(--rust)); box-shadow: var(--shadow-1, 0 4px 14px rgba(0,0,0,.3)); }
.layout-bar-title { font-weight: 700; white-space: nowrap; }
.layout-bar-pick select { max-width: 260px; }
.layout-bar-prio label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.layout-bar-prio input { width: 70px; padding: 3px 6px; }
.layout-bar-note { font-size: 12px; }
.layout-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.layout-bar-history { position: relative; }
.layout-bar-history > summary { list-style: none; }
.layout-bar-history > summary::-webkit-details-marker { display: none; }
.layout-bar-pop { position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, 90vw); z-index: 960;
                  background: var(--bg-panel); border: 1px solid var(--border-hairline); border-radius: var(--radius-md, 12px);
                  box-shadow: var(--shadow-pop, 0 16px 40px rgba(0,0,0,.5)); padding: 10px; }
.layout-history-head { margin-bottom: 6px; }
.layout-history-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
                      padding: 6px 0; border-top: 1px solid var(--border-hairline); font-size: 13px; }
.layout-history-row .btn { grid-row: span 2; }
.layout-history-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.block-cog-for { margin: 2px 0 6px; }

/* Block widgets (frenscore/widgets.py): Weather and Calendar. Built to fit
   the narrow side columns (about 170px inside a block) and grow with more room. */
.core-widget { min-height: 2em; }
.wx { font-size: 13px; }
.wx-now { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.wx-icon { font-size: 28px; line-height: 1; }
.wx-temp { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text-main); }
.wx-temp small { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.wx-words { flex-basis: 100%; line-height: 1.35; }
.wx-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; font-size: 11px; line-height: 1.25;
          border: 1px solid var(--border-hairline); border-radius: var(--radius-sm, 6px); min-width: 0; }
.wx-day-name { color: var(--text-muted); font-size: 10px; }
.wx-day-lo { color: var(--text-muted); }
.wx-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.wx-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wx-set { margin-top: 8px; display: grid; gap: 6px; }
.wx-set input { width: 100%; box-sizing: border-box; }
.wx-found { display: flex; flex-wrap: wrap; gap: 4px; }
.wx-set-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wx-credit { text-align: right; font-size: 10px; margin-top: 4px; }
.wx-credit a { color: var(--text-muted); }

.cal { font-size: 13px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0; margin-bottom: 4px; }
.cal-head button { background: none; border: 0; color: var(--text-main); cursor: pointer; font: inherit; }
.cal-month { font-weight: 700; font-size: 12px; padding: 2px 2px; border-radius: var(--radius-sm, 6px); white-space: nowrap; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; }
.cal-nav { font-size: 18px; line-height: 1; width: 20px; height: 22px; flex: none; border-radius: 50%; padding: 0; }
.cal-head button:hover, .cal-head button:focus-visible { background: var(--bg-panel-raised, rgba(127,127,127,.15)); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-dow { text-align: center; font-size: 9px; letter-spacing: .02em; color: var(--text-muted); text-transform: uppercase; padding-bottom: 2px; }
.cal-day { height: 26px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
           padding: 0; font: inherit; font-size: 11px; line-height: 1; color: var(--text-main); cursor: pointer;
           background: none; border: 1px solid transparent; border-radius: var(--radius-sm, 5px); }
.cal-day:hover, .cal-day:focus-visible { border-color: var(--border-hairline); }
.cal-day.is-out { color: var(--text-muted); opacity: .55; }
.cal-day.is-today { border-color: var(--accent, var(--rust)); font-weight: 700; }
.cal-day.is-picked { background: var(--accent, var(--rust)); color: var(--on-accent, #fff); }
.cal-day.is-picked .cal-dot { outline: 1px solid var(--on-accent, #fff); }
.cal-dots { display: flex; gap: 1px; height: 4px; margin-top: 2px; }
.cal-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; flex: none; }
.cal-site { background: var(--accent, var(--rust)); }
.cal-holiday { background: var(--brass, #c9a227); border-radius: 0; transform: rotate(45deg) scale(.85); }
.cal-mine { background: transparent; box-shadow: inset 0 0 0 1.2px var(--text-main); }
.cal-msg { margin: 6px 0 0; font-size: 12px; color: var(--danger, #e0564a); }
.cal-msg.is-ok { color: var(--text-main); }
.cal-list { margin-top: 8px; border-top: 1px solid var(--border-hairline); padding-top: 6px; }
.cal-list-head { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.cal-ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 4px 0; }
.cal-ev > .cal-dot { width: 7px; height: 7px; margin-top: 5px; }
.cal-ev-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cal-ev-when { color: var(--text-muted); font-size: 11px; }
.cal-ev-title { overflow-wrap: anywhere; }
.cal-del { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.cal-del:hover { color: var(--danger, #e0564a); }
.cal-none { margin: 2px 0; }
.cal-add { margin-top: 8px; }
.cal-add > summary { cursor: pointer; font-size: 12px; color: var(--accent-bright, var(--rust-bright)); }
.cal-add form { display: grid; gap: 6px; margin-top: 6px; }
.cal-add .profile-input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: 12px; }
.cal-add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; gap: 6px; }
.cal-add-row label { display: grid; gap: 2px; font-size: 11px; color: var(--text-muted); min-width: 0; }
.cal-add-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-add-send select { flex: 1 1 90px; width: auto; }
.cal-add-send .btn { margin-left: auto; }
.cal-more > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.cal-more[open] { display: grid; gap: 6px; }
.cal-foot { margin: 6px 0 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font-size: 11px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cal-legend .cal-dot { width: 6px; height: 6px; }

/* Blocks: the strap shows the column (fragments/block_panel.html), and the
   eight move points sit on the edge (fragments/block_points.html): small
   marks on the border, always there, the same on every block. Pointing at
   one makes it grow and glow; one that can't move the block stays dim.
   The point where the strap is shows as the strap itself.
   Colours come from the theme: the accent, with each family's finish. */
.block-panel { position: relative; }
.block-panel.at-main > .crate-panel-strap { left: 50%; transform: translateX(-50%); }
.block-panel.at-right > .crate-panel-strap { left: auto; right: 24px; }
.bp-pts { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bp-pt { position: absolute; display: block; pointer-events: auto; padding: 0; margin: 0; border: 0; background: transparent;
         cursor: pointer; opacity: .5; transition: opacity .15s ease; }
.bp-pt::before { content: ""; position: absolute; background: var(--accent, var(--rust)); border-radius: 2px;
                 transition: height .15s ease, width .15s ease, box-shadow .15s ease; }
/* Hit areas are bigger than the marks, so they're easy to catch. The marks
   sit across the border line (1px outside the box the points are placed in). */
.bp-n, .bp-s, .bp-nw, .bp-ne, .bp-sw, .bp-se { width: 34px; height: 14px; }
.bp-w, .bp-e { width: 14px; height: 34px; }
.bp-n, .bp-s { left: 50%; margin-left: -17px; }
.bp-n, .bp-nw, .bp-ne { top: -7px; }
.bp-s, .bp-sw, .bp-se { bottom: -7px; }
.bp-nw, .bp-sw { left: 24px; }
.bp-ne, .bp-se { right: 24px; }
.bp-w { left: -7px; top: 50%; margin-top: -17px; }
.bp-e { right: -7px; top: 50%; margin-top: -17px; }
.bp-n::before, .bp-s::before, .bp-nw::before, .bp-ne::before, .bp-sw::before, .bp-se::before { left: 3px; right: 3px; height: 3px; }
.bp-n::before, .bp-nw::before, .bp-ne::before { top: 5px; }
.bp-s::before, .bp-sw::before, .bp-se::before { bottom: 5px; }
.bp-w::before, .bp-e::before { top: 3px; bottom: 3px; width: 3px; }
.bp-w::before { left: 5px; }
.bp-e::before { right: 5px; }
/* The point where the strap is: the strap already marks it, so its own mark
   only shows when pointed at. */
.bp-pt.is-home { opacity: 0; }
.bp-pt.is-home::before { left: 0; right: 0; }
/* Can't move this block from here: dim, and only its hover text. */
.bp-pt.is-off { opacity: .16; cursor: default; }
.bp-pt.is-off.is-home { opacity: 0; }
/* Pointed at (or tabbed to): bigger, brighter, glowing. */
.bp-pt:not(.is-off):hover, .bp-pt:not(.is-off):focus-visible { opacity: 1; outline: none; }
.bp-n:not(.is-off):hover::before, .bp-nw:not(.is-off):hover::before, .bp-ne:not(.is-off):hover::before,
.bp-n:focus-visible::before, .bp-nw:focus-visible::before, .bp-ne:focus-visible::before { height: 6px; }
.bp-s:not(.is-off):hover::before, .bp-sw:not(.is-off):hover::before, .bp-se:not(.is-off):hover::before,
.bp-s:focus-visible::before, .bp-sw:focus-visible::before, .bp-se:focus-visible::before { height: 6px; }
.bp-w:not(.is-off):hover::before, .bp-e:not(.is-off):hover::before, .bp-w:focus-visible::before, .bp-e:focus-visible::before { width: 6px; }
.bp-pt:not(.is-off):hover::before, .bp-pt:focus-visible::before { box-shadow: 0 0 8px 1px var(--accent-bright, var(--rust-bright, var(--accent))); }
/* While arranging a layout, a little brighter. */
html:has(.layout-bar) .bp-pt:not(.is-off):not(.is-home) { opacity: .75; }
/* Theme finishes, like the strap's. */
html[data-trim="glow"] .bp-pt::before { box-shadow: 0 0 6px -1px var(--rust, var(--accent)); }
html[data-trim="glow"] .bp-pt:not(.is-off):hover::before { box-shadow: 0 0 12px 1px var(--rust, var(--accent)); }
html[data-trim="hazard"] .bp-pt::before { background: repeating-linear-gradient(135deg, var(--rust, var(--accent)) 0 4px, #111 4px 8px); }
html[data-trim="patina"] .bp-pt::before { background: linear-gradient(90deg, var(--rust, var(--accent)), var(--brass, var(--accent))); }
/* Touch screens: no hovering, so the points show (and work) after a tap on the
   block's ⚙; a tap near an edge can't move a block by accident. Phones: the
   columns stack, so only up and down. */
@media (hover: none), (max-width: 860px) {
  .bp-pt, .bp-pt.is-off, html:has(.layout-bar) .bp-pt:not(.is-off):not(.is-home) { opacity: 0; pointer-events: none; }
  .block-panel:has(.block-cog[open]) .bp-pt { opacity: .9; pointer-events: auto; }
  .block-panel:has(.block-cog[open]) .bp-pt.is-off { opacity: .2; }
}
@media (max-width: 860px) { .bp-w, .bp-e, .bp-nw, .bp-ne, .bp-sw, .bp-se { display: none; } }
@media (prefers-reduced-motion: reduce) { .bp-pt, .bp-pt::before { transition: none; } }

/* A block with its own look (a member's block, say): its own background and
   text colours (always set as a pair, checked to read well together), and an
   optional wallpaper under a see-through layer of the background colour.
   The site only ever passes checked #rrggbb colours and its own /images paths. */
.block-panel.has-own-look { --bg-panel: var(--own-bg); --text-main: var(--own-text);
                            --text-muted: color-mix(in srgb, var(--own-text) 72%, var(--own-bg));
                            --border-hairline: color-mix(in srgb, var(--own-text) 22%, transparent);
                            --brass: var(--own-text); --rust-bright: var(--own-text);   /* links and spoilers read on its own background */
                            background: var(--own-bg); color: var(--own-text); }
.block-panel.has-own-look .sidebar-section-label, .block-panel.has-own-look .block-content { color: var(--own-text); }
.block-panel.has-own-wall { --own-tint: color-mix(in srgb, var(--bg-panel) calc(var(--own-wall-op, .6) * 100%), transparent);
                            background-image: linear-gradient(var(--own-tint), var(--own-tint)), var(--own-wall);
                            background-size: cover; background-position: center; }
.block-panel.has-own-wall .block-content, .block-panel.has-own-wall .sidebar-section-label { text-shadow: 0 0 3px var(--bg-panel), 0 0 1px var(--bg-panel); }

/* Admin mode (frenscore/adminmode.py; fragments/admin_mode_switch.html) */
.admin-mode-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; cursor: pointer;
                  font: inherit; font-size: 14px; line-height: 1; color: var(--text-muted); background: transparent;
                  border: 1px solid var(--border-hairline, rgba(255,255,255,.12)); opacity: .7; transition: opacity .15s ease, background .15s ease; }
.admin-mode-btn:hover, .admin-mode-btn:focus-visible { opacity: 1; }
.admin-mode-btn.is-on { opacity: 1; color: var(--on-accent, #fff); background: var(--accent, var(--rust, #ce422b)); border-color: var(--accent, var(--rust, #ce422b)); }
.admin-mode-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.admin-mode-stripe { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none;
                     background: linear-gradient(90deg, var(--accent, var(--rust, #ce422b)), var(--rust-bright, var(--accent, var(--rust, #ce422b))), var(--accent, var(--rust, #ce422b))); }
.admin-mode-act { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; }
.admin-mode-act.is-on { background: color-mix(in srgb, var(--accent, var(--rust, #ce422b)) 25%, transparent); }
.admin-mode-act.is-off { background: color-mix(in srgb, var(--text-muted) 20%, transparent); }
.admin-mode-off-page { max-width: 520px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
@media (max-width: 640px) { .admin-mode-label { display: none; } }