/* ==========================================================================
   Joy.services — panel extensions
   Additive only. Every value here derives from tokens already present in
   new.css (#0f62fe primary, #161616 ink, #f4f4f4 surface, .375/.5rem radii,
   0.8rem base type). Nothing in new.css is overridden or replaced.
   ========================================================================== */

:root {
  --joy-rail-w: 216px;
  --joy-topbar-h: 4rem;
  --joy-line: rgba(46, 46, 46, .1);
  --joy-surface: #ffffff;
  --joy-surface-2: #f4f4f4;
  --joy-ink: #161616;
  --joy-ink-2: #525252;
  --joy-radius: .375rem;
  --joy-radius-lg: .5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --joy-line: #2e2e2e;
    --joy-surface: #141414;
    --joy-surface-2: #0a0a0a;
    --joy-ink: rgba(255,255,255,.88);
    --joy-ink-2: #969696;
  }
}

/* --- accessibility -------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.joy-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cds-color-primary); color: #fff; padding: .75rem 1rem;
}
.joy-skip:focus { left: .5rem; top: .5rem; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cds-color-primary);
  outline-offset: 2px;
}

/* --- shell ---------------------------------------------------------------- */
.joy-topbar { position: sticky; top: 0; z-index: 40; }
.joy-shell { display: flex; min-height: calc(100vh - var(--joy-topbar-h)); align-items: stretch; }
.joy-main { flex: 1 1 auto; min-width: 0; }

.joy-mark {
  display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: .3rem;
  background: linear-gradient(145deg, var(--cds-color-primary), var(--joy-accent));
}
.joy-mark--lg { width: 2.5rem; height: 2.5rem; border-radius: .6rem; display: block; }

.joy-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: var(--cds-color-primary); color: #fff;
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
}

/* --- left rail ------------------------------------------------------------ */
.joy-rail { width: var(--joy-rail-w); flex: 0 0 var(--joy-rail-w); padding: .75rem 0; }
.joy-rail-list { display: flex; flex-direction: column; gap: 1px; }
.joy-rail-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .875rem; font-size: .8rem; color: var(--joy-ink-2);
  border-left: 3px solid transparent; transition: background-color .12s ease, color .12s ease;
}
.joy-rail-item:hover { background: var(--joy-surface-2); color: var(--joy-ink); }
.joy-rail-item.is-active {
  background: var(--joy-surface-2); color: var(--cds-color-primary);
  border-left-color: var(--cds-color-primary); font-weight: 600;
}
.joy-rail-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.joy-rail-item svg:hover { transform: none; filter: none; }

@media (max-width: 1079px) {
  .joy-rail {
    position: fixed; inset: var(--joy-topbar-h) auto 0 0; z-index: 45;
    transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto;
  }
  .joy-rail.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.2); }
}

/* --- search / command palette --------------------------------------------- */
.joy-search { padding: .5rem .75rem .5rem 2rem; font-size: .8rem; }
.joy-search-icon {
  position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
  color: var(--joy-ink-2); pointer-events: none;
}
.joy-search-icon:hover { transform: translateY(-50%); filter: none; }
.joy-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  max-height: 22rem; overflow-y: auto; padding: .25rem;
}
.joy-search-result {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  padding: .5rem .625rem; border-radius: var(--joy-radius); text-align: left;
}
.joy-search-result:hover,
.joy-search-result.is-cursor { background: var(--joy-surface-2); }
.joy-search-result .r-title { font-size: .8rem; font-weight: 600; }
.joy-search-result .r-cat { font-size: .7rem; color: var(--joy-ink-2); margin-left: auto; }
.joy-search-empty { padding: .75rem; font-size: .775rem; color: var(--joy-ink-2); }

/* --- page ----------------------------------------------------------------- */
.joy-page { padding: 1.25rem 1rem 2rem; max-width: 80rem; margin: 0 auto; }
@media (min-width: 768px) { .joy-page { padding: 1.5rem 1.5rem 3rem; } }

.joy-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.joy-breadcrumb { display: flex; align-items: center; gap: .375rem; }
.joy-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.joy-section-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--joy-ink-2); }

