/* =============================================================================
   RAYASA — the /terminal window.

   One pane: a scrollback that holds every command and its answer, a prompt that
   stays at the bottom of it, a tool list beside it and a status line under it.
   The page around it is right-to-left; the window is not, because a terminal is
   read from the left, the commands are Latin, and the prompt belongs where the
   text starts. Persian inside it sets its own direction per element (`dir=auto`)
   and sits in the same columns.

   Colour has four jobs and no others: cyan is the person (their prompt), blue
   is the verb they chose, green/amber/red are the verdicts. Everything else is
   grey on near-black.

   Every class is `tm-*`; nothing here redefines a shared class.
   ========================================================================== */

.tm {
  --tm-bg: #05080e;
  --tm-chrome: #0a0f19;
  --tm-side: #070b13;
  --tm-hair: rgb(255 255 255 / 7%);
  --tm-text: #d6e3f5;
  --tm-soft: #a9b9cf;
  --tm-dim: #7787a0;
  --tm-user: var(--accent-400);
  --tm-verb: var(--brand-300);
  --tm-ok: var(--ok-400);
  --tm-warn: var(--warn-400);
  --tm-bad: var(--danger-400);

  display: flex;
  flex-direction: column;
  block-size: clamp(31rem, calc(100svh - 21rem), 48rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--tm-bg);
  color: var(--tm-text);
  font-family: var(--font-mono), var(--font-sans);
  font-size: 0.84375rem;
  line-height: 1.7;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgb(0 0 0 / 50%), 0 0 60px -20px rgb(30 133 230 / 28%);
  overflow: hidden;
  direction: ltr;
}

/* --- The page above it: a line of introduction, then straight to the terminal. */
.tm-intro { padding-block-end: var(--space-6); }
.tm-intro .h1 { font-size: var(--text-4xl); margin-block-end: var(--space-3); }
.tm-intro .lede { max-inline-size: 46rem; }

