/* Agentic Links — CSS mirror of the React primitives, for the dependency-free
 * server templates. Same tokens, same states; class names match component names.
 * This file is inlined into each surface HTML (no network requests allowed). */

/* Theme swaps: a declared transition on a property fed by a custom property
   does not restart when that property changes, so the resolved colour goes
   stale. Suppress transitions for exactly one frame around the swap — see
   setTheme() in the dashboards and ThemePicker.prompt.md. */
html[data-theming] *,html[data-theming] *::before,html[data-theming] *::after{transition:none!important}

/* Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--control-h);padding:0 var(--s-5);background-color:transparent;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-1);font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);cursor:pointer;text-decoration:none;transition:transform var(--dur-1) var(--ease)}
.btn:hover{background-color:var(--ground-2);border-color:var(--ink);text-decoration:none}
.btn:active{transform:var(--press)}
.btn--primary{background-color:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background-color:var(--accent-press);border-color:var(--accent-press);color:var(--on-accent)}
.btn--ghost{border-color:transparent;color:var(--ink-3)}
.btn--ghost:hover{color:var(--ink)}
.btn--danger{border-color:var(--al-danger);color:var(--al-danger)}
.btn--danger:hover{background-color:color-mix(in oklab,var(--al-danger) 14%,transparent);border-color:var(--al-danger)}
.btn--sm{height:var(--control-h-sm);padding:0 var(--s-3);font-size:var(--type-mono-sm)}
.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-sm);height:var(--control-h-sm);padding:0;background-color:transparent;border:1px solid var(--line);border-radius:var(--radius-1);color:var(--ink-3);font-family:var(--font-mono);font-size:13px;line-height:1;cursor:pointer;transition:transform var(--dur-1) var(--ease)}
.iconbtn:hover{background-color:var(--ground-2);border-color:var(--ink);color:var(--ink)}
.iconbtn:active{transform:var(--press)}
.iconbtn[disabled]{opacity:.35;cursor:not-allowed}
.iconbtn--danger:hover{border-color:var(--al-danger);color:var(--al-danger)}

/* Cards, banners, badges ------------------------------------------------- */
.card{background:var(--ground-2);border:var(--border);border-radius:var(--radius-2);overflow:hidden}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:38px;padding:0 var(--s-4);border-bottom:var(--border)}
.card__body{padding:var(--s-5)}
.badge{display:inline-flex;align-items:center;gap:var(--s-2);height:22px;padding:0 var(--s-2);border:var(--border);border-radius:var(--radius-1);font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.badge__mark{width:6px;height:6px;background-color:currentColor}
.badge--live{color:var(--ink);border-color:var(--line-strong)}
.badge--live .badge__mark{background-color:var(--al-live)}
.badge--paused{color:var(--ink);border-color:color-mix(in oklab,var(--al-paused) 45%,var(--line))}
.badge--paused .badge__mark{background-color:var(--al-paused)}
.badge--accent{color:var(--accent);border-color:var(--accent)}
.banner{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);background:var(--ground-2);border:var(--border);border-radius:var(--radius-2)}
.banner__mark{width:8px;height:8px;margin-top:6px;flex:0 0 auto;background-color:var(--ink-3)}
.banner--paused .banner__mark{background-color:var(--al-paused)}
.banner__label{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink);margin-bottom:var(--s-2)}
.banner__body{color:var(--ink-2);font-size:var(--type-body-sm)}

