/* Style guide and design system: what this page adds to /cloud-console/project-info/console.css. Loaded by this page only.
   1. The real console's tokens that the site's console.css leaves out (motion, the deepest shadow, the scrim, the bar's
      hover fill and the scroll-edge shade), copied from cloud-console/web/console.css as they are.
   2. The page's own layout: the on-this-page list, specimen boxes, swatches, the type, space and shape samples, the
      icon grid.
   3. Copies of the console's component rules that the site's console.css lacks, scoped to .specimen, so the
      components below are drawn as the console draws them. */

/* 1. Tokens */
:root {
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;
  --slow: 200ms;
  --scrim: rgb(12 16 26 / 45%);
  --bar-hover: rgb(255 255 255 / 10%);
  --edge-shadow: rgb(0 0 0 / 22%);
  --shadow-lg: 0 2px 6px rgb(20 26 40 / 10%), 0 24px 48px rgb(20 26 40 / 22%);
}
:root[data-theme="dark"] {
  --scrim: rgb(0 0 0 / 60%);
  --edge-shadow: rgb(255 255 255 / 16%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 40%), 0 24px 48px rgb(0 0 0 / 55%);
}

/* 2. The page */
.toc { margin: 0 0 var(--space-5); }
.toc ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; min-width: 0; }
.toc a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 500;
}
.toc a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.main > h3 { margin-top: var(--space-6); }
.panel > h3:first-child { margin-top: 0; }