/* --- Title bar --------------------------------------------------------------- */
.tm-bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 2.75rem;
  padding-inline: var(--space-4);
  border-block-end: 1px solid var(--tm-hair);
  background: var(--tm-chrome);
}
.tm-lights { display: flex; align-items: center; gap: var(--space-2); }
.tm-light { display: block; inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--r-full); padding: 0; border: 0; }
.tm-light--close { background: #f87171; }
.tm-light--min { background: #fbbf24; }
.tm-light--max { background: #34d399; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.tm-light--max:hover { transform: scale(1.2); }
.tm-bar__title {
  position: absolute;
  inset-inline: 7rem;
  color: var(--tm-dim);
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tm-bar__expand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--tm-hair);
  border-radius: var(--r-full);
  color: var(--tm-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tm-bar__expand:hover { color: var(--tm-text); border-color: var(--line-brand); background: rgb(30 133 230 / 10%); }

/* --- Frame: tools | pane ---------------------------------------------------------- */
.tm-frame { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); flex: 1; min-block-size: 0; }

.tm-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-block-size: 0;
  padding: var(--space-4) var(--space-3);
  border-inline-end: 1px solid var(--tm-hair);
  background: var(--tm-side);
  overflow-y: auto;
  scrollbar-width: thin;
}
.tm-side__heading { margin: var(--space-3) var(--space-2) var(--space-1); color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 700; }
.tm-side__heading:first-child { margin-block-start: 0; }
ul.tm-side__list { display: grid; gap: 1px; }
.tm-tool {
  display: grid;
  grid-template-columns: 0.5rem 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: 0.4rem var(--space-2);
  border-radius: var(--r-sm);
  color: var(--tm-soft);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tm-tool:hover, .tm-tool:focus-visible { background: rgb(255 255 255 / 5%); color: var(--tm-text); }
.tm-tool__dot { inline-size: 0.4rem; block-size: 0.4rem; border-radius: var(--r-full); }
.tm-tool__dot--server { background: var(--brand-400); }
.tm-tool__dot--local { background: var(--tm-ok); }
.tm-tool__name { color: var(--tm-verb); font-weight: 600; }
.tm-tool__title { overflow: hidden; color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.tm-tool:hover .tm-tool__title { color: var(--tm-soft); }
.tm-side__fun { display: grid; gap: 1px; margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--tm-hair); }
.tm-side__heading--fun { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: 0; }
.tm-side__more { color: var(--tm-verb); font-weight: 600; text-decoration: none; }
.tm-side__more:hover { text-decoration: underline; }
.tm-side__sub { margin: var(--space-2) var(--space-2) 2px; color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.625rem; font-weight: 600; opacity: 0.8; }
.tm-fun { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 0.35rem var(--space-2); border-radius: var(--r-sm); color: var(--tm-soft); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tm-fun:hover, .tm-fun:focus-visible { background: rgb(255 255 255 / 5%); color: var(--tm-text); }
.tm-fun__title { overflow: hidden; font-family: var(--font-sans); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.tm-tool__dot--game { background: #f5b833; }
.tm-tool__dot--fun { background: var(--violet-400); }
.tm-chip--fun { border-color: rgb(245 184 51 / 45%); color: #f5d27a; }
.tm-side__note { display: flex; align-items: center; gap: var(--space-2); margin-block-start: auto; padding: var(--space-3) var(--space-2) 0; border-block-start: 1px solid var(--tm-hair); color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.6875rem; }

/* --- The pane -------------------------------------------------------------------------- */
.tm-main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.tm-screen {
  flex: 1;
  min-block-size: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #26334a transparent;
}
.tm-screen:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--line-accent); border-radius: 0; }
.tm-noscript { color: var(--tm-soft); font-family: var(--font-sans); }

/* --- Welcome ---------------------------------------------------------------------------- */
.tm-welcome { margin-block-end: var(--space-6); padding-block-end: var(--space-5); border-block-end: 1px dashed var(--tm-hair); }
.tm-welcome__top { display: flex; align-items: center; gap: var(--space-4); }
.tm-welcome__mark { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
.tm-welcome__title { color: var(--tm-text); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
.tm-welcome__sub { color: var(--tm-dim); font-size: 0.75rem; }
ul.tm-welcome__notes { display: grid; gap: 2px; margin-block: var(--space-4) var(--space-4); color: var(--tm-soft); font-family: var(--font-sans); font-size: 0.8125rem; }
ul.tm-welcome__notes li { display: flex; gap: var(--space-2); direction: ltr; }
.tm-welcome__bullet { color: var(--tm-user); font-family: var(--font-mono); }
.tm-welcome__try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tm-welcome__label { margin-inline-end: var(--space-1); color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.75rem; }

.tm-chip {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--tm-hair);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 3%);
  color: var(--tm-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tm-chip:hover { border-color: var(--line-brand); background: rgb(30 133 230 / 12%); color: var(--tm-text); }

/* --- A command and its answer -------------------------------------------------------- */
.tm-block {
  --rule: var(--tm-hair);
  margin-block-end: var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--rule);
}
.tm-block--running { --rule: var(--brand-400); }
.tm-block--queued { --rule: var(--tm-hair); }
.tm-block--ok { --rule: rgb(52 211 153 / 55%); }
.tm-block--warn { --rule: rgb(251 191 36 / 70%); }
.tm-block--bad, .tm-block--error { --rule: rgb(248 113 113 / 75%); }
.tm-block--system { --rule: var(--tm-hair); }
.tm-block--info { --rule: var(--line-brand); }

.tm-block__head { display: flex; align-items: center; gap: var(--space-3); min-block-size: 1.75rem; }
.tm-block__mark { flex: none; color: var(--tm-ok); font-weight: 700; }
.tm-cmd { min-inline-size: 0; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); }
.tm-cmd__verb { color: var(--tm-verb); font-weight: 700; }
.tm-cmd__verb--unknown { color: var(--tm-bad); }
.tm-cmd__arg { color: var(--tm-text); }
.tm-block__meta { display: inline-flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; flex: none; }
.tm-block__actions { display: inline-flex; align-items: center; gap: 2px; flex: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.tm-block:hover .tm-block__actions, .tm-block:focus-within .tm-block__actions { opacity: 1; }
.tm-block__actions:empty { display: none; }

.tm-act {
  display: grid;
  place-items: center;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: var(--r-xs);
  color: var(--tm-dim);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tm-act:hover { background: rgb(255 255 255 / 7%); color: var(--tm-text); }
.tm-act.is-done { color: var(--tm-ok); }
.tm-act svg { transition: transform var(--dur-base) var(--ease-out); }
.tm-block.is-folded .tm-act--fold svg { transform: rotate(-90deg); }
.tm-block.is-folded .tm-body-out { display: none; }

.tm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--tm-hair);
  border-radius: var(--r-full);
  color: var(--tm-soft);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6rem;
  white-space: nowrap;
}
.tm-pill--ok { border-color: rgb(52 211 153 / 35%); background: rgb(52 211 153 / 10%); color: var(--tm-ok); }
.tm-pill--warn { border-color: rgb(251 191 36 / 38%); background: rgb(251 191 36 / 10%); color: var(--tm-warn); }
.tm-pill--bad { border-color: rgb(248 113 113 / 40%); background: rgb(248 113 113 / 10%); color: var(--tm-bad); }
.tm-pill--running { border-color: var(--line-brand); background: rgb(30 133 230 / 12%); color: var(--brand-300); }
.tm-pill--queued { color: var(--tm-dim); border-style: dashed; }
.tm-time { color: var(--tm-dim); font-size: 0.6875rem; font-variant-numeric: tabular-nums; min-inline-size: 3.2em; text-align: end; }
.tm-spin { inline-size: 0.7rem; block-size: 0.7rem; border: 2px solid currentcolor; border-inline-end-color: transparent; border-radius: var(--r-full); animation: tm-spin 700ms linear infinite; }
.tm-block--queued .tm-spin { animation: none; opacity: .5; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-body-out { margin-block-start: var(--space-2); }
.tm-line { margin: 0; text-align: left; }
.tm-line--dim { color: var(--tm-dim); font-family: var(--font-sans); }
.tm-line--error { color: #fda4a4; font-family: var(--font-sans); }
.tm-abandoned { display: flex; gap: var(--space-3); margin-block-end: var(--space-3); color: var(--tm-dim); }

/* --- Results ------------------------------------------------------------------------------- */
.tm-section { margin-block-end: var(--space-4); }
.tm-section:last-child { margin-block-end: 0; }
.tm-section__title { margin: 0 0 var(--space-2); text-align: left; color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; }
.tm-section__title::before { content: '# '; font-family: var(--font-mono); opacity: .7; }

.tm-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px var(--space-6); margin: 0; }
/* Left-aligned in both columns, whatever the script: a report reads down a
   column, and a Persian label right-aligned beside a Latin one would not. */
.tm-kv__label { display: flex; align-items: baseline; gap: var(--space-2); color: var(--tm-soft); font-family: var(--font-sans); font-size: 0.8125rem; text-align: left; }
.tm-kv__value { display: grid; gap: 1px; min-inline-size: 0; margin: 0; }
.tm-kv__text { color: var(--tm-text); overflow-wrap: anywhere; text-align: left; }
.tm-kv__note { color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.6; text-align: left; }

/* Colour is never the only signal: each verdict carries a glyph as well. */
.tm-glyph { flex: none; inline-size: 1em; font-family: var(--font-mono); font-weight: 700; text-align: center; }
.tm-glyph--good { color: var(--tm-ok); }
.tm-glyph--warn { color: var(--tm-warn); }
.tm-glyph--bad { color: var(--tm-bad); }
.tm-glyph--info { color: var(--tm-dim); }

.tm-scroll { overflow-x: auto; scrollbar-width: thin; }
.tm-table { inline-size: auto; max-inline-size: 100%; border-collapse: collapse; }
.tm-table td { padding: 2px var(--space-6) 2px 0; text-align: left; border-block-end: 1px solid var(--tm-hair); vertical-align: top; }
.tm-table tr:last-child td { border-block-end: 0; }
.tm-table__cell { color: var(--tm-soft); font-family: var(--font-sans); font-size: 0.8125rem; white-space: nowrap; }
.tm-table__payload { color: var(--tm-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tm-table__cmd { white-space: nowrap; }
.tm-table__where { color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.75rem; white-space: nowrap; }
ol.tm-history { display: grid; gap: 1px; margin: 0; }

.tm-link { padding: 0; color: var(--tm-verb); font: inherit; text-align: start; text-decoration: underline; text-decoration-color: rgb(89 167 240 / 35%); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
.tm-link:hover { color: var(--brand-200); text-decoration-color: currentcolor; }
.tm-chip.tm-link { text-decoration: none; }

/* --- Prompt ---------------------------------------------------------------------------------- */
.tm-chips { display: none; }
.tm-prompt {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem var(--space-4) 0.55rem var(--space-5);
  border-block-start: 1px solid var(--tm-hair);
  background: var(--tm-chrome);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* The field has no outline of its own; the whole prompt row lights up instead,
   which is a larger and clearer indicator than a ring around a bare input. */
.tm-prompt:focus-within { background: rgb(30 133 230 / 7%); box-shadow: inset 0 2px 0 var(--brand-400); }
.tm-prompt__label { flex: none; font-weight: 700; white-space: nowrap; }
.tm-prompt__user { color: var(--tm-user); }
.tm-prompt__mark { color: var(--tm-ok); }
.tm-field { position: relative; flex: 1; min-inline-size: 0; }
.tm-ghost, .tm-command {
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: 0;
  line-height: 2rem;
  white-space: pre;
}
.tm-ghost { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: transparent; direction: ltr; }
.tm-ghost__typed { visibility: hidden; }
.tm-ghost__rest { color: var(--tm-dim); opacity: .6; }
.tm-command {
  position: relative;
  display: block;
  background: transparent;
  color: var(--tm-text);
  caret-color: var(--tm-user);
  caret-shape: block;
  outline: none;
}
.tm-command:focus-visible { outline: none; }
.tm-command::placeholder { color: var(--tm-dim); opacity: .55; }
.tm-run {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border: 1px solid var(--line-brand);
  border-radius: var(--r-md);
  background: rgb(30 133 230 / 14%);
  color: var(--brand-200);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tm-run:hover { background: var(--brand-500); color: #fff; }

ul.tm-suggest {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: var(--space-4);
  z-index: 3;
  inline-size: min(30rem, calc(100% - 2rem));
  max-block-size: 15rem;
  padding: var(--space-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}
.tm-suggest__item { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 0.35rem var(--space-3); border-radius: var(--r-sm); color: var(--tm-soft); cursor: pointer; }
.tm-suggest__item:hover, .tm-suggest__item.is-selected { background: rgb(30 133 230 / 20%); color: var(--tm-text); }
.tm-suggest__name { color: var(--tm-verb); font-weight: 700; }
.tm-suggest__title { overflow: hidden; font-family: var(--font-sans); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.tm-suggest__where { color: var(--tm-dim); font-family: var(--font-sans); font-size: 0.6875rem; }

/* --- Status bar ---------------------------------------------------------------------------- */
.tm-status {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-5);
  min-block-size: 1.875rem;
  padding-inline: var(--space-4);
  border-block-start: 1px solid var(--tm-hair);
  background: var(--tm-side);
  color: var(--tm-dim);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
}
.tm-status__item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.tm-status__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--r-full); background: var(--tm-ok); box-shadow: 0 0 0 3px rgb(52 211 153 / 18%); }
.tm[data-state='busy'] .tm-status__dot { background: var(--tm-warn); box-shadow: 0 0 0 3px rgb(251 191 36 / 20%); animation: tm-pulse 1.1s ease-in-out infinite; }
@keyframes tm-pulse { 50% { opacity: .4; } }
.tm-status__keys { display: inline-flex; align-items: center; gap: var(--space-5); margin-inline-start: auto; }
.tm kbd {
  min-inline-size: 1.4em;
  padding: 0 0.35rem;
  border: 1px solid var(--tm-hair);
  border-radius: 4px;
  background: #0d1420;
  color: var(--tm-soft);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  text-align: center;
}
.tm-status__item kbd + kbd { margin-inline-start: -0.25rem; }

/* --- Taking the screen ------------------------------------------------------------------- */
.tm--maximized {
  position: fixed;
  inset: var(--space-4);
  z-index: 130;
  block-size: auto;
  border-color: var(--line-brand);
  box-shadow: var(--shadow-lg), var(--glow-brand);
}
@media (min-width: 48rem) { .tm--maximized { inset: var(--space-8); } }

/* Dim the page behind. On <html>, so there is one class to toggle and nothing
   injected to clean up. */
.is-tm-maximized::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 125;
  background: rgb(2 4 8 / 82%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- Phones ------------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .tm { block-size: min(80svh, 42rem); font-size: 0.8125rem; border-radius: var(--r-lg); }
  .tm-frame { grid-template-columns: minmax(0, 1fr); }
  .tm-side { display: none; }
  .tm-bar__title { inset-inline: 5.5rem 6.5rem; }
  .tm-bar__expand span { display: none; }
  .tm-bar__expand { padding: 0.3rem 0.5rem; }
  .tm-screen { padding: var(--space-4) var(--space-4) var(--space-3); }
  .tm-block { padding-inline-start: var(--space-3); }
  .tm-block__head { flex-wrap: wrap; row-gap: 2px; }
  .tm-block__actions { opacity: 1; }
  .tm-chips { display: flex; flex: none; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--tm-hair); overflow-x: auto; scrollbar-width: none; }
  .tm-chips::-webkit-scrollbar { display: none; }
  .tm-prompt { padding-inline: var(--space-4) var(--space-3); }
  /* 16px stops iOS zooming the page when the field is focused. */
  .tm-command, .tm-ghost { font-size: 1rem; }
  .tm-status__keys { display: none; }
  .tm-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tm-kv__label { justify-content: flex-start; margin-block-start: var(--space-2); }
  .tm-kv__label:first-child { margin-block-start: 0; }
  ul.tm-suggest { inset-inline: var(--space-3); inline-size: auto; }
}

@media (hover: none) { .tm-block__actions { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tm-spin, .tm[data-state='busy'] .tm-status__dot { animation: none; }
  .tm-light--max:hover { transform: none; }
}