/* Ajyal North Star — shared experience enhancement layer
   Scope: visual/interaction only. No backend, auth, data, or network behavior. */
:root{
  --motion-micro:120ms;
  --motion-standard:160ms;
  --motion-surface:220ms;
  --motion-large:250ms;
  --ease-standard:cubic-bezier(.2,.75,.2,1);
  --ease-emphasized:cubic-bezier(.2,.9,.2,1);
  --focus-color:rgba(184,148,85,.62);
  --focus-soft:rgba(184,148,85,.18);
  --surface-hover:#fbfcfd;
  --surface-pressed:#f2f4f7;
  --premium-shadow:0 18px 50px rgba(22,34,58,.12);
  --premium-shadow-soft:0 8px 24px rgba(22,34,58,.08);
}
html{scroll-behavior:smooth}
body{line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit}
::selection{background:rgba(184,148,85,.22)}
a,button,input,select,textarea,[role="button"]{
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    border-color var(--motion-micro) var(--ease-standard),
    color var(--motion-micro) var(--ease-standard),
    box-shadow var(--motion-micro) var(--ease-standard),
    opacity var(--motion-micro) var(--ease-standard),
    transform var(--motion-micro) var(--ease-standard);
}
:focus-visible{
  outline:2px solid var(--focus-color)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px var(--focus-soft);
}
button:disabled,[aria-disabled="true"]{opacity:.52;cursor:not-allowed;pointer-events:none}
button:not(:disabled):active{transform:translateY(1px)}
input,select,textarea{caret-color:var(--gold)}
input:focus,select:focus,textarea:focus{border-color:#b8a27b!important;box-shadow:0 0 0 3px var(--focus-soft)}
input.is-dirty,select.is-dirty,textarea.is-dirty{border-color:#c9a865!important;box-shadow:inset -3px 0 rgba(184,148,85,.42)}
.upload-zone.has-file,.file-upload.has-file{border-color:#89a995!important;background:#f7fbf8!important}

.primary-nav a{position:relative}
.primary-nav a.active{box-shadow:inset -3px 0 0 rgba(201,178,127,.88)}
@media (hover:hover){
  .primary-nav a:hover{transform:translateX(-2px)}
  .global-search:hover,.workspace-switcher:hover,.icon-btn:hover,.filter:hover,
  .row-actions button:hover,.inspector-actions button:hover,.text-btn:hover{
    border-color:var(--line2);
    background:var(--surface-hover);
  }
  .quick-action:hover,.approve:hover{box-shadow:0 7px 18px rgba(24,35,58,.18);transform:translateY(-1px)}
  button[data-record]:hover,button[data-id]:hover,button[data-program]:hover,
  button[data-request]:hover,button[data-entity]:hover,button[data-template]:hover{
    background-color:var(--surface-hover);
  }
}
button.selected,button.active,[aria-pressed="true"]{transition-duration:var(--motion-standard)}
.attention-row.selected,.template-row.selected,
button[data-record].selected,button[data-request].selected,button[data-entity].selected{
  box-shadow:inset -3px 0 0 var(--gold),0 1px 0 rgba(22,34,58,.03);
}

.topbar{box-shadow:0 1px 0 rgba(22,34,58,.02)}
.sidebar,.topbar,.inspector,.crm-inspector,.program-inspector,.hr-inspector,
.finance-inspector,.vol-inspector,.part-inspector,.partner-inspector,.template-inspector,.output-inspector,.settings-inspector{
  transition:transform var(--motion-surface) var(--ease-emphasized),opacity var(--motion-standard) var(--ease-standard),box-shadow var(--motion-standard) var(--ease-standard);
}
.inspector,.crm-inspector,.program-inspector,.hr-inspector,.finance-inspector,
.vol-inspector,.part-inspector,.partner-inspector,.template-inspector,.output-inspector,.settings-inspector{
  box-shadow:var(--premium-shadow-soft);
}
body.ui-ready main{animation:ns-surface-in var(--motion-surface) var(--ease-standard) both}
@keyframes ns-surface-in{from{opacity:.01;transform:translateY(5px)}to{opacity:1;transform:none}}

dialog[open]{animation:ns-dialog-in var(--motion-surface) var(--ease-emphasized) both}
dialog[open]::backdrop{animation:ns-backdrop-in var(--motion-standard) ease-out both}
@keyframes ns-dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ns-backdrop-in{from{opacity:0}to{opacity:1}}
.command-results button:focus-visible{background:var(--surface2);outline-offset:0!important}

.toast{
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity var(--motion-standard) var(--ease-standard),transform var(--motion-standard) var(--ease-emphasized)!important;
  box-shadow:0 12px 34px rgba(22,34,58,.20);
}
.toast.show{opacity:1;transform:none}

.is-loading{position:relative;pointer-events:none;opacity:.76}
.is-loading::after{
  content:"";display:inline-block;width:13px;height:13px;margin-inline-start:7px;
  border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;
  vertical-align:-2px;animation:ns-spin .72s linear infinite
}
.is-success{box-shadow:inset -3px 0 0 var(--green)!important}
.is-error{box-shadow:inset -3px 0 0 var(--red)!important}
@keyframes ns-spin{to{transform:rotate(360deg)}}

.state-surface{
  min-height:150px;display:grid;place-items:center;align-content:center;gap:7px;
  padding:28px;text-align:center;border:1px dashed var(--line2);border-radius:12px;
  background:rgba(255,255,255,.62);color:var(--muted)
}
.state-surface strong{color:var(--ink);font-size:14px}
.state-surface p{margin:0;max-width:52ch}
.state-surface[data-state="blocked"],.state-surface[data-state="error"]{border-color:#e5bbb7;background:#fff8f7}
.state-surface[data-state="warning"],.state-surface[data-state="stale"]{border-color:#dec99e;background:#fffbf3}
.state-surface[data-state="success"]{border-color:#b9d2c3;background:#f6fbf8}
.empty-operational{transition:background-color var(--motion-standard) var(--ease-standard),border-color var(--motion-standard) var(--ease-standard)}

.mobile-nav-toggle,.sidebar-backdrop,.inspector-sheet-backdrop,.inspector-mobile-close{display:none}

.ns-inspector-surface{scrollbar-gutter:stable}
.inspector-mobile-close{
  width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:10px;
  align-items:center;justify-content:center;cursor:pointer;font-size:20px
}

@media(max-width:1100px){
  .ns-inspector-surface{
    position:fixed!important;inset:auto 0 0 0!important;top:auto!important;
    width:100%!important;max-width:none!important;max-height:82dvh;overflow:auto;
    border-radius:18px 18px 0 0!important;border-bottom:0!important;
    transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none;z-index:120;
    box-shadow:var(--premium-shadow)!important;
  }
  body.inspector-sheet-open .ns-inspector-surface{transform:none;opacity:1;pointer-events:auto}
  .inspector-mobile-close{display:flex;margin-inline-start:auto;flex:0 0 auto}
  .inspector-sheet-backdrop{
    display:block;position:fixed;inset:0;background:rgba(12,18,30,.34);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;z-index:110;
    transition:opacity var(--motion-standard) ease-out;
  }
  body.inspector-sheet-open .inspector-sheet-backdrop{opacity:1;pointer-events:auto}
  body.inspector-sheet-open{overflow:hidden}
}

@media(max-width:900px){
  .sidebar{
    display:flex!important;width:min(286px,86vw)!important;max-width:86vw;
    transform:translateX(105%);z-index:100;box-shadow:var(--premium-shadow);
  }
  body.nav-open .sidebar{transform:none}
  .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(12,18,30,.36);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;z-index:90;
    transition:opacity var(--motion-standard) ease-out;
  }
  body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .mobile-nav-toggle{
    display:grid;place-items:center;position:fixed;top:12px;right:14px;z-index:80;
    width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
    background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(22,34,58,.10);
    cursor:pointer;font-size:18px
  }
  .topbar{padding-right:62px!important}
  .global-search{min-width:0}
}

@media(max-width:620px){
  body{font-size:13px}
  .page-intro h1{font-size:23px}
  .section-head{align-items:flex-start}
  .filter-row{overflow:auto;max-width:100%;padding-bottom:2px;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  dialog{max-height:88dvh}
  .command-dialog{width:calc(100vw - 18px)!important;border-radius:14px 14px 10px 10px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  button:not(:disabled):active,.primary-nav a:hover,.quick-action:hover,.approve:hover{transform:none!important}
}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--motion-standard)}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}
}

/* R2 — perceived-quality polish */
:root{
  --selected-bg:#fffdf8;
  --selected-border:#d8bf8b;
  --soft-gold:#f7f2e8;
  --soft-green:#f4faf6;
  --soft-red:#fff6f5;
  --soft-amber:#fffbf3;
  --row-radius:8px;
}

h1,h2,h3,strong{line-height:1.45}
p,small,dd,td,th,label{line-height:1.65}
small{letter-spacing:0}
.page-intro>div>p:last-child,.inspector-context,.next-action,.supporting-org-note{
  text-wrap:pretty;
}
.section-head h2,.inspector-head h2,.inspector-head h3{letter-spacing:-.01em}

.ns-tablist{
  position:relative;
  scrollbar-width:none;
  scroll-snap-type:inline proximity;
}
.ns-tablist::-webkit-scrollbar{display:none}
.ns-tablist>.ns-tab{
  position:relative;
  scroll-snap-align:start;
  min-height:36px;
}
.ns-tablist>.ns-tab.active{
  background:#fff!important;
  color:var(--ink)!important;
  box-shadow:inset 0 -2px 0 var(--gold),0 1px 0 var(--line)!important;
}
@media(hover:hover){
  .ns-tablist>.ns-tab:not(.active):hover{background:var(--surface-hover)!important;color:var(--ink)!important}
}
.ns-tablist>.ns-tab[aria-selected="true"]{font-weight:700}

.ns-record{
  position:relative;
  border-radius:var(--row-radius);
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    box-shadow var(--motion-standard) var(--ease-standard),
    transform var(--motion-micro) var(--ease-standard);
}
.ns-record[aria-current="true"],.ns-record.selected{
  background:var(--selected-bg)!important;
  box-shadow:inset -3px 0 0 var(--gold),inset 0 0 0 1px rgba(216,191,139,.22)!important;
}
.ns-record[aria-current="true"] strong,.ns-record.selected strong{color:#111b31}
.ns-record:focus-visible{z-index:1}
@media(hover:hover){
  .ns-record:not([aria-current="true"]):hover{
    background:var(--surface-hover)!important;
    box-shadow:inset -2px 0 0 rgba(184,148,85,.28);
  }
}

.ns-inspector-surface{
  border-color:#dfe3e9!important;
  background:#fff;
}
.ns-inspector-surface .inspector-head{
  background:#fff;
  transition:background-color var(--motion-standard) var(--ease-standard),border-color var(--motion-standard) var(--ease-standard);
}
.ns-inspector-surface.ns-inspector-updated .inspector-head{
  animation:ns-inspector-link var(--motion-large) var(--ease-standard);
}
@keyframes ns-inspector-link{
  0%{background:var(--soft-gold);box-shadow:inset -3px 0 0 var(--gold)}
  100%{background:#fff;box-shadow:inset -3px 0 0 transparent}
}

.ns-view-enter{
  animation:ns-view-enter var(--motion-standard) var(--ease-standard) both;
}
@keyframes ns-view-enter{
  from{opacity:.18;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.ns-status-target{
  border-radius:6px;
  transition:background-color var(--motion-standard) var(--ease-standard),color var(--motion-standard) var(--ease-standard);
}
.ns-status-target.ns-state-updated{animation:ns-state-cue 420ms var(--ease-standard)}
@keyframes ns-state-cue{
  0%{background:var(--soft-gold)}
  100%{background:transparent}
}

.ns-filter-empty{
  min-height:112px;
  margin:10px 0;
  grid-column:1/-1;
  width:100%;
}
.ns-filter-empty strong{font-size:13px}
.ns-filter-empty p{font-size:11px}

.toast{
  border:1px solid rgba(255,255,255,.08);
  border-inline-start:3px solid rgba(255,255,255,.38);
  max-width:min(440px,calc(100vw - 32px));
  line-height:1.6;
}
.toast[data-tone="success"]{border-inline-start-color:#7eb093}
.toast[data-tone="warning"]{border-inline-start-color:#d0aa5f}
.toast[data-tone="error"]{border-inline-start-color:#d67972}

.filter-row,.queue-tabs,.composer-tabs,.template-source-switch{
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar,.queue-tabs::-webkit-scrollbar,.composer-tabs::-webkit-scrollbar,.template-source-switch::-webkit-scrollbar{display:none}
.filter,.queue-tabs button,.composer-tabs button,.template-source-switch button{
  min-height:34px;
}
.filter.active,.queue-tabs button.active,.composer-tabs button.active,.template-source-switch button.active{
  box-shadow:0 1px 2px rgba(22,34,58,.06);
}

.ops-data-table>button,.coverage-list>button,.conversation-row,.attention-row,.template-row{
  padding-block:11px!important;
}
.ops-data-table strong,.coverage-list strong,.conversation-row strong,.attention-row strong,.template-row strong{
  line-height:1.5;
}
.ops-data-table small,.coverage-list small,.conversation-row small,.attention-row small,.template-row small{
  line-height:1.55;
  margin-top:3px!important;
}

dialog{
  overflow:hidden;
}
dialog form,.command-results{
  scrollbar-gutter:stable;
}
dialog .dialog-head,.command-head{
  background:#fff;
  position:sticky;
  top:0;
  z-index:2;
}
dialog .dialog-actions{
  position:sticky;
  bottom:0;
  background:#fff;
  padding-top:10px;
}
.command-dialog{transform-origin:50% 20%}

.mobile-nav-toggle[aria-expanded="true"]{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:0 10px 28px rgba(22,34,58,.18);
}
body.nav-open .mobile-nav-toggle{z-index:130}

@media(max-width:1100px){
  .ns-inspector-surface::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    border-radius:999px;
    background:var(--line2);
    margin:8px auto 0;
  }
  .ns-inspector-surface .inspector-head{
    position:sticky;
    top:0;
    z-index:3;
    background:#fff;
  }
  .ns-inspector-surface .inspector-actions{
    position:sticky;
    bottom:0;
    z-index:3;
    background:#fff;
    box-shadow:0 -8px 20px rgba(22,34,58,.05);
  }
}

@media(max-width:760px){
  .ops-data-head{display:none!important}
  .ops-data-table>button,.coverage-list>button{
    border-radius:8px;
    margin-block:2px;
    padding:12px 10px!important;
  }
  .section-head{gap:10px}
  .section-head h2{font-size:17px}
  .filter-row,.queue-tabs,.composer-tabs,.template-source-switch{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
}

@media(max-width:620px){
  dialog:not(.command-dialog){
    width:100%!important;
    max-width:none!important;
    max-height:88dvh;
    margin:auto 0 0!important;
    border-radius:18px 18px 0 0!important;
    border-bottom:0!important;
    overflow:auto;
  }
  .command-dialog{
    margin:8vh auto auto!important;
    max-height:84dvh;
    overflow:auto;
  }
  .page-intro{gap:14px}
  .compact-metrics{gap:5px}
  .compact-metrics span{padding:7px 8px}
  .inspector-facts div{grid-template-columns:minmax(78px,auto) 1fr!important}
}

@media(prefers-reduced-motion:reduce){
  .ns-inspector-surface.ns-inspector-updated .inspector-head,
  .ns-view-enter,.ns-status-target.ns-state-updated{animation:none!important}
}

@media print{
  .mobile-nav-toggle,.sidebar-backdrop,.inspector-sheet-backdrop,.inspector-mobile-close,
  .toast,.sidebar,.topbar,.ns-inspector-surface,.command-dialog{display:none!important}
  body,html{overflow:visible!important;scroll-behavior:auto!important}
  body.ui-ready main{animation:none!important;transform:none!important;opacity:1!important}
}