/* ==========================================================================
   HASSAN MAUJUD — demo chrome
   Loaded only by the pages under /demos/. The site's design system is in
   style.css; this adds the parts a working application needs and the portfolio
   does not: dense controls, a console, a board, tool panels.
   ========================================================================== */

/* ------------------------------------------------------------ page head --- */

.demo-head {
  padding-block: calc(var(--nav-h) + 3.5rem) 1rem;
}
.demo-head h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin-bottom: .4rem;
}
.demo-head .lede { max-width: 44rem; }

.demo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.6rem;
}
.demo-meta span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .3rem .75rem;
  background: var(--surface);
}

/* ---------------------------------------------------------------- shell --- */

/* The frame every demo sits inside. A titled panel reads as an application
   rather than as more page, which is the whole point of these. */
.shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin-block: 1.5rem;
}
.shell__bar {
  display: flex;
  flex-wrap: wrap;          /* or the last button is clipped by .shell at 320px */
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.shell__bar .spacer { margin-left: auto; }
.shell__body { padding: clamp(1rem, 2.5vw, 1.6rem); }
.shell__body--flush { padding: 0; }

.dots { display: flex; gap: .34rem; }
.dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-2);
  display: block;
}

/* --------------------------------------------------------------- fields --- */

.row-fields {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
}
.fld { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fld--grow { flex: 1 1 12rem; }
.fld label {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.fld input,
.fld select,
.fld textarea {
  font: inherit;
  font-size: .9rem;
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .55rem .7rem;
  width: 100%;
  min-width: 0;
  transition: border-color var(--t-quick), background var(--t-quick);
}
.fld textarea { font-size: .86rem; line-height: 1.6; resize: vertical; min-height: 6rem; }
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }

.btn-sm {
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: .55rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-quick), background var(--t-quick), transform var(--t-fast) var(--e-out);
}
.btn-sm:hover { border-color: var(--muted); background: var(--surface); }
.btn-sm:active { transform: scale(.97); }
.btn-sm[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm--go {
  background: var(--grad);
  border-color: transparent;
  color: #08080b;
  font-weight: 600;
}
.btn-sm--danger:hover { border-color: #e06a5a; color: #e88b7d; }

.hint-line {
  font-size: .82rem;
  color: var(--muted);
  margin: .8rem 0 0;
}
.hint-line code {
  font-size: .8em;
}

/* --------------------------------------------------------------- output --- */

pre.out {
  margin: 0;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text);
  overflow: auto;
  max-height: 30rem;
  white-space: pre;
  tab-size: 2;
}
pre.out[data-empty="1"] { color: var(--faint); }

/* Token colours for the JSON pretty-printer. */
.j-key  { color: var(--accent-2); }
.j-str  { color: #b9e6a7; }
.j-num  { color: #f0c674; }
.j-bool { color: #c9a5f0; }
.j-null { color: var(--faint); }
html[data-theme="light"] .j-str  { color: #2f6f2a; }
html[data-theme="light"] .j-num  { color: #8a5a00; }
html[data-theme="light"] .j-bool { color: #6b3fa0; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  border-radius: 99px;
  padding: .24rem .6rem;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.status-pill[data-tone="ok"]    { color: #6ee7b7; border-color: #6ee7b755; }
.status-pill[data-tone="warn"]  { color: #f0c674; border-color: #f0c67455; }
.status-pill[data-tone="err"]   { color: #f0907f; border-color: #f0907f55; }
html[data-theme="light"] .status-pill[data-tone="ok"]   { color: #17694a; }
html[data-theme="light"] .status-pill[data-tone="warn"] { color: #8a5a00; }
html[data-theme="light"] .status-pill[data-tone="err"]  { color: #a3372a; }

/* Header table for a response. */
.kv {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .76rem;
}
.kv th, .kv td {
  text-align: left;
  padding: .38rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.kv th { color: var(--faint); font-weight: 400; white-space: nowrap; width: 14rem; }
.kv td { color: var(--text); word-break: break-word; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- console --- */

.console-split {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .console-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
}

.recipe-list { display: grid; gap: .4rem; }
.recipe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: .5rem .6rem;
  cursor: pointer;
  transition: background var(--t-quick), border-color var(--t-quick), color var(--t-quick);
}
.recipe:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.recipe strong { display: block; font-weight: 500; color: var(--text); font-size: .86rem; }
.recipe span { display: block; font-size: .76rem; color: var(--muted); }

.method {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .06em;
  border-radius: 5px;
  padding: .22rem .4rem;
  border: 1px solid currentColor;
  min-width: 3.4rem;
  text-align: center;
}
.method[data-m="GET"]    { color: #6ee7b7; }
.method[data-m="POST"]   { color: #f0c674; }
.method[data-m="DELETE"] { color: #f0907f; }
html[data-theme="light"] .method[data-m="GET"]    { color: #17694a; }
html[data-theme="light"] .method[data-m="POST"]   { color: #8a5a00; }
html[data-theme="light"] .method[data-m="DELETE"] { color: #a3372a; }

.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .55rem .8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

.history {
  display: grid;
  gap: .3rem;
  max-height: 14rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: .74rem;
}
.history button {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: .6rem;
  align-items: center;
  font: inherit;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: .34rem .5rem;
  cursor: pointer;
}
.history button:hover { background: var(--surface-2); color: var(--text); }
.history .code-200 { color: #6ee7b7; }
.history .code-300 { color: #7dd3fc; }
.history .code-400 { color: #f0c674; }
.history .code-500 { color: #f0907f; }

/* ----------------------------------------------------------------- board --- */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
  align-items: start;
  min-height: 26rem;
}
.col {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem;
  min-height: 8rem;
  transition: border-color var(--t-quick), background var(--t-quick);
}
.col.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.col__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.col__head .n {
  margin-left: auto;
  color: var(--faint);
  font-size: .68rem;
}
.col__list { display: flex; flex-direction: column; gap: .5rem; min-height: 2.5rem; }

.tcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: .7rem .8rem;
  cursor: grab;
  transition: border-color var(--t-quick), transform var(--t-quick) var(--e-out), box-shadow var(--t-quick), opacity var(--t-quick);
  touch-action: none;
}
.tcard:hover { border-color: var(--line-2); }
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tcard.is-dragging { opacity: .35; }
.tcard.is-grabbed {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 30px -12px var(--glow);
  cursor: grabbing;
}
.tcard__title { font-size: .92rem; line-height: 1.4; }
.tcard__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--faint);
}
.tcard__tag {
  /* It is a <button>. Without these it inherits the OS button face - light
     grey with 13px Arial - which on a dark board is both wrong and unreadable. */
  background: none;
  font: inherit;
  font-size: .68rem;
  line-height: 1.5;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .1rem .45rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tcard__tag:hover { border-color: var(--line-2); color: var(--text); }
.tcard__tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tcard__tag[data-p="high"] { color: #f0907f; border-color: #f0907f55; }
.tcard__tag[data-p="med"]  { color: #f0c674; border-color: #f0c67455; }
.tcard__tag[data-p="low"]  { color: var(--muted); }
.tcard__x {
  position: absolute;
  top: .35rem; right: .35rem;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-quick), color var(--t-quick), background var(--t-quick);
}
.tcard:hover .tcard__x, .tcard:focus-within .tcard__x { opacity: 1; }
.tcard__x:hover { color: #f0907f; background: var(--surface-2); }
.tcard__x svg { width: 13px; height: 13px; }

/* The slot a dragged card would land in. */
.drop-hint {
  height: 2.6rem;
  border: 1.5px dashed var(--accent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .8rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.board-toolbar .spacer { margin-left: auto; }
.board-toolbar .count { font-family: var(--mono); font-size: .72rem; color: var(--faint); }

.live-region {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- toolkit --- */

.tool-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.tool-nav button {
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .45rem .95rem;
  cursor: pointer;
  transition: color var(--t-quick), border-color var(--t-quick), background var(--t-quick);
}
.tool-nav button:hover { color: var(--text); border-color: var(--line-2); }
.tool-nav button[aria-selected="true"] {
  color: var(--text);
  border-color: transparent;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.tool-panel { display: none; }
.tool-panel[data-active="1"] { display: block; }

.tool-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) {
  .tool-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mono-out {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  word-break: break-all;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .9rem;
  min-height: 3rem;
}
.mono-out:empty::before { content: attr(data-empty); color: var(--faint); }

.err-line {
  font-size: .84rem;
  color: #f0907f;
  margin: .6rem 0 0;
  font-family: var(--mono);
}
html[data-theme="light"] .err-line { color: #a3372a; }
.ok-line { color: #6ee7b7; }
html[data-theme="light"] .ok-line { color: #17694a; }

/* Regex matches, highlighted in place. */
.hl {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.regex-preview {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .9rem;
  min-height: 6rem;
  max-height: 18rem;
  overflow: auto;
}

.copy-btn {
  font: inherit;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .28rem .6rem;
  cursor: pointer;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.copy-btn:hover { color: var(--text); border-color: var(--line-2); }

/* ---------------------------------------------------------------- print --- */

@media print {
  .shell, .board, .tool-nav { display: none !important; }
}

/* ------------------------------------------------- task board: real UI ----
   These replace window.prompt(), window.confirm() and window.alert(). The
   board was the one place on the site that fell back to browser chrome for
   its primary interaction, and Chrome already blocks prompt() inside a
   cross-origin frame — so on some embeds "+ Add" simply did nothing. */

.btn-add { margin-top: .2rem; }

.composer { display: grid; gap: .4rem; margin-top: .2rem; }
.composer[hidden] { display: none; }
.composer input {
  font: inherit; font-size: .82rem;
  width: 100%; min-width: 0;
  padding: .45rem .55rem;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.composer input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.composer__row { display: flex; gap: .35rem; }

/* Renaming happens in the card, so the card you are editing stays visible. */
.tcard__edit {
  font: inherit; font-size: .82rem; font-weight: 600;
  width: 100%; min-width: 0;
  padding: .15rem .3rem; margin: -.15rem -.3rem;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--bg); color: var(--text);
}

/* Reset arms itself rather than opening a modal. */
.btn-sm[data-armed] {
  border-color: #e06a5a; color: #e88b7d; background: rgba(224,106,90,.12);
}

.transfer {
  margin-top: 1rem; padding: .9rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
  display: grid; gap: .6rem;
}
.transfer[hidden] { display: none; }
.transfer__head { display: flex; align-items: center; gap: .75rem; }
.transfer__head h2 { margin: 0; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.transfer__head .btn-sm { margin-inline-start: auto; }
.transfer textarea {
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  width: 100%; min-width: 0; resize: vertical;
  padding: .6rem .7rem;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--bg); color: var(--text);
}
.transfer__err { margin: 0; font-size: .78rem; font-weight: 600; color: #e88b7d; }
.transfer__err[hidden] { display: none; }
.transfer__row { display: flex; gap: .5rem; flex-wrap: wrap; }