/* Forms ------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.field label,.label{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.field__hint{font-size:var(--type-body-sm);color:var(--ink-3)}
.field__count{font-family:var(--font-mono);font-size:var(--type-mono-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.control{display:flex;align-items:stretch;height:var(--control-h);background:var(--ground-2);border:var(--border);border-radius:var(--radius-1);transition:none}
.control:focus-within{border-color:var(--focus);box-shadow:var(--focus-ring-tight)}
.control__prefix{display:inline-flex;align-items:center;padding-left:var(--s-3);font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-mono);color:var(--ink-3)}
.control input,.control select{flex:1;min-width:0;appearance:none;background:transparent;border:0;outline:none;padding:0 var(--s-3);color:var(--ink);font-family:var(--font-grotesk);font-size:var(--type-body);letter-spacing:var(--tracking-body)}
.control__prefix+input{padding-left:2px}
.control--mono input,.control--mono select,input.mono{font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-mono)}
.control select{padding-right:var(--s-7);font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-mono);cursor:pointer}
.control--select{position:relative}
.control--select::after{content:"\25be";position:absolute;right:var(--s-3);top:0;height:100%;display:flex;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);pointer-events:none}
textarea{width:100%;resize:vertical;appearance:none;background:var(--ground-2);border:var(--border);border-radius:var(--radius-1);outline:none;padding:var(--s-3);color:var(--ink);font-family:var(--font-grotesk);font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);transition:none}
textarea:focus{border-color:var(--focus);box-shadow:var(--focus-ring-tight)}
[data-disabled] .control,[data-disabled] textarea,.control input:disabled,textarea:disabled{background:var(--ground-3)}
[data-disabled]{opacity:.55}
.switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer}
.switch input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.switch__track{position:relative;width:40px;height:24px;flex:0 0 auto;background-color:var(--ground-3);border:1px solid var(--line-strong);border-radius:var(--radius-1);transition:none}
.switch__knob{position:absolute;top:3px;left:3px;width:14px;height:16px;background-color:var(--ink-3);transition:left var(--dur-2) var(--ease)}
.switch input:checked+.switch__track{background-color:var(--accent);border-color:var(--accent)}
.switch input:checked+.switch__track .switch__knob{left:21px;background-color:var(--on-accent)}
.switch input:focus-visible+.switch__track{box-shadow:var(--focus-ring)}
.switch__label{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3)}
.switch input:checked~.switch__label{color:var(--ink)}
.copyfield{display:flex;flex-direction:column;gap:var(--s-2)}
.copyfield__row{display:flex;align-items:center;height:var(--control-h);background:var(--ground-2);border:var(--border);border-radius:var(--radius-1)}
.copyfield__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--s-3);font-family:var(--font-mono);font-size:var(--type-mono);letter-spacing:var(--tracking-mono);color:var(--ink)}
.copyfield__btn{align-self:stretch;display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3);background-color:transparent;border:0;border-left:var(--border);color:var(--ink);cursor:pointer;font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase}
.copyfield__btn:hover{background-color:var(--ground-3)}
.copyfield__label[data-copied="1"]{color:var(--accent)}

/* Profile ---------------------------------------------------------------- */
.avatar{display:grid;place-items:center;background:var(--ground-2);border:var(--border-strong);border-radius:var(--radius-2);overflow:hidden}
.avatar span{font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.linkcard{display:flex;align-items:center;gap:var(--s-4);width:100%;min-height:68px;padding:var(--s-4);text-align:left;text-decoration:none;background-color:var(--ground-2);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-2);cursor:pointer;transition:transform var(--dur-2) var(--ease)}
.linkcard:hover{border-color:var(--ink);box-shadow:var(--lift);transform:translate(-2px,-2px);text-decoration:none}
.linkcard:active{box-shadow:none;transform:translate(0,0)}
.linkcard__title{font-size:var(--type-body-lg);font-weight:var(--weight-medium);letter-spacing:-.012em}
.linkcard__host{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-mono);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkcard__glyph{font-family:var(--font-mono);font-size:15px;color:var(--ink-3);transition:none}
.linkcard:hover .linkcard__glyph{color:var(--accent)}
.linkcard--hidden{opacity:.5}
.statrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-bottom:var(--border)}
.statrow__value{font-family:var(--font-mono);font-size:var(--type-mono-lg);font-variant-numeric:var(--numeric);letter-spacing:-.01em}
.statrow__bar{grid-column:1/-1;height:8px;border:var(--border);border-radius:1px;padding:1px}
.statrow__bar>span{display:block;height:100%;background-color:var(--accent)}

