/* =====================================================
   dc-nav.css — DentCast Shared Navigation
   Topbar · Toolbar Drawer · Radar Overlay
   Uses CSS variables defined in dc-theme.css.
   index.html has its own inline version.
===================================================== */

/* ── Reserve space for the fixed topbar (57px tall) ── */
body:has(.dc-topbar) {
  padding-top: 57px !important;
  margin-top: 0 !important;
}

/* =====================================================
   TOP BAR
===================================================== */
.dc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, rgba(2,35,96,.10));
  box-shadow: 0 1px 8px rgba(2,35,96,.06);
  transition: background var(--tr2, .26s), border-color var(--tr2, .26s);
  gap: 10px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

[data-theme="dark"] .dc-topbar {
  box-shadow: 0 1px 8px rgba(0,0,0,.20);
}

.dc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dc-topbar-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-f, 999px);
  background: var(--surface2, #f4f6fb);
  border: 1px solid var(--border2, rgba(2,35,96,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--tr, .17s);
  color: var(--txt2, #4a5f85);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.dc-topbar-btn:active {
  transform: scale(.88);
  background: var(--surface3, #eaecf5);
}

.dc-svg-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.dc-topbar-btn .dc-svg-icon,
.dc-drawer-tool-ico .dc-svg-icon,
.about-contact-ico .dc-svg-icon,
.dc-info-btn .dc-svg-icon,
.dc-search-info-btn .dc-svg-icon,
.dc-close-results .dc-svg-icon,
.dc-radar-hero-ico .dc-svg-icon,
.ep-ico .dc-svg-icon,
.dc-grid-ico .dc-svg-icon,
.gls-ico .dc-svg-icon,
.pt-btn-ico .dc-svg-icon,
.dc-bn-ico .dc-svg-icon,
.dcd-group-hdr-ico .dc-svg-icon,
.dcd-subitem-ico .dc-svg-icon,
.dcd-a-footer-btn .dc-svg-icon,
.dcd-col-b-empty-ico .dc-svg-icon,
#dc-theme-toggle .dc-svg-icon {
  width: 18px;
  height: 18px;
}

.dc-has-ui-icon > .dc-svg-icon {
  margin-left: .35em;
}

.ai-title .dc-svg-icon,
.header-sub .dc-svg-icon,
.page-header h2 .dc-svg-icon,
.wrap > header h1 .dc-svg-icon,
.wrap > h2 .dc-svg-icon,
main > h2 .dc-svg-icon {
  width: .95em;
  height: .95em;
}

.dc-topbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}

.dc-topbar-brand-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--pr, #022360);
  letter-spacing: -.3px;
  transition: color var(--tr2, .26s);
  line-height: 1.2;
}

.dc-topbar-brand-sub {
  font-size: .70rem;
  color: var(--ac, #0b5fff);
  text-decoration: none;
  transition: opacity var(--tr, .17s);
  opacity: .8;
  line-height: 1.3;
}

.dc-topbar-brand-sub:active { opacity: .5; }

/* =====================================================
   TOOLBAR DRAWER
===================================================== */
.dc-toolbar-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--surface2, #f4f6fb);
  border-bottom: 1px solid var(--border, rgba(2,35,96,.10));
  transition: max-height .28s cubic-bezier(.4,0,.2,1),
              opacity .22s ease;
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 199;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.dc-toolbar-drawer.open {
  max-height: 80px;
  opacity: 1;
}

.dc-toolbar-drawer-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dc-toolbar-drawer-inner::-webkit-scrollbar { display: none; }

.dc-toolbar-drawer-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--txt3, #8a9cbe);
  white-space: nowrap;
  padding-left: 10px;
  border-left: 1px solid var(--border, rgba(2,35,96,.10));
  margin-left: 6px;
  flex-shrink: 0;
}

.dc-drawer-tool-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--txt, #0a1a33);
  flex-shrink: 0;
  transition: background var(--tr, .17s);
  border-radius: var(--r-sm, 10px);
  -webkit-tap-highlight-color: transparent;
}

