/* Navy refinement: the homepage and the signed-in pages share one look.
   Light warm gray page, dark navy panels with white writing, ivory cards with black writing, gold accents, ivory buttons on navy. Loaded last. */
:root{
  --navy:#0E2B3E; --navy-2:#153A52; --navy-line:#2C5470; --ivory:#FBF7EA; --ivory-2:#F4EEDC;
  --vellum:#E9E6DF; --bar-h:52px;
  --charcoal:#0E2B3E; --charcoal-2:#153A52; --charcoal-3:#1F4A66;
  --baize:#0E2B3E; --baize-deep:#0B2234; --baize-soft:#153A52;
}
body{ background:var(--vellum); }

/* ---------- floating navy top bar and footer bar ---------- */
.sitebar{ margin:8px 10px 0; height:44px; padding:0 8px; border:0; border-radius:10px; background:var(--navy); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.sb-home{ border-color:transparent; font-size:15px; }
.sb-owner{ border:1.5px solid #E8DFC8; color:#fff; background:transparent; }
.sb-owner:hover,.sb-owner:focus-visible{ background:rgba(255,255,255,.12); border-color:var(--brass-light); }
.sitefoot{ margin:14px 10px 10px; padding:12px 16px; border:0; border-radius:10px; background:var(--navy); }
.sitefoot a{ font-size:16px; font-weight:600; letter-spacing:.01em; }
body.door-mode .main{ padding-top:14px; }

/* sidebar: navy */
.nav{ top:calc(var(--bar-h) + env(safe-area-inset-top,0px)); height:calc(100vh - var(--bar-h) - 10px - env(safe-area-inset-top,0px)); margin:8px 0 0 10px; border-radius:12px; background:var(--navy)!important; border:1px solid var(--navy-line); }
.shell{ grid-template-columns:calc(var(--nav-w) + 10px) 1fr; }
.nav a[aria-current]{ background:var(--navy-2); }
.nav-ic{ color:#E8DFC8; }
.wordmark .emblem{ border:1px solid var(--navy-line); }
@media (max-width:900px){ .shell{ grid-template-columns:1fr; } .nav{ top:0; height:100%; margin:0; border-radius:0 12px 12px 0; } .main{ padding-left:12px; padding-right:12px; } }

/* ---------- homepage ---------- */
.home{ gap:16px; }
.h-courses .h-card{ background:var(--navy); color:#fff; border-color:var(--navy); }
.h-card h2{ color:#fff; }
.h-card p{ color:#DCE6EC; }
.h-go{ background:var(--ivory); color:var(--navy); }
.h-card:hover .h-go,.h-card:focus-visible .h-go{ background:#fff; }

.h-words{ background:var(--navy); border-color:var(--navy); }
.h-words h2{ color:#fff; }
.h-words .quote-card{ background:var(--ivory); border:0; border-radius:8px; }
.h-words .q-plain{ border-top:1px solid #D9CFB4; padding-top:8px; margin-top:4px; }
.h-words .q-by{ font-weight:500; }
.mp{ background:var(--navy); border-color:var(--navy); }
.mp-head h2{ color:#fff; }
.mp-ctl button{ background:var(--ivory); color:var(--navy); border-color:var(--ivory); }
.mp-ctl button:hover,.mp-ctl button:focus-visible{ background:#fff; }
.mp-stage,.mp[data-panel=flyers] .mp-stage{ background:var(--ivory); border:0; border-radius:8px; }
.mp-dots button{ border-color:#E8DFC8; }
.mp-dots button[aria-current=true]{ background:var(--brass); border-color:var(--brass); }
.mp-empty{ color:#33414B; }

/* ---------- signed-in pages: spaced sections, navy and ivory panels ---------- */
.page.is-dash{ display:flex; flex-direction:column; gap:16px; }
.page.is-dash > *{ margin:0!important; }
.page.is-dash > h1,.page.is-dash > h2,.page.is-dash > p{ margin:0!important; }
.d-banner,.d-equip{ background:var(--ivory); }
.d-row{ gap:16px; margin:0; }
.d-start{ background:var(--navy); color:#fff; border-color:var(--navy); }
.d-start .d-lede p{ color:#fff; }
.d-start .d-lede img{ mix-blend-mode:normal; background:var(--ivory); border-radius:8px; padding:4px; }
.d-start .btn-brass{ border-radius:999px; }
.d-start .btn-quiet{ background:transparent; color:#fff; border:1.5px solid #fff; border-radius:999px; }
.d-start .btn-quiet:hover,.d-start .btn-quiet:focus-visible{ background:rgba(255,255,255,.14); }
.d-ring{ background:var(--ivory); }
.d-ring .ring-fg{ stroke:var(--navy); } .d-ring .ring-bg{ stroke:#D9D3C4; }
.d-ring .small{ color:#1C262E; }

.page.is-dash .welcome-bar{ background:var(--navy); border:0; color:#fff; border-radius:10px; padding:12px 16px; }
.page.is-dash .welcome-bar b{ color:#fff; } .page.is-dash .welcome-text span{ color:#DCE6EC; }
.page.is-dash .welcome-avatar{ background:var(--navy); color:#fff; box-shadow:0 0 0 2px var(--brass); }
.page.is-dash .welcome-profile{ background:var(--ivory); color:var(--navy); border-color:var(--ivory); border-radius:8px; }

.page.is-dash .student-cta{ background:var(--navy); border:0; color:#fff; border-radius:10px; }
.page.is-dash .student-cta-text h2{ color:#fff; }
.page.is-dash .student-cta-text p,.page.is-dash .student-cta .small{ color:#DCE6EC; }
.page.is-dash .student-cta-arrow{ width:48px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--ivory); color:var(--navy); font-size:22px; }
.page.is-dash .student-cta-icon{ background:var(--brass); }
.page.is-dash .student-cta-icon svg{ color:#12161a; fill:#12161a; }

.page.is-dash .start-card{ background:var(--navy); border:0; border-radius:10px; color:#fff; }
.page.is-dash .start-card h2,.page.is-dash .start-card .start-head h2{ color:#fff; }
.page.is-dash .start-count{ color:var(--brass-light); font-weight:800; }
.page.is-dash .start-lede{ color:#DCE6EC; }
.page.is-dash .start-step{ background:var(--ivory); color:#111418; border:0; border-radius:8px; }
.page.is-dash .start-step *{ color:inherit; }
.page.is-dash .start-step .step-badge{ color:#fff; }
.page.is-dash .start-step.hue-brass .step-badge{ color:#1A1200; }
.page.is-dash .start-card .btn-quiet{ background:transparent; color:#fff; border:1.5px solid #fff; border-radius:999px; }

.page.is-dash .review-card{ background:var(--ivory); }

/* Explore the App: the original cards and icons, on navy with white writing */
.page.is-dash .tile{ background:var(--navy); color:#fff; border:0; border-top:4px solid var(--line); border-radius:10px; }
.page.is-dash .tile.cat-first{ border-top-color:var(--c-first); } .page.is-dash .tile.cat-power{ border-top-color:var(--c-power); } .page.is-dash .tile.cat-play{ border-top-color:var(--c-play); } .page.is-dash .tile.cat-puzzle{ border-top-color:var(--c-flame); } .page.is-dash .tile.cat-tools{ border-top-color:#4F7FA0; } .page.is-dash .tile.cat-test{ border-top-color:var(--c-test); }
.page.is-dash .tile h3{ color:#fff; }
.page.is-dash .tile p{ color:#DCE6EC; }
.page.is-dash .tile .foot,.page.is-dash .tile .foot *{ color:var(--brass-light); }
.page.is-dash .tile .l-icon{ background:rgba(255,255,255,.16); color:#fff; }
.page.is-dash .tile .cat-tag{ background:rgba(255,255,255,.14); color:var(--brass-light); }
.page.is-dash .tile.cat-first .cat-tag,.page.is-dash .tile.cat-power .cat-tag{ color:#fff; }
}
:root{ --moss:#236B4A; }


/* narrow screens: the three starter tasks stack as full-width cards; everything stays comfortably readable */
@media (max-width:760px){
  .page.is-dash .start-grid{ grid-template-columns:1fr!important; gap:12px; }
  .page.is-dash .start-step{ padding:16px 16px 14px; }
  .page.is-dash .start-step .step-t,.page.is-dash .start-step b,.page.is-dash .start-step strong{ font-size:18px; }
  .page.is-dash .start-step p,.page.is-dash .start-step span:not(.step-badge):not(.step-ic){ font-size:16px; }
  .page.is-dash .start-card .btn,.d-start .btn,.page.is-dash .welcome-profile{ min-height:46px; }
  .page.is-dash .grid{ grid-template-columns:1fr; }
}
.pill.b-tested{ color:#1B5A3C; }

/* First Moves and Power Moves: the approved pawn and knight artwork beside the text */
.page.is-dash .grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.page.is-dash .tile{ grid-column:span 2; }
.page.is-dash .tile.has-art{ grid-column:span 3; display:grid; grid-template-columns:132px minmax(0,1fr); grid-template-areas:"art tag" "art h" "art p" "art foot"; column-gap:16px; row-gap:3px; align-content:start; align-items:start; padding:12px 16px 12px 12px; }
.page.is-dash .tile.has-art .tile-art{ grid-area:art; display:block; width:132px; height:auto; border-radius:8px; border:2px solid #FBF7EA; align-self:start; }
.page.is-dash .tile.has-art .cat-tag{ grid-area:tag; justify-self:start; }
.page.is-dash .tile.has-art h3{ grid-area:h; } .page.is-dash .tile.has-art p{ grid-area:p; } .page.is-dash .tile.has-art .foot{ grid-area:foot; }
@media (max-width:1000px){ .page.is-dash .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .page.is-dash .tile{ grid-column:span 1; } .page.is-dash .tile.has-art{ grid-column:span 2; } }
@media (max-width:640px){
  .page.is-dash .grid{ grid-template-columns:1fr; } .page.is-dash .tile,.page.is-dash .tile.has-art{ grid-column:span 1; }
  .page.is-dash .tile.has-art{ grid-template-columns:104px minmax(0,1fr); column-gap:12px; padding:10px 12px 10px 10px; }
  .page.is-dash .tile.has-art .tile-art{ width:104px; }
}

/* Explore the App: a thin accent colour per card, around the card and as the top bar (borders only) */
.page.is-dash .tile[data-tile]{ --accent:#7C93A8; border-top-color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.page.is-dash .tile[data-tile=first]{ --accent:#C99A2E; }
.page.is-dash .tile[data-tile=power]{ --accent:#B04A3A; }
.page.is-dash .tile[data-tile=games]{ --accent:#3F8F8C; }
.page.is-dash .tile[data-tile=puzzles]{ --accent:#B8693A; }
.page.is-dash .tile[data-tile=board]{ --accent:#5F82A8; }
.page.is-dash .tile[data-tile=reference]{ --accent:#CDBF9C; }
.page.is-dash .tile[data-tile=assessment]{ --accent:#A33A55; }
/* tighter vertical rhythm so the learning controls sit on the first screen */
.page.is-dash{ gap:14px; }
.page.is-dash .welcome-bar{ padding:8px 14px; }
.page.is-dash .student-cta{ padding:12px 16px; gap:14px; }
.page.is-dash .student-cta-icon{ flex-basis:48px; width:48px; height:48px; padding:7px; }
.page.is-dash .student-cta-text h2{ font-size:19px; margin-bottom:2px; }
@media (min-width:901px){ .nav{ position:sticky; } }

/* ================= sidebar, matched to the approved reference ================= */
:root{ --nav-bg:#001C2F; --ivory-line:#EEEFE6; --gold-line:#FDC832; }
.nav{ background:var(--nav-bg)!important; padding:14px 12px 18px; border:1px solid rgba(255,255,255,.07); border-radius:14px; }
@media (max-width:900px){ .nav{ padding-top:calc(60px + env(safe-area-inset-top,0px)); border-radius:0 14px 14px 0; } }

/* logo: gold frame, long ivory corner brackets, transparent knight, readable tagline, subtle checkerboard */
.nav a.wordmark{ position:relative; display:block; min-height:0; margin:0 0 10px; padding:9px 8px 9px; border:2px solid var(--gold-line); border-radius:12px; background:transparent; text-align:center; }
.nav a.wordmark:hover{ background:transparent; }
.nav a.wordmark::before,.nav a.wordmark::after{ content:none; }
.wm-c{ position:absolute; width:30px; height:30px; border:0 solid var(--ivory-line); pointer-events:none; }
.wm-c.tl{ top:6px; left:6px; border-top-width:1.5px; border-left-width:1.5px; border-top-left-radius:10px; }
.wm-c.tr{ top:6px; right:6px; border-top-width:1.5px; border-right-width:1.5px; border-top-right-radius:10px; }
.wm-c.bl{ bottom:6px; left:6px; border-bottom-width:1.5px; border-left-width:1.5px; border-bottom-left-radius:10px; }
.wm-c.br{ bottom:6px; right:6px; border-bottom-width:1.5px; border-right-width:1.5px; border-bottom-right-radius:10px; }
.nav .wordmark .emblem{ display:block; width:auto; height:84px; max-width:100%; margin:0 auto; border:0; border-radius:0; -webkit-mask-image:none; mask-image:none; background:none; }
.nav .wordmark .wm-tag{ position:relative; display:block; margin:2px 0 0; color:#fff; font-family:var(--body); font-weight:700; font-size:15.5px; line-height:1.2; letter-spacing:.01em; text-shadow:none; }
.nav .wordmark .wm-tag::after{ content:""; display:block; width:132px; height:10px; margin:3px auto 0; background:repeating-conic-gradient(#1B4B86 0 25%, transparent 0 50%) 0 0/18px 10px; opacity:.95; }

/* profile: avatar, name, Coach Area badge and Log out, compact and unboxed */
.who-card{ display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"av name" "av row"; column-gap:10px; row-gap:4px; align-items:center; margin:0 0 10px; padding:0 2px; }
.who-card .me-chip:not([hidden]){ display:contents; }
.who-card .me-chip .coach-ini{ grid-area:av; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#00182A; color:#fff; border:2px solid var(--gold-line); font-weight:800; font-size:16px; }
.who-card .me-chip .chip-name{ grid-area:name; align-self:end; color:#fff; font-size:19px; font-weight:700; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who-card .side-row{ grid-area:row; display:flex; align-items:center; gap:7px; margin:0; padding:0; }
.who-card:has(.me-chip[hidden]) .side-row{ grid-column:1 / -1; grid-row:1; }
.who-card .side-badge{ background:var(--gold-line); color:#0A1822; font-size:11px; font-weight:800; letter-spacing:.05em; padding:5px 9px; border-radius:99px; white-space:nowrap; }
.who-card .side-badge.stu{ background:#37D4BE; }
.nav .who-card .side-row a.nav-back{ margin:0; min-height:0; padding:4px 11px; border:1.5px solid var(--ivory-line); border-radius:99px; color:#fff; font-size:13px; font-weight:700; background:transparent; }

/* navigation links: rounded boxes, 2px ivory outline, bold white labels, strong coloured bottom stroke */
.nav-group{ border-left:0!important; padding-left:0!important; margin:8px 0 4px; }
.nav h2,.nav-group h2,.nav-group.owner-group h2{ margin:10px 2px 6px; padding:0; background:none; border:0; color:#EAF0F2; font-size:12px; font-weight:800; letter-spacing:.16em; }
.nav a[data-nav]:not([data-nav=me-chip]),.nav .owner-logout-link{
  box-sizing:border-box; display:flex; align-items:center; gap:11px; width:100%; min-height:42px; margin:0 0 7px; padding:6px 12px 5px;
  background:transparent; color:#fff; font-size:15.5px; font-weight:700; text-align:left; box-shadow:none;
  border:2px solid var(--ivory-line); border-bottom:3.5px solid var(--acc); border-radius:11px; }
.nav a[data-nav]:not([data-nav=me-chip]):hover,.nav .owner-logout-link:hover{ background:rgba(255,255,255,.06); }
.nav a[data-nav]:not([data-nav=me-chip])[aria-current="page"]{ background:transparent; border-color:var(--gold-line); box-shadow:none; }
.nav a[data-nav] .nav-ic,.nav .owner-logout-link .nav-ic{ flex:0 0 22px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:1; }
.nav a[data-nav][aria-current="page"] .nav-ic{ color:var(--gold-line); }
.nav a[data-nav] .nav-ic svg,.nav .owner-logout-link .nav-ic svg{ width:22px; height:22px; }
.nav a[data-nav] .nav-label,.nav .owner-logout-link .nav-label{ flex:1 1 auto; min-width:0; font-weight:700; line-height:1.2; }
.nav .new-badge{ margin-left:auto; flex:0 0 auto; }
.nav-more{ margin:8px 0 8px; }
.nav-more > summary{ box-sizing:border-box; min-height:42px; margin:0 0 7px; padding:6px 12px; border:2px solid var(--ivory-line); border-radius:11px; background:transparent; color:#fff; font-size:15.5px; font-weight:700; }
.nav .more-h{ margin:10px 2px 6px; color:#EAF0F2; }
/* accent colours (from the reference) */
.nav a[data-nav],.nav .owner-logout-link{ --acc:#63ADF3; }
.nav a[data-nav=dashboard]{ --acc:#FBCB1D; } .nav a[data-nav=first]{ --acc:#FFD51A; } .nav a[data-nav=td]{ --acc:#F8BF19; }
.nav a[data-nav=power]{ --acc:#EE4B45; } .nav a[data-nav=games]{ --acc:#37D4BE; } .nav a[data-nav=endgames]{ --acc:#37D4BE; }
.nav a[data-nav=puzzles]{ --acc:#F38E5A; } .nav a[data-nav=board]{ --acc:#63ADF3; }
.nav a[data-nav=reference]{ --acc:#E8DDBA; } .nav a[data-nav=assessment]{ --acc:#E0527A; }
@media (max-width:900px){ .nav a[data-nav]:not([data-nav=me-chip]),.nav .owner-logout-link{ min-height:46px; } .nav-more > summary{ min-height:46px; } }

/* sidebar fit-and-finish */
.who-card .side-row.student-only{ display:none; }
body.student-mode .who-card .side-row.student-only,body.owner-mode .who-card .side-row.student-only{ display:flex; }
.nav a.wordmark{ padding:6px 8px 6px; }
.nav .wordmark .emblem{ height:82px; }
.nav .wordmark .wm-tag{ margin:0; line-height:1.1; }
.nav .wordmark .wm-tag::after{ height:8px; margin-top:3px; background-size:18px 8px; }
.nav a[data-nav]:not([data-nav=me-chip]),.nav .owner-logout-link{ min-height:40px; padding:5px 12px 4px; margin-bottom:7px; font-size:15px; }
.nav a[data-nav] .nav-ic,.nav .owner-logout-link .nav-ic{ flex-basis:24px; width:24px; height:24px; }
.nav a[data-nav] .nav-ic svg,.nav .owner-logout-link .nav-ic svg{ width:24px; height:24px; }
.nav-more > summary{ min-height:40px; font-size:15px; }
@media (max-width:900px){ .nav a[data-nav]:not([data-nav=me-chip]),.nav .owner-logout-link,.nav-more > summary{ min-height:46px; } }
.who-card{ grid-template-columns:42px minmax(0,1fr); column-gap:9px; }
.who-card .me-chip .coach-ini{ width:42px; height:42px; font-size:15px; }
.who-card .me-chip .chip-name{ font-size:18px; }
.who-card .side-row{ gap:6px; flex-wrap:nowrap; white-space:nowrap; }
.who-card .side-badge{ font-size:10.5px; letter-spacing:.03em; padding:5px 8px; }
.nav .who-card .side-row a.nav-back{ font-size:12.5px; padding:4px 9px; white-space:nowrap; }
.nav a[data-nav=first] .nav-ic svg,.nav a[data-nav=power] .nav-ic svg,.nav a[data-nav=endgames] .nav-ic svg,.nav a[data-nav=openings] .nav-ic svg{ transform:scale(1.22); }
.who-card .me-chip,.nav a.me-chip{ background:transparent; }

/* Log out must always be reachable: no overlapping rows, nothing pushed outside the sidebar */
.who-card{ grid-template-areas:"av name" "av row" "stu stu"; }
.who-card .side-row.student-only{ grid-area:stu; grid-column:1 / -1; margin-top:2px; }
body.student-mode .who-card .side-row.student-only,body.owner-mode .who-card .side-row.student-only{ display:flex; }
.who-card .side-row.coach-only{ flex-wrap:wrap; row-gap:5px; min-width:0; }
.who-card .side-row{ min-width:0; }
.who-card:has(.me-chip[hidden]) .side-row.coach-only{ grid-column:1 / -1; grid-row:1; }
.who-card .side-badge{ max-width:100%; }

/* ---------- save notice: small, brief, never in the way ---------- */
.cloud-status{ top:auto; right:auto; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:calc(var(--nav-w) + 34px); max-width:min(300px,calc(100vw - 340px)); padding:8px 14px; border:2px solid #2B7A57; border-radius:12px; background:#FFFDF6; color:#111418; font:700 15px/1.3 var(--body); box-shadow:0 4px 14px rgba(0,0,0,.18); pointer-events:none; z-index:1100; }
.cloud-status[data-state="saved"]::before{ content:"\2713  "; color:#2B7A57; font-weight:800; }
.cloud-status[data-state="saving"]{ border-color:#B8862B; }
.cloud-status[data-state="error"]{ pointer-events:auto; border-color:#A3302F; background:#FFF3F1; color:#6E1B1B; max-width:min(460px,calc(100vw - 340px)); }
.cloud-status[data-state="error"]::before{ content:"\26A0  "; color:#A3302F; }
.cloud-status .btn{ margin:6px 6px 0 0; min-height:40px; }
@media (max-width:900px){
  .cloud-status{ left:12px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); max-width:min(240px,calc(100vw - 190px)); top:auto; right:auto; }
  .cloud-status[data-state="error"]{ max-width:calc(100vw - 24px); }
}

/* student mode: the "Playing as" strip is compact and matches the rest of the sidebar */
.nav .student-bar{ background:transparent; border:0; padding:0; margin:0 0 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav .student-bar .who{ display:flex; align-items:center; gap:8px; flex:1 1 130px; min-width:0; color:#fff; font-weight:700; font-size:15px; line-height:1.2; }
.nav .student-bar .who span{ color:#fff; }
.nav .student-bar .exit-student{ flex:0 0 auto; min-height:0; padding:5px 13px; border:1.5px solid var(--ivory-line); border-radius:99px; background:transparent; color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }

/* ---------- workspaces: one area label, one log out ---------- */
.nav [hidden],.nav [data-ws][hidden]{ display:none!important; }
.sb-owner[hidden]{ display:none!important; }
body.student-mode .who-card .nav-back{ display:none; }
.who-card .side-badge{ text-transform:uppercase; }
.nav .student-bar .switch-learner{ flex:0 0 auto; min-height:0; padding:5px 13px; border:1.5px solid var(--ivory-line); border-radius:99px; background:transparent; color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
.nav .student-bar .switch-learner[hidden]{ display:none; }
.nav .enter-group a{ --acc:#63ADF3; }

/* ---------- Owner activity: deleting records ---------- */
.oa-row{ display:flex; align-items:flex-start; gap:10px; }
.oa-row .oa-pick{ flex:0 0 auto; display:flex; align-items:center; min-width:44px; min-height:44px; justify-content:center; cursor:pointer; }
.oa-row .oa-pick input{ width:22px; height:22px; accent-color:#0E2B3E; }
.oa-row .oa-main{ flex:1 1 auto; min-width:0; }
.oa-row .oa-del1{ flex:0 0 auto; min-height:40px; padding:0 14px; align-self:center; border-color:#A3302F; color:#8B182B; background:#FFF; }
.oa-tools{ margin:8px 0 12px; padding:12px 14px; border:2px solid #A3302F; border-radius:10px; background:#FFF8F6; }
.oa-tools-row{ display:flex; flex-wrap:wrap; gap:8px; }
.oa-tools .btn{ min-height:44px; }
.oa-danger{ background:#A3302F; color:#fff; border-color:#7E2423; }
.oa-danger:hover,.oa-danger:focus-visible{ background:#8B2827; }
.oa-danger[disabled],.oa-tools .btn[disabled]{ opacity:.45; cursor:not-allowed; }
.oa-tools-note{ margin:8px 0 0; color:#3B434C; }
.oa-delmsg{ margin:6px 0 0; font-weight:700; color:#111418; min-height:1.2em; }
.oa-modal{ position:fixed; inset:0; z-index:2500; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(8,18,26,.7); }
.oa-modal-card{ width:min(520px,100%); max-height:92vh; overflow:auto; background:#FFFDF6; color:#111418; border:3px solid #A3302F; border-radius:14px; padding:20px 22px; }
.oa-modal-card h2{ margin:0 0 8px; font-size:22px; }
.oa-m-count{ font-size:20px; }
.oa-m-count b{ font-size:28px; color:#8B182B; }
.oa-m-type{ display:block; margin:10px 0; font-weight:700; }
.oa-m-type input{ display:block; width:100%; min-height:44px; margin-top:6px; padding:8px 12px; border:2px solid #0E2B3E; border-radius:8px; font:inherit; text-transform:uppercase; }
.oa-modal .btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
@media (max-width:640px){ .oa-row{ flex-wrap:wrap; } .oa-row .oa-del1{ margin-left:54px; } .oa-tools-row .btn{ flex:1 1 100%; } }

/* the area label and Log out always fit the sidebar, whatever the label length */
.who-card .side-row{ flex-wrap:wrap; row-gap:5px; min-width:0; white-space:normal; }
.who-card .side-badge{ white-space:normal; max-width:100%; line-height:1.15; text-align:left; }
.who-card:has(.me-chip[hidden]) .side-row{ grid-column:1 / -1; grid-row:1; }