.specimen {
  margin: var(--space-3) 0; padding: var(--space-4); min-width: 0; background: var(--canvas);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.specimen > :first-child { margin-top: 0; }
.specimen > :last-child { margin-bottom: 0; }
.specimen-note { color: var(--muted); font-size: var(--text-sm); margin: var(--space-1) 0 var(--space-2); }
.rule { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 var(--space-5); max-width: 80ch; }
.rule dt { font-weight: 600; }
.rule dd { margin: 0; min-width: 0; }

/* Swatches: the value itself (set on the swatch as --sw), over what it sits on when it is see-through (--under). */
.tone { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sw {
  display: inline-block; flex: none; width: 28px; height: 28px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: linear-gradient(var(--sw), var(--sw)), var(--under, transparent);
}
.ratio { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Type, space and shape */
.type-sample { display: block; line-height: 1.3; overflow-wrap: anywhere; }
.ts-xs { font-size: var(--text-xs); }
.ts-sm { font-size: var(--text-sm); }
.ts-md { font-size: var(--text-md); }
.ts-lg { font-size: var(--text-lg); }
.ts-xl { font-size: var(--text-xl); }
.ts-2xl { font-size: var(--text-2xl); }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.tabular { font-variant-numeric: tabular-nums; }
.mono-sample { font-family: var(--mono); }

.space-bar { display: block; height: 12px; border-radius: 2px; background: var(--accent); }
.w-1 { width: var(--space-1); }
.w-2 { width: var(--space-2); }
.w-3 { width: var(--space-3); }
.w-4 { width: var(--space-4); }
.w-5 { width: var(--space-5); }
.w-6 { width: var(--space-6); }
.w-8 { width: var(--space-8); }
.w-10 { width: var(--space-10); }

.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; margin: var(--space-3) 0 var(--space-5); padding: 0; }
.samples > li { display: grid; gap: var(--space-2); justify-items: start; align-content: start; margin: 0; min-width: 0; }
.samples > li span { font-size: var(--text-sm); color: var(--muted); }
.shape { display: block; width: 88px; height: 56px; background: var(--surface); border: 1px solid var(--line-strong); }
.r-sm { border-radius: var(--radius-sm); }
.r-md { border-radius: var(--radius); }
.r-lg { border-radius: var(--radius-lg); }
.r-pill { border-radius: 999px; height: 28px; }
.r-round { border-radius: 50%; width: 44px; height: 44px; }
.depth { display: block; width: 120px; height: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin: var(--space-2) 0 var(--space-3); }
.depth-sm { box-shadow: var(--shadow-sm); }
.depth-md { box-shadow: var(--shadow); }
.depth-lg { box-shadow: var(--shadow-lg); }
.ctl {
  display: inline-flex; align-items: center; padding: 0 var(--space-4); border: 1px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ctl-36 { height: 36px; }
.ctl-44 { height: 44px; }
.ctl-56 { height: 56px; }

/* Icons */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); list-style: none; margin: var(--space-3) 0 var(--space-5); padding: 0; }
.icon-grid > li {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin: 0; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.icon-grid .icon { width: 24px; height: 24px; }
.icon-grid .logo { width: 28px; height: 28px; flex: none; }
.icon-grid li > span { min-width: 0; overflow-wrap: anywhere; }

/* 3. Components, as web/console.css draws them (scoped to the specimens) */

/* Buttons: hover, disabled, busy, danger and quiet */
.specimen .button {
  cursor: pointer; text-decoration: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.specimen .button:hover { background: var(--accent-soft); text-decoration: none; }
.specimen .button:disabled, .specimen .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: transparent; }
.specimen .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.specimen .button-primary:disabled { background: var(--accent); }
.specimen .button-danger { color: var(--bad); }
.specimen .button-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.specimen .button-quiet { border-color: transparent; background: transparent; }
.specimen .button[aria-busy="true"] { opacity: 1; cursor: progress; }
.specimen .button[aria-busy="true"]::after {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.specimen .icon-button {
  display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; transition: background-color var(--fast) var(--ease);
}
.specimen .icon-button:hover { background: var(--idle-soft); }
.specimen .icon-button .icon { width: 20px; height: 20px; margin: 0; }
.specimen .icon-button.button { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%; }

/* Panels' label and value pairs */
.specimen .pairs { display: grid; margin: 0; }
.specimen .pairs > div {
  display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--space-4);
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.specimen .pairs > div:last-child { border-bottom: 0; }
.specimen .pairs dt { color: var(--muted); }
.specimen .pairs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.demo-h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; margin: 0 0 var(--space-3); }
.demo-h1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere;
  font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0;
}
.specimen .stats { margin: 0; }
.specimen .stat-value { font-variant-numeric: tabular-nums; }

/* Tables */
.specimen .table-frame { margin: 0; }
.specimen .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.specimen td.numeric, .specimen th.numeric { white-space: nowrap; }
.specimen td { vertical-align: middle; }
.specimen tbody tr { transition: background-color var(--fast) var(--ease); }
.specimen tbody tr:hover { background: var(--raised); }
.kebab { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }

/* Forms */
.specimen .form-demo { max-width: 760px; }
.specimen .field { margin: 0 0 var(--space-5); }
.specimen .field:last-child { margin-bottom: 0; }
.specimen .field > label, .specimen .label { display: block; font-weight: 600; font-size: var(--text-sm); margin: 0 0 6px; }
.specimen input {
  width: 100%; max-width: 100%; min-height: var(--control); padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background-color: var(--surface); color: var(--ink); font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.specimen input:hover { border-color: var(--muted); }
.specimen input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.specimen input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.specimen input::placeholder { color: var(--muted); opacity: 1; }
.specimen .has-error input { border-color: var(--bad); }
.specimen .has-error input:focus { box-shadow: 0 0 0 3px var(--bad-soft); }
.specimen .field-error { color: var(--bad); font-size: var(--text-sm); font-weight: 500; margin: 6px 0 0; overflow-wrap: anywhere; }
.specimen input[type="file"] { padding: 3px; cursor: pointer; }
.specimen input[type="file"]::file-selector-button {
  min-height: calc(var(--control) - 8px); margin-right: var(--space-3); padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--raised);
  color: var(--accent); font: inherit; font-weight: 500; cursor: pointer;
}
.specimen input[type="file"]:hover::file-selector-button { background: var(--accent-soft); }
.specimen .form-message { margin: 0 0 var(--space-5); }

/* Notices and banners */
.specimen .notice {
  padding: 6px 6px 6px var(--space-4); margin: 0 0 var(--space-3); box-shadow: var(--shadow-sm);
  animation: arrive var(--slow) var(--ease);
}
.specimen .notice > span { flex: 1; overflow-wrap: anywhere; font-weight: 500; }
.specimen .notice .button { color: inherit; }
.specimen .notice-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.specimen .banner {
  display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); margin: 0 0 var(--space-2);
  border-radius: var(--radius); border: 1px solid; border-left-width: 4px; overflow-wrap: anywhere;
}
.specimen .banner-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.specimen .banner-info { align-items: center; background: var(--info-soft); color: var(--info); border-color: var(--info); }
.specimen .banner-info > span { flex: 1 1 280px; }
@keyframes arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The motion demo: the same keyframes under a second name, so pointing at the box plays the arrival again. */
.arrive-demo:hover .notice { animation-name: arrive-again; }
@keyframes arrive-again { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tabs (a picture: spans, not controls) */
.specimen .tabs {
  position: relative; display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin: 0;
  overflow-x: auto; scrollbar-width: none;
  background:
    linear-gradient(to right, var(--canvas) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--canvas) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shadow), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), transparent) right / 12px 100% no-repeat scroll;
}
.specimen .tabs::-webkit-scrollbar { display: none; }
.specimen .tabs > span {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4);
  color: var(--muted); font-weight: 500; white-space: nowrap;
}
.specimen .tabs > span::after {
  content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
}
.specimen .tabs > .on { color: var(--accent); font-weight: 600; }
.specimen .tabs > .on::after { background: var(--accent); }