.dc-drawer-tool-seg:active {
  background: rgba(var(--pr-rgb, 2,35,96), .06);
}

.dc-drawer-tool-ico { font-size: 20px; line-height: 1; }

.dc-drawer-tool-txt {
  font-size: 11px;
  font-weight: 800;
  color: var(--txt2, #4a5f85);
  white-space: nowrap;
}

/* =====================================================
   RADAR OVERLAY
===================================================== */
.radar-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg, #f0f2f5);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  direction: rtl;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  box-sizing: border-box;
}

.radar-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

body.dc-radar-mode { overflow: hidden; }

.radar-overlay-header {
  display: flex;
  align-items: center;
  padding: 13px 18px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, rgba(2,35,96,.10));
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: background var(--tr2, .26s);
}

.radar-close-btn {
  background: none;
  border: none;
  font-size: 26px;
  color: var(--txt2, #4a5f85);
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 14px;
  transition: color var(--tr, .17s);
}

.radar-close-btn:hover { color: #ff4646; }

.radar-header-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--txt, #0a1a33);
  flex-grow: 1;
}

.radar-overlay-body {
  flex-grow: 1;
  padding: 16px;
  overflow-y: auto;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.radar-search-box { margin-bottom: 18px; }

#dcRadarInput {
  width: 100%;
  padding: 12px 18px;
  font-size: 15px;
  border: 2px solid rgba(var(--ac-rgb, 11,95,255), .30);
  border-radius: var(--r-f, 999px);
  outline: none;
  background: var(--surface, #ffffff);
  color: var(--txt, #0a1a33);
  box-shadow: 0 3px 12px rgba(var(--ac-rgb, 11,95,255), .06);
  transition: all var(--tr, .17s);
  font-family: inherit;
  box-sizing: border-box;
  direction: rtl;
}

#dcRadarInput:focus {
  border-color: rgba(var(--ac-rgb, 11,95,255), .60);
  box-shadow: 0 4px 18px rgba(var(--ac-rgb, 11,95,255), .15);
}

.radar-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radar-initial-msg, .radar-no-results {
  text-align: center;
  color: var(--txt3, #8a9cbe);
  margin-top: 30px;
  font-size: 13.5px;
}

.radar-result-item {
  background: var(--card-bg, #ffffff);
  border-radius: var(--r-md, 14px);
  padding: 13px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--card-border, rgba(2,35,96,.09));
  transition: all var(--tr, .17s);
  display: block;
  box-shadow: var(--card-sh, 0 1px 3px rgba(2,35,96,.07));
}

.radar-result-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-sh2, 0 4px 18px rgba(2,35,96,.13));
}

.radar-item-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ac, #0b5fff);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.radar-item-url {
  font-size: 11px;
  color: #27ae60;
  margin-bottom: 5px;
  direction: ltr;
  text-align: left;
}

