/* ============================================================================
   Inside a circle.

   Everything except the subject recedes rather than disappearing — you should
   still be able to see where you are in your own world, because that is the
   whole reason this app draws a map instead of a list.
   ========================================================================== */

.v10-world-inside .graph-node.v10-inside-other,
.v10-world-inside .graph-edge{
  opacity:.12!important;
  filter:saturate(.25);
  transition:opacity .5s ease,filter .5s ease;
  pointer-events:none;
}
.v10-world-inside .ring,
.v10-world-inside .ring-label,
.v10-world-inside .zone-handle,
.v10-world-inside #v10Layer{opacity:.1!important;transition:opacity .5s ease}

.v10-world-inside .graph-node.v10-inside-subject{
  z-index:40!important;
  transition:filter .5s ease,opacity .5s ease;
  filter:none!important;opacity:1!important;
}

/* --------------------------------------------------------------- orbit -- */
.v10-orbit{position:absolute;z-index:30;pointer-events:none}
.v10-orbit-rings{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:920px;height:920px;overflow:visible;pointer-events:none;
}
.v10-orbit-rings circle{
  fill:none;stroke:rgba(24,40,90,.11);stroke-width:1.5;
  stroke-dasharray:2 12;stroke-linecap:round;
  animation:v10-ring-in .7s ease both;
}
.v10-orbit-rings circle.outer{stroke:rgba(24,40,90,.07);animation-delay:.12s}
@keyframes v10-ring-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

.v10-sat{
  /* transform, not the `translate` property: the hover rule and the entry
     keyframe both set transform:translate(-50%,-50%), and the two
     properties apply independently -- so using both sent this a full
     width up and left every time you pointed at it. */
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;gap:9px;max-width:230px;
  background:var(--surface,#fff);
  border:1px solid var(--line,#DCE5EB);
  border-radius:999px;padding:8px 15px 8px 11px;
  box-shadow:0 2px 6px rgba(28,45,95,.06),0 12px 28px -14px rgba(28,45,95,.4);
  animation:v10-sat-in .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
@keyframes v10-sat-in{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.v10-sat:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 4px 10px rgba(28,45,95,.09),0 18px 40px -16px rgba(28,45,95,.5)}
.v10-sat-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.v10-sat-text{min-width:0}
.v10-sat-text strong{display:block;font-size:13px;font-weight:580;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.v10-sat-text small{display:block;font-size:10.5px;color:var(--muted,#93A0B6);margin-top:1px}

/* One colour per kind, matching the language used everywhere else in the app. */
.v10-sat-person     .v10-sat-dot{background:#1E86C8}
.v10-sat-task       .v10-sat-dot{background:#8FA9D0}
.v10-sat-commitment .v10-sat-dot{background:#C2567F}
.v10-sat-waiting    .v10-sat-dot{background:#F0A52B}
.v10-sat-note       .v10-sat-dot{background:#7C5CE7}
.v10-sat.late{border-color:color-mix(in srgb,#C2567F 45%,transparent)}
.v10-sat.late .v10-sat-text small{color:#A8446A;font-weight:650}

/* ------------------------------------------------------------ the bar --- */
.v10-inside-bar{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9500;
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line,#DCE5EB);border-radius:999px;
  padding:9px 10px 9px 17px;
  box-shadow:0 4px 12px rgba(28,45,95,.08),0 22px 48px -20px rgba(28,45,95,.45);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  animation:v10-bar-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes v10-bar-in{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.v10-inside-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.v10-inside-bar strong{font-size:14.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap}
.v10-inside-bar small{font-size:12px;color:var(--muted,#93A0B6);white-space:nowrap}
.v10-inside-bar button{
  font:inherit;font-size:12.5px;cursor:pointer;border-radius:999px;padding:7px 14px;
  border:1px solid var(--line,#DCE5EB);background:var(--surface,#fff);color:var(--text,#12263F);
}
.v10-inside-bar button:hover{border-color:var(--nhs,#1E86C8);color:var(--nhs,#1E86C8)}
.v10-inside-bar .v10-inside-out{color:var(--muted,#66748F)}

@media(max-width:620px){
  .v10-inside-bar{left:12px;right:12px;translate:none;justify-content:space-between;padding:9px 10px 9px 14px}
  .v10-inside-bar small{display:none}
  .v10-sat{max-width:170px;padding:7px 12px 7px 9px}
  .v10-sat-text strong{max-width:120px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .v10-sat,.v10-orbit-rings circle,.v10-inside-bar{animation:none}
}