/* Regletto Writing — the wiki: hub, article pages, search, slideshow, Discord block.
   Colours from tokens.css only; builds on site.css. */

/* ---- Hero: the hub and every article start the same way ---- */
.whero { position: relative; overflow: hidden; padding: 148px 0 56px; }
.whero .wrap { position: relative; }
.whero h1 { position: relative; } /* the typing cursor is placed against it */
.whero .aurora { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 15px; color: var(--sub); }
.crumbs a:hover { color: var(--ink); }
.crumbs .ms { font-size: 18px; }
.whero .lead { max-width: 640px; margin-top: 18px; font-size: 20px; line-height: 1.55; color: var(--sub); }
.wtag { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: 22px; font-weight: 500; }
.wtag .appicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--page); box-shadow: inset 0 0 0 1px var(--hair), var(--cast); }
.wtag .mark { width: 24px; height: 24px; }

/* the search field on the hub is a button: the one search is the dialog */
.askbox {
  display: flex; align-items: center; gap: 12px; width: min(640px, 100%); height: 60px; margin-top: 36px; padding: 0 12px 0 20px;
  border-radius: 16px; font-size: 18px; color: var(--sub); text-align: left; transition: box-shadow var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.askbox:hover { transform: translateY(-1px); box-shadow: var(--cast-up), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); }
.askbox .ms { color: var(--accent); }
.askbox span:not(.ms) { flex: 1; }
kbd { padding: 3px 8px; border-radius: 7px; background: var(--raise); box-shadow: inset 0 -1px 0 var(--hair); font: 500 13px/1.4 'Roboto', system-ui, sans-serif; color: var(--sub); white-space: nowrap; }

/* ---- Hub: one card per page ---- */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.topic { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; border-radius: 20px; transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
.topic:hover { transform: translateY(-3px); box-shadow: var(--cast-up), inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--hair); }
.topic .ticon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.topic .ticon .ms { font-size: 26px; }
.topic b { font-weight: 500; font-size: 22px; line-height: 1.3; }
.topic small { font-size: 15px; line-height: 1.5; color: var(--sub); }
.topic .go { position: absolute; top: 26px; right: 24px; color: var(--dim); transition: transform var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.topic:hover .go { transform: translateX(3px); color: var(--accent); }

/* ---- Article: contents on the left, the text on the right ---- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding: 24px 0 96px; }
.toc { position: sticky; top: 96px; align-self: start; font-size: 15px; }
.toc h2 { margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sub); }
.toc a { display: block; padding: 6px 12px; margin-left: -12px; border-radius: 9px; color: var(--soft); transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.toc a:hover { background: var(--raise); color: var(--ink); }
.toc a[aria-current='true'] { background: var(--accent-soft); color: var(--accent); }
.article { max-width: 760px; }
.part { padding-top: 16px; margin-bottom: 72px; }
.part > h2 { margin-bottom: 14px; }
.part > p { margin-bottom: 16px; }
.part h3 { margin: 32px 0 12px; font-weight: 500; font-size: 19px; }
.where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px; padding: 7px 14px; border-radius: 999px; background: var(--raise); color: var(--ink); font-size: 15px; font-weight: 500; }
.where .ms { font-size: 18px; color: var(--accent); }
/* the pill is the mark: nothing inside it is marked a second time */
.where em, .where kbd { all: unset; }
/* real alternatives: one pill each, a quiet "oder" between */
.wheres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 20px; }
.wheres .where { margin: 0; }
.wheres .or { color: var(--sub); font-size: 15px; }
/* a word quoted from the program (a button, a label, a path): set a little heavier on a faint neutral ground, quiet enough that a line of them still reads as a line */
.article em { font-style: normal; font-weight: 500; padding: 0 4px; border-radius: 4px; background: var(--raise); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* in a table the column already says what the word is */
.article td em { padding: 0; background: none; }
.article code { padding: 1px 6px; border-radius: 6px; background: var(--raise); font-size: 0.88em; overflow-wrap: anywhere; }
.article pre { margin: 12px 0 18px; padding: 14px 18px; border-radius: 12px; background: var(--desk); overflow-x: auto; }
.article pre code { padding: 0; background: none; }
.article a:not(.btn) { color: var(--accent); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--t-state) var(--ease); }
.article a:not(.btn):hover { background-size: 100% 1px; }

/* the steps: numbered in circles, joined by a thin line */
.steps { counter-reset: step; list-style: none; margin: 0 0 20px; padding: 0; }
.steps li { position: relative; padding: 0 0 18px 48px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--page); font-size: 15px; font-weight: 500; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1px; background: var(--line); }

/* good to know: a glass panel */
.notes { list-style: none; margin: 8px 0 20px; padding: 10px 26px; border-radius: 18px; }
.notes ul { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 14px 0; line-height: 1.55; }
.notes li + li { border-top: 1px solid var(--hair); }
/* what holds for one system only: a tab per system, the choice holds for the whole page */
.os { margin: 8px 0 20px; }
.ostabs { display: inline-flex; gap: 4px; margin-bottom: 28px; padding: 4px; border-radius: 999px; background: var(--raise); }
.ostabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--sub); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
.ostabs button:hover { color: var(--ink); }
.ostabs button[aria-selected="true"] { background: var(--page); color: var(--ink); box-shadow: var(--cast), 0 0 0 1px var(--hair); }
.ostabs .ms { font-size: 18px; }
/* two ways on one system: each in its own box */
.variant { margin-bottom: 14px; padding: 18px 22px 2px; border-radius: 16px; background: var(--raise); }
.variant h3 { margin-top: 0; }
.notes b { font-weight: 500; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 20px; }
.pair > div { padding: 18px 22px; border-radius: 16px; background: var(--raise); }
.pair h3 { margin: 0 0 8px; }
.pair p { font-size: 16px; }

