/* The welcome page fills the viewport height. */
.welcome-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}

.welcome-inner > * { width: 100%; }

.welcome-intro.is-second { padding-top: 32px; border-top: .5px solid var(--color-separator); }
/* not yet available: the same pill, in light grey, not clickable */
.welcome-cta.is-disabled,
.welcome-cta.is-disabled:hover,
.welcome-cta.is-disabled:active { color: var(--color-label-tertiary); background: var(--color-fill); cursor: default; }
/* a section's mark, as apple.com sets a small app icon above a feature headline */
.welcome-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.welcome-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-icon.is-bench { background: linear-gradient(145deg, #4aa8ff, #0a6cff); }
.welcome-icon.is-inferlets { background: linear-gradient(145deg, #3b5bfd, #a855f7); }
.welcome-icon.is-profiler { background: linear-gradient(145deg, #a855f7, #ec4899); }
.welcome-icon.is-services { background: linear-gradient(145deg, #ff9f0a, #ff375f); }
/* the glyph fills its tile as an app icon's does; the button lines up with the headline, not the whole block */
.welcome-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }
.welcome-intro { align-items: flex-start; }
.welcome-intro > .welcome-cta { margin-top: 62px; }
@media (max-width: 760px) { .welcome-intro > .welcome-cta { margin-top: 0; } }
.welcome-icon { margin-bottom: 20px; }
.welcome-intro > .welcome-cta { margin-top: 68px; }
@media (max-width: 760px) { .welcome-intro > .welcome-cta { margin-top: 0; } }

/* on a phone the welcome reads as an iPhone page: a shorter banner, a 34-point large title, 16-point margins */
@media (max-width: 899px) {
  .method-inner,
  .welcome-inner { padding: 16px var(--edge) calc(48px + env(safe-area-inset-bottom)); }
  .method-head h1 { font-size: 34px; letter-spacing: -.02em; }
  .welcome-banner { height: 240px; margin-bottom: 16px; }
  .welcome-banner-copy { left: 22px; right: 22px; top: 22px; }
  .welcome-banner-actions { left: 22px; bottom: 20px; }
  .welcome-banner-link { height: 36px; font-size: 15px; }
  .welcome-intro { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 8px; }
  .welcome-intro > .welcome-cta,
  .welcome-intro > .welcome-cta:last-child { margin-top: 0; }
  .welcome-tagline { font-size: 20px; }
  .welcome-icon { margin-bottom: 16px; }
}

/* the secondary call to action, as Apple pairs them: the same pill, outlined in blue, so the filled one leads */
.welcome-cta.is-secondary { color: #0071e3; background: transparent; box-shadow: inset 0 0 0 1px #0071e3; }
.welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; }
.welcome-cta.is-secondary:active { color: #fff; background: #006edb; }
:root[data-theme="dark"] .welcome-cta.is-secondary { color: #2997ff; box-shadow: inset 0 0 0 1px #2997ff; }
:root[data-theme="dark"] .welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .welcome-cta.is-secondary { color: #2997ff; box-shadow: inset 0 0 0 1px #2997ff; }
  :root:not([data-theme="light"]) .welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; box-shadow: none; }
}

/* a feature not yet released (alpha): a short coloured word over its name, as apple.com marks a product "New" */
.welcome-eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: #b64400;
}
:root[data-theme="dark"] .welcome-eyebrow { color: #f56300; }

/* the welcome is the platforms' overview, in the site's own idiom: the page title and lede, then outlined panes */
.welcome-head { margin: 12px 0 8px; }
.welcome-tile-copy { display: flex; flex-direction: column; }
.welcome-group { display: flex; flex-direction: column; gap: 6px; }
.welcome-group + .welcome-group { margin-top: 12px; }
/* a group's label, as the sidebar and the heatmap name theirs and macOS labels a grouped list: small, semibold, grey, inset to the rows */
.welcome-group-title { margin: 0; padding: 0 12px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--color-label-tertiary); }
/* one outlined pane per group, its platforms as rows split by a hairline, as a grouped list in macOS Settings */
.welcome-platforms { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-panel-outline); border-radius: 14px; }
.welcome-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--color-label);
  cursor: pointer;
}
/* the hairline starts under the text, not the icon, as in a native list */
.welcome-tile + .welcome-tile::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; border-top: 1px solid var(--color-separator-light, var(--color-panel-outline)); }
/* a row darkens only while it is pressed, at once, as a System Settings row does; hovering changes nothing.
   The highlight is inset from the pane and the hairlines either side give way to it */
.welcome-tile::after { content: ""; position: absolute; inset: 3px 4px; border-radius: var(--radius-control); pointer-events: none; }
.welcome-tile > * { position: relative; z-index: 1; }
.welcome-tile:not(.is-soon):active::after { background: var(--color-fill-secondary); }
.welcome-tile:not(.is-soon):active::before,
.welcome-tile:not(.is-soon):active + .welcome-tile::before { opacity: 0; }
.welcome-tile:focus-visible { outline: 3px solid rgba(0, 113, 227, .4); outline-offset: -3px; }
.welcome-tile .welcome-tile-icon[style] { flex: none; width: 28px; height: 28px; margin: 0; border-radius: 7px; }
.welcome-tile .welcome-tile-icon[style] svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-tile .welcome-tile-icon svg .is-filled { fill: #fff; stroke: none; }
.welcome-tile-copy { display: flex; flex-direction: column; min-width: 0; }
.welcome-tile-name { font-size: 13px; font-weight: 500; line-height: 1.3; }
.welcome-tile-line { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--color-label-secondary); }
.welcome-tile-status { display: inline-flex; flex: none; margin-left: auto; color: var(--color-label-tertiary); }
.welcome-tile-status.is-soon,
.welcome-tile-value { font-size: 12px; }
.welcome-tile-status { align-items: center; gap: 6px; }
.welcome-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* phones: iOS list sizes, as the sidebar's rows grow there */
@media (max-width: 899px) {
  .welcome-group-title { padding: 0 16px; font-size: 13px; }
  .welcome-tile { padding: 10px 16px; gap: 12px; }
  .welcome-tile + .welcome-tile::before { left: 58px; }
  .welcome-tile .welcome-tile-icon[style] { width: 30px; height: 30px; border-radius: 7px; }
  .welcome-tile .welcome-tile-icon[style] svg { width: 18px; height: 18px; }
  .welcome-tile-name { font-size: 17px; font-weight: 400; }
  .welcome-tile-line { font-size: 13px; }
}

/* the banner's two buttons, as the toolbar's controls in macOS's large size: 13-point text, rounded rectangles, the first filled and the second outlined */
.welcome-banner-actions { gap: 8px; }
.welcome-banner-link { height: 32px; padding: 0 14px; border-radius: var(--radius-field); font-size: 13px; font-weight: 500; letter-spacing: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); backdrop-filter: none; }
.welcome-banner-link:hover { background: rgba(255, 255, 255, .16); }
.welcome-banner-link.is-primary { color: #1d1d1f; background: #fff; box-shadow: none; }
.welcome-banner-link.is-primary:hover { background: rgba(255, 255, 255, .88); }
@media (max-width: 899px) { .welcome-banner-link { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 15px; } }

/* the banner sits in the page's rhythm: the 20px gap every block keeps, and a corner of the same family as the list's */
.welcome-banner,
.welcome-inner .welcome-banner { margin: 0; border-radius: 14px; }  /* the list's corner */
/* a slim banner: one strip, its headline centred in its height, so the list starts high on the page */
.welcome-banner { height: 120px; }
.welcome-banner .welcome-banner-copy { top: 50%; transform: translateY(-50%); }
.welcome-banner .welcome-banner-title { font-size: 28px; }
.welcome-banner .welcome-banner-sub { font-size: 15px; }

/* All Platforms as a data table: the results' rows, the platform's sidebar mark before its name, a chevron at the end */
.welcome-table { width: 100%; font-size: 13px; }
.welcome-table .welcome-cell, .data-table .welcome-cell { display: inline-flex; align-items: center; gap: 8px; }
.welcome-table .sidebar-glyph[style] { width: 20px; height: 20px; border-radius: 5px; }
.welcome-table .sidebar-glyph[style] svg, .data-table .welcome-cell .sidebar-glyph[style] svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-table .sidebar-glyph svg .is-filled, .data-table .welcome-cell .sidebar-glyph svg .is-filled { fill: #fff; stroke: none; }
.welcome-table th.is-numeric, .welcome-table td.is-numeric { width: 1%; }
.welcome-table .welcome-go { width: 100%; text-align: right; color: var(--color-label-tertiary); }
.welcome-table tr.is-link { cursor: pointer; }

.welcome-table .welcome-stack { color: var(--color-label-secondary); }
#welcome.method { scrollbar-gutter: auto; }  /* a table reaches the edge; no gutter is kept for a scrollbar it rarely needs */
.welcome-table thead th[data-sort] { cursor: pointer; }
.welcome-table tbody td { height: var(--row-height); }  /* as tall as a Results or Quality row */
/* iPhone: the platform, its machines and its status fit the width; the stack is on the platform's own page */
@media (max-width: 899px) {
  .welcome-table tbody td { height: var(--row-height); }  /* 40px, as every table on a phone */
}
/* the list: the platform takes the row, its machine count a grey label against the right edge, on every width */
.welcome-table .welcome-fill { width: 100%; padding: 0; }  /* as the results: columns at their width, the rest empty */
.welcome-table .welcome-count { text-align: right; white-space: nowrap; }
.welcome-table thead th.is-numeric { text-align: right; }
.welcome-table .sidebar-glyph[style], .data-table .welcome-cell .sidebar-glyph[style] { width: 16px; height: 16px; border-radius: 4px; }
.welcome-table .sidebar-glyph[style] svg, .data-table .welcome-cell .sidebar-glyph[style] svg { width: 11px; height: 11px; }