.joy-status {
  display: inline-block; padding: .25rem .625rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.joy-status--active { background: rgba(4,218,141,.14); color: #04835a; }
.joy-status--suspended { background: rgba(239,68,68,.12); color: #c02626; }
.joy-status--provisioning { background: rgba(15,98,254,.12); color: var(--cds-color-primary); }
.joy-status--failed { background: rgba(218,30,40,.14); color: #da1e28; }

/* --- usage meters --------------------------------------------------------- */
.joy-usage { display: grid; gap: .75rem; grid-template-columns: repeat(1, minmax(0,1fr)); margin-top: 1.25rem; }
@media (min-width: 640px) { .joy-usage { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.joy-meter { height: 6px; border-radius: 9999px; background: var(--joy-surface-2); overflow: hidden; }
.joy-meter-fill { display: block; height: 100%; background: var(--cds-color-primary); transition: width .4s ease; }
.joy-meter-fill.is-warn { background: #f1a208; }
.joy-meter-fill.is-critical { background: #da1e28; }

/* --- feature cards -------------------------------------------------------- */
.joy-cards {
  display: grid; gap: .75rem; margin-top: .75rem;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 560px)  { .joy-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px)  { .joy-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .joy-cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.joy-cards[data-empty]:empty::before {
  content: attr(data-empty); grid-column: 1/-1;
  padding: 1rem; font-size: .775rem; color: var(--joy-ink-2);
  border: 1px dashed var(--joy-line); border-radius: var(--joy-radius-lg);
}

.joy-card { display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.joy-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); }
.joy-card.is-pending { opacity: .55; }
.joy-card.is-pending:hover { transform: none; }

.joy-card-link { display: flex; gap: .75rem; padding: .875rem; flex: 1 1 auto; align-items: flex-start; }
.joy-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: var(--joy-radius);
  background: rgba(15,98,254,.08); color: var(--cds-color-primary);
}
.joy-card-icon svg:hover { transform: none; filter: none; }
.joy-card-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.joy-card-title { font-size: .8rem; font-weight: 600; }
.joy-card-desc { font-size: .725rem; line-height: 1.35; color: var(--joy-ink-2); }

.joy-card-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem; border-top: 1px solid var(--joy-line);
}
.joy-card-action { font-size: .725rem; font-weight: 600; color: var(--cds-color-primary); }
.joy-card-action:hover { text-decoration: underline; }
.joy-card-soon { font-size: .7rem; color: var(--joy-ink-2); }
.joy-kbd {
  margin-left: auto; font-size: .65rem; padding: .1rem .35rem;
  border: 1px solid var(--joy-line); border-radius: .25rem; color: var(--joy-ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.joy-pin { padding: .2rem; border-radius: .25rem; color: #b4b4b4; line-height: 0; }
.joy-pin:hover { color: #f1a208; background: var(--joy-surface-2); }
.joy-pin[aria-pressed="true"] { color: #f1a208; }
.joy-pin svg { width: 14px; height: 14px; }
.joy-pin svg:hover { transform: none; filter: none; }
.joy-pin[aria-pressed="true"] svg { fill: currentColor; }

/* --- activity list -------------------------------------------------------- */
.joy-activity-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .625rem .875rem;
}
.joy-activity-row:last-child { border-bottom: none; }

/* --- auth screens --------------------------------------------------------- */
.joy-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem 1rem; }
.joy-auth-card { width: 100%; max-width: 25rem; padding: 2rem; }

.joy-field { margin-bottom: .875rem; }
.joy-field label { display: block; font-size: .725rem; font-weight: 600; margin-bottom: .3rem; }
.joy-field input, .joy-field select, .joy-field textarea {
  padding: .625rem .75rem; font-size: .8rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.joy-field input:focus { border-color: var(--cds-color-primary); }
.joy-otp { letter-spacing: .35em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

.joy-password { position: relative; }
.joy-reveal {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .7rem; font-weight: 600; color: var(--cds-color-primary); padding: .25rem .375rem;
}
.joy-check { display: flex; align-items: center; gap: .5rem; font-size: .75rem; margin-top: .25rem; }

.joy-alert { padding: .75rem .875rem; border-radius: var(--joy-radius); font-size: .75rem; margin-bottom: 1rem; }
.joy-alert--error { background: rgba(218,30,40,.08); border: 1px solid rgba(218,30,40,.25); color: #a2191f; }
.joy-alert--success { background: rgba(4,218,141,.1); border: 1px solid rgba(4,218,141,.3); color: #04835a; }
.joy-alert ul { display: flex; flex-direction: column; gap: .25rem; }

/* --- misc ----------------------------------------------------------------- */
.joy-footer { border-top: 1px solid var(--joy-line); }

@media print {
  .joy-topbar, .joy-rail, .joy-footer, .joy-pin { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- tables & code blocks -------------------------------------------------- */
.joy-table { border-collapse: collapse; }
.joy-table th, .joy-table td { padding: .625rem .875rem; text-align: left; border-bottom: 1px solid var(--joy-line); }
.joy-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--joy-ink-2); font-weight: 600; }
.joy-table tbody tr:last-child td { border-bottom: none; }
.joy-table tbody tr:hover { background: var(--joy-surface-2); }
.ml-2 { margin-left: .5rem; }

.joy-codes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
@media (min-width: 640px) { .joy-codes { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.joy-codes code, .joy-secret code {
  display: block; padding: .5rem; text-align: center; font-size: .75rem;
  background: var(--joy-surface-2); border-radius: var(--joy-radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em;
}
.joy-secret code { display: inline-block; padding: .5rem .75rem; }
.joy-break { word-break: break-all; }
.joy-form-card { max-width: 48rem; }