/* a list of entries on one quiet card: the entry in ink, what it does in the softer tone, a thin rule between the rows */
.article table { width: 100%; margin: 12px 0 26px; border-collapse: separate; border-spacing: 0; border-radius: 16px; background: var(--raise); overflow: hidden; line-height: 1.55; }
.article th { padding: 14px 16px 10px 0; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sub); }
.article td { padding: 12px 16px 12px 0; border-top: 1px solid var(--hair); vertical-align: top; color: var(--soft); }
.article td:first-child { color: var(--ink); font-weight: 500; }
.article th:first-child, .article td:first-child { padding-left: 22px; }
.article th:last-child, .article td:last-child { padding-right: 22px; }
.article thead + tbody tr:first-child td { border-top: 0; }
.article td:first-child, .article td:nth-child(3) { white-space: nowrap; }
/* on a phone a row becomes a block: the entry, then what it does */
@media (max-width: 600px) {
  .article thead { display: none; }
  .article tr, .article td { display: block; }
  .article tr { padding: 12px 18px; border-top: 1px solid var(--hair); }
  .article tbody tr:first-child { border-top: 0; }
  .article td, .article td:first-child, .article td:last-child { padding: 2px 0; border: 0; }
  .article td:empty { display: none; }
}

/* ---- Slideshow: one picture at a time, never cut; the tallest one sets the height ---- */
.slides { margin: 12px 0 28px; }
.stage { position: relative; display: grid; padding: 28px; border-radius: 22px; background: var(--desk); overflow: hidden; outline-offset: 4px; }
.stage::before { content: ''; position: absolute; left: 15%; right: 15%; bottom: -30%; height: 70%; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(60px); pointer-events: none; }
.slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; transform: translateX(12px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); pointer-events: none; }
.slide.on { opacity: 1; transform: none; pointer-events: auto; }
/* full width, so the box has its height before the picture has loaded and an anchor lands where it should */
.slide img { position: relative; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--cast-up), 0 0 0 1px var(--hair); }
.slide img.narrow { width: min(100%, 560px); }
.slide .shot-dark { display: none; } /* site.css shows it in dark mode */
.slide figcaption { position: relative; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--ink); text-align: center; }
.slidebar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.slidebar .count { min-width: 52px; font-size: 14px; color: var(--sub); text-align: center; font-variant-numeric: tabular-nums; }
.slidebar .iconbtn:disabled { opacity: 0.35; cursor: default; background: none; }
.dots { display: flex; gap: 6px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.dots button[aria-current='true'] { background: var(--accent); transform: scale(1.25); }

/* ---- Discord: the end of every page and of an empty search ---- */
.ask { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 28px 30px; border-radius: 22px; }
.ask .aicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: var(--page); }
.ask .aicon .ms { font-size: 28px; }
.ask b { display: block; font-weight: 500; font-size: 20px; line-height: 1.35; }
.ask p { margin-top: 4px; font-size: 16px; color: var(--sub); }
.ask .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ask .acts small { font-size: 14px; color: var(--sub); }
.ask .acts small a { color: var(--accent); }
.hubask { padding: 8px 0 104px; }

/* ---- Search dialog ---- */
.finder { width: min(640px, 100% - 32px); max-height: min(640px, 100% - 64px); margin: 10vh auto auto; padding: 0; border: 0; border-radius: 20px; background: var(--page); color: var(--ink); box-shadow: var(--cast-up), 0 0 0 1px var(--hair); overflow: hidden; }
.finder[open] { display: flex; flex-direction: column; animation: finder-in 200ms var(--ease); }
.finder::backdrop { background: color-mix(in srgb, var(--void) 38%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes finder-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.finder .field { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); }
.finder .field .ms { color: var(--accent); }
.finder input { flex: 1; min-width: 0; height: 62px; border: 0; outline: 0; background: none; color: inherit; font: 400 18px 'Roboto', system-ui, sans-serif; }
.finder input::-webkit-search-cancel-button { display: none; }
.hits { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.hits a { display: block; padding: 12px 14px; border-radius: 12px; }
.hits a[aria-selected='true'], .hits a:hover { background: var(--accent-soft); }
.hits b { display: block; font-weight: 500; font-size: 16px; }
.hits small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--sub); }
.hits .page { color: var(--accent); }
.finder .none { padding: 20px 16px 16px; }
.finder .none > p { margin: 0 4px 14px; color: var(--sub); }
.finder .ask { grid-template-columns: auto minmax(0, 1fr); padding: 20px; background: var(--raise); }
.finder .ask .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.finder .keys { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.finder [hidden] { display: none; }

@media (max-width: 860px) {
  .whero { padding: 120px 0 40px; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; }
  .toc nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .toc a { margin-left: 0; background: var(--raise); }
  .stage { padding: 14px; }
  .pair { grid-template-columns: 1fr; }
  .ask { grid-template-columns: auto minmax(0, 1fr); }
  .ask .acts { grid-column: 1 / -1; align-items: flex-start; }
  .finder .keys { display: none; }
}