/* Portal-only composition; component appearance comes from the kit. */
/* Component display rules must not reveal JS-hidden controls or errors. */
[hidden] { display: none !important; }
main p { max-inline-size: 68ch; }
main section { min-inline-size: 0; }
.card-entry { min-inline-size: 0; display: grid; }
.card-entry .service-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--ya-size-space-400); color: inherit; text-decoration: none; } /* the description row (empty or not) absorbs the slack so dates align across cards */
.card-entry .ya-btn-row { align-items: center; }
.card-entry .ya-btn-row > * { display: flex; align-items: center; min-block-size: var(--ya-size-control-small); } /* date text and expiry tag: one centre line, slots the same height */
.ya-card-body > .ya-tag, .ya-stack > .ya-tag { justify-self: start; }
dialog.ya-dlg { margin: auto; border: none; color: var(--ya-color-text-default-default); max-block-size: calc(100% - var(--ya-size-space-800)); }
dialog::backdrop { background: var(--ya-color-background-utilities-scrim); }
/* Hermes Commands page (body.commands). Tokens only; --hc-bar-h is set by assets/hermes-commands.js to the sticky bar height. */
.commands .ya-stack-lg { gap: var(--ya-size-space-600); }
.commands .hc-title { display: grid; gap: var(--ya-size-space-200); }
.commands .hc-title h1, .commands .hc-title .ya-lead, .commands .hc-src { margin: 0; }
.commands main p.ya-lead, .commands main p.ya-hint { max-inline-size: none; }
.commands .hc-bar { position: sticky; inset-block-start: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ya-size-space-100) var(--ya-size-space-400); padding-block: var(--ya-size-space-100); background: var(--ya-color-background-default-default); border-block-end: var(--ya-size-stroke-border) solid var(--ya-color-border-default-default); }
.commands .hc-top { display: contents; }
.commands .hc-top .ya-tabs-list { grid-column: 1 / -1; box-shadow: none; } /* the bar/top border is the one rule */
.commands .ya-tabs-t { gap: var(--ya-size-space-200); }
.commands .hc-find, .commands .hc-plat { display: flex; align-items: center; gap: var(--ya-size-space-300); min-inline-size: 0; }
.commands .hc-find .ya-input { flex: 1 1 15rem; min-inline-size: 15rem; max-inline-size: 28rem; }
.commands .hc-find .ya-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; inline-size: var(--ya-size-space-400); block-size: var(--ya-size-space-400); cursor: pointer; background-color: var(--ya-color-icon-default-secondary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / contain no-repeat; } /* the browser's blue x, in the secondary icon tone */
.commands .hc-find .ya-hint { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.commands .hc-find .ya-hint:empty { display: none; } /* an emptied count would still leave its flex gap */
.commands .hc-plat > span { color: var(--ya-color-text-default-secondary); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
.commands .rows, .commands .glist, .commands .cs { list-style: none; margin: 0; padding: 0; }
.commands .chips { display: flex; flex-wrap: wrap; gap: var(--ya-size-space-100) var(--ya-size-space-200); margin-block-end: var(--ya-size-space-400); }
.commands .chips .ya-btn { block-size: auto; min-block-size: var(--ya-size-control-small); padding-block: var(--ya-size-space-100); white-space: normal; text-align: start; }
.commands .cnt { margin-inline-start: var(--ya-size-space-200); color: var(--ya-color-text-default-secondary); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); font-variant-numeric: tabular-nums; }
.commands [aria-selected="true"] .cnt { color: var(--ya-color-text-default-default); } /* secondary on the dark selected tab is 3.8:1 */
.commands .hc-secs { min-inline-size: 0; }
.commands .grp, .commands .grp-c { scroll-margin-block-start: calc(var(--hc-bar-h, 8rem) + var(--ya-size-space-400)); }
.commands .hc-secs > section { margin-block-end: var(--ya-size-space-600); padding: var(--ya-size-space-400); border-radius: var(--ya-size-radius-200); box-shadow: inset 0 0 0 var(--ya-size-stroke-border) var(--ya-color-border-default-default); }
.commands .hc-secs > section:last-child { margin-block-end: 0; }
.commands .rows > :last-child, .commands .cgrid > :last-child, .commands .glist > :last-child { border-block-end: 0; }
.commands .grp h2, .commands .grp-c h2 { display: flex; align-items: center; gap: var(--ya-size-space-300); margin: 0 0 var(--ya-size-space-200); font-size: var(--ya-typography-scale-04); }
.commands .row, .commands .cc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ya-size-space-100) var(--ya-size-space-300); padding-block: var(--ya-size-space-300); border-block-end: var(--ya-size-stroke-border) solid var(--ya-color-border-default-default); scroll-margin-block-start: calc(var(--hc-bar-h, 8rem) + var(--ya-size-space-400)); }
.commands .cmd { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ya-size-space-100) var(--ya-size-space-200); min-inline-size: 0; }
.commands .row > .cpy, .commands .cc > .cpy { grid-column: 2; grid-row: 1; }
.commands .bd { grid-column: 1 / -1; grid-row: 2; display: grid; gap: var(--ya-size-space-200); min-inline-size: 0; }
.commands .ds { margin: 0; }
.commands code { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; white-space: pre-wrap; font-family: var(--ya-typography-family-mono); }
.commands .nm { color: var(--ya-color-text-default-default); font-size: var(--ya-typography-scale-03); font-weight: var(--ya-typography-weight-ui); line-height: 1.4; display: inline-flex; align-items: center; min-block-size: var(--ya-size-control-small); } /* first line as tall as the copy target, so the name and icon share a centre */
.commands .args, .commands .al, .commands .als, .commands .subs code, .commands .cs code { color: var(--ya-color-text-default-secondary); font-size: var(--ya-typography-scale-02); }
.commands .args { overflow-wrap: break-word; }
.commands .args .nw { white-space: nowrap; }
/* a command line reads left to right in Arabic too; keep it right-aligned in RTL */
:root[dir="rtl"] .commands .cmd { direction: ltr; justify-content: flex-end; }
:root[dir="rtl"] .commands .cmd .plat { direction: rtl; } /* its inline-end inset must stay on the RTL side */
.commands .als { display: inline-flex; align-items: baseline; gap: var(--ya-size-space-200); }
.commands .subs, .commands .ex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ya-size-space-100) var(--ya-size-space-200); }
.commands .sl { color: var(--ya-color-text-default-secondary); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
.commands .exc { padding: var(--ya-size-space-100) var(--ya-size-space-300); border-radius: var(--ya-size-radius-200); background: var(--ya-color-background-default-secondary); color: var(--ya-color-text-default-default); font-size: var(--ya-typography-scale-02); }
.commands .cs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ya-size-space-100) var(--ya-size-space-400); padding-block: var(--ya-size-space-100); }
.commands .gch { display: grid; gap: var(--ya-size-space-100); padding-block: var(--ya-size-space-200); border-block-end: var(--ya-size-stroke-border) solid var(--ya-color-border-default-default); color: inherit; text-decoration: none; }
.commands .gch code { color: var(--ya-color-text-default-default); font-weight: var(--ya-typography-weight-ui); }
.commands .gch:focus-visible { outline: var(--ya-size-stroke-focus-ring) solid var(--ya-color-border-utilities-focus-ring); outline-offset: calc(-1 * var(--ya-size-stroke-focus-ring)); }
@media (hover: hover) { .commands .gch:hover { background: var(--ya-color-background-default-secondary); border-radius: var(--ya-size-radius-200); } }
.commands .up { justify-self: start; }
/* Row folds use the kit Accordion; the row border is the only rule, text is UI-sized. Phones fold (<=640px, kit breakpoint); above it the panel is always open and the heading is hidden. */
.commands .ya-acc, .commands .ya-acc-i { border-block: 0; }
.commands .ya-acc-b { min-block-size: var(--ya-size-control-small); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
.commands .ya-acc-c { display: grid; gap: var(--ya-size-space-200); max-inline-size: none; padding-block: var(--ya-size-space-100) 0; font: inherit; }
@media (max-width: 640px) { .commands .ya-acc-c .ex > .sl { display: none; } } /* the fold heading already says "Example" */
@media (min-width: 641px) {
  .commands .ya-acc-h { display: none; }
  .commands .ya-acc-p { grid-template-rows: 1fr; visibility: visible; transition: none; }
  .commands .ya-acc-c { padding-block: 0; }
}
@media (min-width: 768px) {
  .commands .hc-secs > section { padding: var(--ya-size-space-600); }
  .commands .row, .commands .cc { grid-template-columns: 17rem minmax(0, 1fr) auto; }
  .commands .row { position: relative; }
  .commands .row .plat { position: absolute; inset-block-start: var(--ya-size-space-300); inset-inline-end: calc(var(--ya-size-control-small) + var(--ya-size-space-300)); inline-size: var(--hc-plat-w); block-size: var(--ya-size-control-small); }
  .commands .row[data-sc="cli"] .bd, .commands .row[data-sc="gw"] .bd { padding-inline-end: calc(var(--hc-plat-w) + var(--ya-size-space-400)); }
  .commands .bd { grid-column: 2; grid-row: 1; }
  .commands .row > .cpy, .commands .cc > .cpy { grid-column: 3; }
  .commands .gch { grid-template-columns: 17rem minmax(0, 1fr); column-gap: var(--ya-size-space-300); }
}
@media (min-width: 1024px) {
  .commands .ya-tabs-panel:not([hidden]) { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--ya-size-space-800); align-items: start; }
  .commands .chips { position: sticky; inset-block-start: calc(var(--hc-bar-h, 8rem) + var(--ya-size-space-400)); flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0; max-block-size: calc(100dvh - var(--hc-bar-h, 8rem) - var(--ya-size-space-800)); overflow-y: auto; scrollbar-width: thin; }
  .commands .chips .ya-btn { justify-content: space-between; }
  .commands .hc-secs { grid-column: 2; } /* stays in the wide column when the index is hidden (nothing matches) */
}
/* phones: only tabs + filter stay pinned; platform and legend scroll away */
@media (max-width: 640px) {
  .commands .hc-bar { display: contents; }
  .commands .hc-top { display: grid; gap: var(--ya-size-space-200); position: sticky; inset-block-start: 0; z-index: 2; padding-block: var(--ya-size-space-200); background: var(--ya-color-background-default-default); border-block-end: var(--ya-size-stroke-border) solid var(--ya-color-border-default-default); }
  .commands .hc-plat { flex-wrap: wrap; }
  .commands .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } /* one scrolling line of labels instead of a five-row grid */
  .commands .chips .ya-btn { flex: none; white-space: nowrap; }
  .commands .hc-secs { display: flex; flex-direction: column; }
  .commands .hc-secs > section { padding: 0; box-shadow: none; } /* the row rules already group; no frame inside the page */
  .commands .dist { order: 1; margin-block: var(--ya-size-space-600) 0; } /* legend after the list so the first command sits on the first screen */
}
/* Public pages (home, privacy, 404): slogan under the header mark, footer row, home values. */
.site-head .slogan { margin: var(--ya-size-space-200) 0 0; color: var(--ya-color-text-default-secondary); font: var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
/* home and 404: head, main (1fr), footer fill the viewport less the kit's page padding; text pages end where their text ends */
.ya-wrap:has(.stage) { min-block-size: calc(100dvh - var(--ya-size-space-600) - var(--ya-size-space-1600)); grid-template-rows: auto 1fr auto; }
.site-foot .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ya-size-space-300) var(--ya-size-space-600); }
.site-foot .foot-row > p { margin: 0; }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: var(--ya-size-space-300) var(--ya-size-space-600); }
.site-foot .foot-links a { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ya-size-control-small); min-inline-size: var(--ya-size-control-small); } /* kit target size: 32px with a mouse, 44px on phones and touch (the token switches itself) */
.site-foot .ya-ctrls { margin-inline-start: auto; }
.foot-mark { inline-size: var(--ya-size-space-600); block-size: var(--ya-size-space-600); background-color: currentColor; -webkit-mask: url(logo/jarvis-mark-small.svg) center / contain no-repeat; mask: url(logo/jarvis-mark-small.svg) center / contain no-repeat; }
/* Home and 404 first screen: copy beside the mark, composed to fill the screen; the mark sits at the inline end (swaps in RTL), under the copy on phones. */
main:has(> .stage) { align-content: stretch; grid-template-rows: 1fr auto; gap: var(--ya-size-space-600); }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); align-items: center; gap: var(--ya-size-space-800) var(--ya-size-space-1200); }
.hero { display: grid; gap: var(--ya-size-space-400); justify-self: start; } /* in RTL the English copy sits against the inline-start edge, opposite the mark */
.hero h1 { margin: 0; max-inline-size: 18ch; }
.hero .ln { display: inline-block; }
.mark { color: var(--ya-color-icon-default-default); inline-size: max(9rem, min(100%, 30rem, 44dvh, 100dvh - var(--ya-size-space-1600) * 7 - var(--ya-size-space-600))); justify-self: center; } /* the last term is the height left under the header, values and footer: the first screen fits at 1024x768 and 1280x720 */
.mark svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.mark .mark-use { fill: currentColor; }
.mark .trail { fill: none; stroke: currentColor; stroke-width: var(--ya-size-stroke-border); vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; }
.mark .ic { opacity: 0; }
.mark.unlit { color: var(--ya-color-icon-default-secondary); } /* 404: the same mark, drawn in the secondary icon tone (not lit), not faded */
/* 404 phones: no empty values row under the stage, no kit footer margin on top of the stack gap; copy, button, mark and footer follow each other on the token gaps */
@media (max-width: 640px) { main:has(> .stage:only-child) { grid-template-rows: 1fr; } .stage:has(> .unlit) { align-content: start; padding-block-end: 0; } .stage:has(> .unlit) > .ya-stack-lg { gap: var(--ya-size-space-600); } .ya-wrap:has(.stage > .unlit) { min-block-size: 0; } .ya-wrap:has(.stage) > .site-foot { margin-block-start: 0; } }
@media (max-width: 640px) { .stage { grid-template-columns: minmax(0, 1fr); } .hero { justify-self: stretch; } .mark { inline-size: min(46%, 11rem); } }
.values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ya-size-space-200) var(--ya-size-space-600); padding-block-start: var(--ya-size-space-400); border-block-start: var(--ya-size-stroke-border) solid var(--ya-color-border-default-default); color: var(--ya-color-text-default-secondary); font-size: var(--ya-typography-scale-02); line-height: 1.4; }
.value { display: flex; gap: var(--ya-size-space-200); }
/* phones: one value per row; Arabic at scale-03 (Naskh reads small at the Latin size; on desktop it would push a 900px screen into a scroll) */
@media (max-width: 640px) { .values { flex-direction: column; } :root[dir="rtl"] :is(.values, .site-head .slogan) { font-size: var(--ya-typography-scale-03); } }
.value strong { color: var(--ya-color-text-default-default); font-weight: var(--ya-typography-weight-ui); }
/* Home opening (assets/home-intro.js): content and the hero mark wait while the opening plays; the script removes the class. */
html.intro [data-in] { opacity: 0; }
html.intro .mark.live .mark-use { opacity: 0; } /* the script lifts this inline once its pen mask is in place */
/* white = mask luminance (shows the hero mark where the pen has passed), not a colour on screen */
.intro-pen { fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; }
/* the flying icons: HTML boxes over the mark (compositor-run transform and opacity). The layer is a size container, so the script moves them in cqw (1000.5 mark units = 100cqw); each box is 90 units wide and sits centred on the layer's top-left corner. */
.mark.live { position: relative; }
.ic-fly-layer { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.ic-fly { position: absolute; left: -4.4978cqw; top: -4.4978cqw; inline-size: 8.9955cqw; aspect-ratio: 1; opacity: 0; will-change: transform, opacity; color: var(--ya-color-icon-accent-default); } /* the eight icons carry the brand accent, as the current sidebar icon (Yazeed 2026-11-05) */
.ic-fly svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Hermes Commands: availability marks use kit chart tokens in order (chart-1 everywhere, chart-2 CLI only, chart-3 Telegram/Gateway only); always beside a name, never behind text. */
.commands .sw { display: inline-block; flex: none; inline-size: var(--ya-size-space-300); block-size: var(--ya-size-space-300); border-radius: var(--ya-size-radius-100); }
.commands .sw-1, .commands .m1 { background: var(--ya-color-chart-1); fill: var(--ya-color-chart-1); }
.commands .sw-2, .commands .m2 { background: var(--ya-color-chart-2); fill: var(--ya-color-chart-2); }
.commands .sw-3, .commands .m3 { background: var(--ya-color-chart-3); fill: var(--ya-color-chart-3); }
.commands { --hc-plat-w: calc(var(--ya-size-space-1600) * 3); }
.commands .plat { display: inline-flex; align-items: center; gap: var(--ya-size-space-200); }
.commands .dist { display: grid; align-items: center; gap: var(--ya-size-space-200) var(--ya-size-space-400); margin-block-end: var(--ya-size-space-600); padding: var(--ya-size-space-400); border-radius: var(--ya-size-radius-200); box-shadow: inset 0 0 0 var(--ya-size-stroke-border) var(--ya-color-border-default-default); }
.commands .dist-h { grid-column: 1 / -1; margin: 0; color: var(--ya-color-text-default-secondary); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
.commands .dist-bar { block-size: var(--ya-size-space-200); border-radius: var(--ya-size-radius-100); overflow: hidden; }
.commands .dist-bar svg { display: block; inline-size: 100%; block-size: 100%; shape-rendering: crispEdges; }
.commands .dist-bar .sep { stroke: var(--ya-color-background-default-default); stroke-width: var(--ya-size-stroke-border-strong); } /* kit chart rule 12: a true 2px gap in the page colour at every width */
:root[dir="rtl"] .commands .dist-bar svg { scale: -1 1; }
.commands .dist-key { display: flex; flex-wrap: wrap; gap: var(--ya-size-space-200) var(--ya-size-space-600); margin: 0; padding: 0; list-style: none; }
.commands .dist-key li { display: flex; align-items: center; gap: var(--ya-size-space-200); }
.commands .dist-n { grid-column: 1 / -1; margin: 0; color: var(--ya-color-text-default-secondary); font: var(--ya-typography-weight-ui) var(--ya-typography-scale-02)/1.4 var(--ya-font-ui); }
.commands .dist-key .cnt { margin-inline-start: 0; color: var(--ya-color-text-default-default); }
@media (min-width: 768px) {
  .commands .dist { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; padding: var(--ya-size-space-600); }
  .commands .dist-bar { margin-block-start: var(--ya-size-space-200); }
}
/* one-row sticky bar on wide screens: tabs, filter + count, platform */
@media (min-width: 1200px) {
  .commands .hc-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .commands .hc-top .ya-tabs-list { grid-column: auto; }
  .commands .hc-find .ya-input { flex-basis: 12rem; min-inline-size: 0; padding-inline: var(--ya-size-space-200); font-size: var(--ya-typography-scale-02); }
}
/* phones: drop tab counts and tighten tab padding so all three tabs fit the strip */
@media (max-width: 640px) {
  .commands .ya-tabs-tab .cnt { display: none; }
  .commands .ya-tabs-tab { padding-inline: var(--ya-size-space-200); font-size: var(--ya-typography-scale-01); }
}
@media (max-height: 480px) { .commands .hc-top { position: static; } } /* phone landscape: the pinned bar would eat a quarter of the screen */
.commands bdi { white-space: nowrap; } /* keep --help, /pause off whole; one line in RTL */
p, li { text-wrap: pretty; } /* no single-word last lines in copy */