[data-theme="dark"] .radar-item-url { color: #4caf7d; }

.radar-item-desc {
  font-size: 12px;
  color: var(--txt2, #4a5f85);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================
   dcDose — weekly 35-minute presence player
   A header ring + popover on every internal page. Counts
   only real presence (tab visible + recent interaction),
   stored per device in localStorage, week starts Saturday.
   Injected by dc-nav.js; homepage carries its own copy.
===================================================== */
.dc-dose-ring{
  position:relative;
  width:34px; height:34px;
  border-radius:var(--r-f,17px);
  background:var(--surface2,#f4f7fd);
  border:1px solid var(--border2,rgba(2,35,96,.06));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; flex-shrink:0;
  font-family:inherit;
  transition:transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.dc-dose-ring:active{ transform:scale(.88); }
.dc-dose-ring svg{ position:absolute; inset:0; width:34px; height:34px; transform:rotate(-90deg); }
.dc-dose-ring .dc-dr-bg{ fill:none; stroke:rgba(var(--pr-rgb,2,35,96),.12); stroke-width:2.5; }
.dc-dose-ring .dc-dr-fg{
  fill:none; stroke:var(--ac,#0b5fff); stroke-width:2.5; stroke-linecap:round;
  transition:stroke-dashoffset .6s ease, stroke .3s ease;
}
.dc-dose-ring .dc-dr-min{ font-size:.56rem; font-weight:900; color:var(--pr,#022360); line-height:1; }
.dc-dose-ring.dc-done .dc-dr-fg{ stroke:#c49820; }
.dc-dose-ring.dc-done .dc-dr-min{ color:#c49820; }
[data-theme="dark"] .dc-dose-ring.dc-done .dc-dr-fg{ stroke:#e3b94a; }
[data-theme="dark"] .dc-dose-ring.dc-done .dc-dr-min{ color:#e3b94a; }

/* shared dose bar (popover + homepage hero row) */
.dc-dose-bar{
  position:relative;
  height:6px; border-radius:999px;
  background:rgba(var(--pr-rgb,2,35,96),.08);
  overflow:hidden;
}
.dc-dose-fill{
  position:absolute; top:0; bottom:0; right:0;
  width:0%; border-radius:999px;
  background:linear-gradient(to left,var(--ac,#0b5fff),rgba(var(--ac-rgb,11,95,255),.6));
  transition:width .6s ease, background .3s ease;
}
.dc-done .dc-dose-fill,
.dc-dose-bar.dc-done .dc-dose-fill{ background:linear-gradient(to left,#c49820,#e3b94a); }
.dc-dose-tick{
  position:absolute; top:1px; bottom:1px;
  width:1.5px; border-radius:1px;
  background:rgba(245,106,121,.55); /* site coral — upcoming 5-min targets */
}
[data-theme="dark"] .dc-dose-tick{ background:rgba(255,122,138,.6); }
.dc-dose-live{
  width:7px; height:7px; border-radius:50%;
  background:var(--txt3,#8a9bbf);
  flex-shrink:0;
  transition:background .3s ease;
}
.dc-dose-live.on{
  background:#2e7d32;
  animation:dcDosePulse 1.6s ease-out infinite;
}
@keyframes dcDosePulse{
  0%{ box-shadow:0 0 0 0 rgba(46,125,50,.35); }
  100%{ box-shadow:0 0 0 7px rgba(46,125,50,0); }
}
@media (prefers-reduced-motion:reduce){ .dc-dose-live.on{ animation:none; } }

/* popover */
.dc-dose-pop{
  position:fixed; z-index:400;
  width:232px;
  background:var(--surface,#fff);
  border:1px solid var(--border,rgba(2,35,96,.10));
  border-radius:16px;
  box-shadow:0 12px 40px rgba(2,8,30,.18);
  padding:13px 14px 11px;
  opacity:0; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.dc-dose-pop.open{ opacity:1; transform:none; pointer-events:auto; }
.dc-dose-pop-title{ font-size:.72rem; font-weight:900; color:var(--pr,#022360); margin-bottom:7px; }
.dc-dose-pop-time{ font-size:1.02rem; font-weight:900; color:var(--txt,#16203a); margin-bottom:8px; }
.dc-dose-pop .dc-dose-bar{ margin-bottom:9px; }
.dc-dose-pop-status{
  font-size:.66rem; font-weight:700; color:var(--txt2,#4a5f85);
  display:flex; align-items:center; gap:6px;
}
.dc-dose-pop-note{
  font-size:.59rem; color:var(--txt3,#8a9bbf); line-height:1.8;
  margin-top:7px; padding-top:7px;
  border-top:1px dashed var(--border2,rgba(2,35,96,.06));
}
@media print{ .dc-dose-ring,.dc-dose-pop{ display:none; } }

/* dcDose — milestone effects (no text, peripheral only) */
.dc-dose-tick{ transition:background .5s ease; }
.dc-dose-tick.on{ background:rgba(var(--ac-rgb,11,95,255),.85); }
.dc-done .dc-dose-tick.on,
.dc-dose-bar.dc-done .dc-dose-tick.on{ background:rgba(255,255,255,.65); }
.dc-dose-bar.dc-cele{ animation:dcDoseGlow 1s ease-out; }
@keyframes dcDoseGlow{
  0%{ box-shadow:0 0 0 0 rgba(var(--ac-rgb,11,95,255),.4); }
  100%{ box-shadow:0 0 0 9px rgba(var(--ac-rgb,11,95,255),0); }
}
.dc-dose-ring.dc-pop{ animation:dcDosePop .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes dcDosePop{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(var(--ac-rgb,11,95,255),.45); }
  35%{ transform:scale(1.16); }
  100%{ transform:scale(1); box-shadow:0 0 0 12px rgba(var(--ac-rgb,11,95,255),0); }
}
@media (prefers-reduced-motion:reduce){
  .dc-dose-bar.dc-cele{ animation:none; }
  .dc-dose-ring.dc-pop{ animation:none; }
}

/* dcDose — at 70 minutes (double the goal) the dot becomes a tiny beating heart */
.dc-dose-live.dc-heart{
  background:none; border-radius:0;
  width:11px; height:11px;
  color:#f56a79;
  display:inline-flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .dc-dose-live.dc-heart{ color:#ff7a8a; }
.dc-dose-live.dc-heart svg{ width:11px; height:11px; fill:currentColor; display:block; }
.dc-dose-live.dc-heart.on{ background:none; animation:dcHeartBeat 1.4s ease-in-out infinite; }
@keyframes dcHeartBeat{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25); }
}
@media (prefers-reduced-motion:reduce){ .dc-dose-live.dc-heart.on{ animation:none; } }

/* dcDose — once-per-week greeting banner (first visit after the Saturday reset) */
.dc-dose-greet{
  position:fixed; z-index:400;
  top:68px; left:50%;
  transform:translateX(-50%) translateY(-8px);
  max-width:min(92vw,340px);
  background:var(--surface,#fff);
  border:1px solid var(--border,rgba(2,35,96,.10));
  border-radius:16px;
  box-shadow:0 12px 40px rgba(2,8,30,.18);
  padding:10px 14px;
  font-size:.74rem; font-weight:700; color:var(--txt,#16203a); line-height:1.9;
  text-align:center;
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dc-dose-greet b{ color:var(--ac,#0b5fff); font-weight:900; }
.dc-dose-greet.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media print{ .dc-dose-greet{ display:none; } }

/* dcDose — milestone flash message (per-5-minute), in site coral */
.dc-dose-pop-state.dc-flash{ color:#f56a79; font-weight:800; }
[data-theme="dark"] .dc-dose-pop-state.dc-flash{ color:#ff7a8a; }

/* dcDose — celebration toast (35-min goal & 70-min double, on every page) */
.dc-dose-toast{
  position:fixed; z-index:500;
  left:50%; bottom:calc(80px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(16px);
  max-width:min(92vw,360px);
  display:flex; align-items:center; gap:10px;
  background:var(--surface,#fff); border:1px solid var(--border,rgba(2,35,96,.10));
  border-radius:14px; box-shadow:0 14px 44px rgba(2,8,30,.22);
  padding:11px 15px;
  font-size:.78rem; font-weight:700; color:var(--txt,#0a1a33); line-height:1.85;
  opacity:0; transition:opacity .4s ease, transform .4s cubic-bezier(.22,.9,.3,1);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.dc-dose-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.dc-dose-toast b{ font-weight:900; }
.dc-dose-toast-ic{ font-size:1.25rem; line-height:1; flex-shrink:0; }
.dc-dose-toast.dc-goal{ border-color:rgba(196,152,32,.5); }
.dc-dose-toast.dc-goal b{ color:#c49820; }
.dc-dose-toast.dc-double{ border-color:rgba(245,106,121,.5); }
.dc-dose-toast.dc-double b{ color:#f56a79; }
[data-theme="dark"] .dc-dose-toast.dc-goal b{ color:#e3b94a; }
[data-theme="dark"] .dc-dose-toast.dc-double b{ color:#ff7a8a; }
@media print{ .dc-dose-toast{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .dc-dose-toast{ transition:opacity .3s ease; transform:translateX(-50%); }
  .dc-dose-toast.show{ transform:translateX(-50%); }
}