/* The top bar and the left navigation (a picture) */
.specimen .window { box-shadow: var(--shadow-sm); }
.pic-picker {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex: 0 1 220px; min-width: 0;
  height: 30px; padding: 0 var(--space-2) 0 10px; border: 1px solid var(--bar-line); border-radius: var(--radius);
  background: var(--bar-hover); color: var(--bar-ink); white-space: nowrap; overflow: hidden;
}
.pic-picker > span { overflow: hidden; text-overflow: ellipsis; }
.pic-picker .icon { width: 16px; height: 16px; color: var(--bar-muted); }
.pic-round { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--bar-ink); }
.pic-avatar {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 0 2px var(--bar-line);
}
.pic-frame { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.pic-nav { background: var(--surface); border-right: 1px solid var(--line); padding: var(--space-3) var(--space-2) var(--space-4); min-width: 0; }
.pic-group + .pic-group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pic-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin: var(--space-1) var(--space-3); }
.pic-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius); color: var(--ink); font-weight: 500;
}
.pic-link .icon { color: var(--muted); }
.pic-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.pic-link.on .icon { color: var(--accent); }
.pic-page { padding: var(--space-4) var(--space-5); min-width: 0; }
.pic-page .page-header { margin-bottom: var(--space-3); }

/* The page header's buttons sit flat on the page, as the console's do */
.specimen .page-header .toolbar { margin: 0; gap: var(--space-1); }
.specimen .page-header .button-plain, .specimen .page-header .button-quiet, .specimen .page-header .button-danger { border-color: transparent; background: transparent; }
.specimen .page-header .chip { font-size: var(--text-sm); }

/* Empty states and loading */
.specimen .empty {
  display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.specimen .empty > .icon { width: 32px; height: 32px; stroke-width: 1.4; color: var(--line-strong); }
.specimen .empty p { margin: 0; max-width: 56ch; }
.specimen .empty .toolbar { margin: var(--space-2) 0 0; }
.specimen .empty-error { color: var(--ink); border-color: var(--bad); border-left-width: 4px; }
.specimen .empty-error > .icon { color: var(--bad); }
.specimen .loading:not(:has(*)):not(:empty) { color: var(--muted); font-size: var(--text-sm); padding: var(--space-2) 0; }
.specimen .loading:not(:has(*)):not(:empty)::after {
  content: ""; display: block; height: 176px; margin-top: var(--space-3); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background-color: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0 14px, var(--idle-soft) 14px 28px, transparent 28px 44px);
  background-size: calc(100% - 32px) 100%; background-position: 16px 0; background-repeat: no-repeat;
  animation: pulse 1.4s var(--ease) infinite alternate;
}
@keyframes pulse { from { opacity: 1; } to { opacity: 0.55; } }
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.state-grid > div { min-width: 0; }

/* Dialogs and values shown once */
.scrim-demo { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--scrim); }
.specimen .dialog {
  position: static; display: block; width: auto; max-width: 480px; margin: 0 auto; padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.specimen .dialog .demo-h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.specimen .dialog p { color: var(--muted); }
.specimen .dialog .toolbar { justify-content: flex-end; margin: var(--space-6) 0 0; }
.specimen .once {
  border: 1px solid var(--warn); border-left-width: 4px; background: var(--warn-soft); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin: 0;
}
.specimen .once-warning { color: var(--warn); font-weight: 600; }
.specimen .once-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.specimen .once-value { flex: 1 1 280px; width: auto; font-family: var(--mono); }

/* Tablets */
@media (max-width: 960px) {
  .pic-frame { grid-template-columns: 180px minmax(0, 1fr); }
}
/* Phones: one column, controls of 44px, as the console's */
@media (max-width: 640px) {
  .specimen { padding: var(--space-3); }
  .rule { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rule dd + dt { margin-top: var(--space-2); }
  .specimen .pairs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .specimen .table-frame .numeric { text-align: left; }
  .specimen .table-frame tbody tr:hover { background: var(--surface); }
  .specimen .icon-button.button { width: 44px; height: 44px; min-height: 44px; }
  .window .brand-name { display: none; }
  .pic-frame { grid-template-columns: minmax(0, 1fr); }
  .pic-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .pic-link { min-height: 44px; }
  .pic-page { padding: var(--space-4); }
  .specimen .page-header { align-items: stretch; }
  .specimen .dialog { padding: var(--space-5); }
  .specimen .dialog .toolbar { flex-wrap: wrap-reverse; }
  .scrim-demo { padding: var(--space-3); }
  .toc a { min-height: 44px; }
}
@media (pointer: coarse) {
  .specimen .icon-button.button { width: 44px; height: 44px; min-height: 44px; }
  .toc a { min-height: 44px; }
}
/* The site's console.css turns motion off on elements; the console also turns it off on ::before and ::after (the busy
   ring and the loading skeleton). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Two panels side by side from a tablet's width up */
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.pair-grid > .panel { margin: 0; min-width: 0; }
@media (max-width: 767px) { .pair-grid { grid-template-columns: minmax(0, 1fr); } }

.icon-grid .hint { display: block; }

/* Numeric columns of this page's own tables: right-aligned in tabular figures; left-aligned in a phone's row card */
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .table-frame .numeric { text-align: left; } }

/* Taps of 44px on phones and touch screens for the breadcrumbs and the mark in the top bar */
@media (max-width: 640px), (pointer: coarse) {
  .crumbs a, .topbar .brand { display: inline-flex; align-items: center; min-height: 44px; }
}