/* Layout shells ---------------------------------------------------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:60px;padding:0 var(--s-5);border-bottom:var(--border)}
.nav{display:flex;align-items:center;gap:var(--s-5)}
.nav a{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.wordmark{font-family:var(--font-grotesk);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--ink)}
.wordmark i{font-style:normal;color:var(--accent);padding:0 .06em}
.shell{max-width:var(--measure-app);margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-9)}
.tabs{display:flex;gap:var(--s-5);border-bottom:var(--border)}
.tabs button{appearance:none;background:none;border:0;padding:0 0 var(--s-3);margin-bottom:-1px;cursor:pointer;font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3);border-bottom:2px solid transparent;transition:none}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* Theme picker (3-up tiles) --------------------------------------------- */
.themepick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.tile{display:flex;flex-direction:column;gap:var(--s-2);cursor:pointer}
.tile input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.tile__swatch{position:relative;height:58px;padding:var(--s-2);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;background-color:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius-1);transition:transform var(--dur-1) var(--ease)}
.tile:hover .tile__swatch{border-color:var(--ink)}
.tile input:checked+.tile__swatch{border-color:var(--ink);box-shadow:2px 2px 0 0 var(--ink);transform:translate(-1px,-1px)}
.tile input:focus-visible+.tile__swatch{box-shadow:var(--focus-ring)}
.tile__bar{display:block;height:5px;width:72%;background-color:var(--ink)}
.tile__bar--short{width:46%;background-color:var(--ink-3)}
.tile__dot{position:absolute;top:var(--s-2);right:var(--s-2);width:12px;height:12px;background-color:var(--accent)}
.tile__name{font-family:var(--font-mono);font-size:var(--type-mono-sm);letter-spacing:var(--tracking-mono);color:var(--ink-3);border-bottom:2px solid transparent;padding-bottom:2px}
.tile input:checked~.tile__name{color:var(--ink);border-bottom-color:var(--accent)}
[data-disabled] .tile{cursor:not-allowed}

/* Mobile ------------------------------------------------------------------
 * Phone-first is the rule for the public page; the operator surfaces are
 * desktop-first and reflow here. Nothing becomes fixed or sticky: the topbar
 * splits into a brand row and a scrollable nav row, and every target stays
 * at least 44px. */
@media (max-width:640px){
  .topbar{height:auto;flex-wrap:wrap;align-items:center;padding:var(--s-3) var(--s-4);row-gap:var(--s-3)}
  .topbar .wordmark{order:1}
  .topbar__right{order:2;margin-left:auto;gap:var(--s-3)}
  .topbar__right .al-mono{display:none}
  .topbar .nav{order:3;flex:1 0 100%;gap:var(--s-5);overflow-x:auto;scrollbar-width:none;border-top:var(--border);padding-top:var(--s-2);margin-bottom:calc(var(--s-3)*-1)}
  .topbar .nav::-webkit-scrollbar{display:none}
  .topbar .nav a{padding:var(--s-3) 0;white-space:nowrap}
  .shell{padding:var(--s-5) var(--s-4) var(--s-8);gap:var(--s-5)}
  .tabs{gap:var(--s-4);overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;padding-bottom:var(--s-3)}
  .banner{flex-wrap:wrap}
  .banner .btn{width:100%}
  .card__body{padding:var(--s-4)}
  .copyfield__value{font-size:var(--type-mono-sm)}
  .statrow{padding:var(--s-3) 0}
  .linkcard{padding:var(--s-4) var(--s-3)}
  /* hover lift is a pointer affordance; on touch it only ever fires as a stuck state */
  .linkcard:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
  .linkcard:active{border-color:var(--ink);transform:var(--press)}
}
@media (hover:none){
  .linkcard:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
  .linkcard:active{border-color:var(--ink);transform:var(--press)}
  .btn:hover{background:transparent;border-color:var(--line-strong)}
  .btn--primary:hover{background:var(--accent);border-color:var(--accent)}
}