/*
 * Finish: the side drawer and the rail, one sheet for every look. Loaded after Paint (so a tie in specificity is won here).
 * Colour comes from the theme tokens only (--pk-ink, --pk-muted, --pk-accent*, --pk-scrim, --paint-sheet / --paint-night, which
 * Paint and Matinee define and Glass falls back from), so Paint, Matinee and Glass each read their own ink on their own pane.
 * The drawer script is drawer.js: Escape, the focus cycle and the inert page behind it. Spacing is the 4 / 8 / 12 / 16 / 24 scale.
 */

:root { --fin-divider: color-mix(in srgb, var(--pk-ink, #f5f2f1) 8%, transparent); }

/* The About row reads in the look's ink: "cinemaOS" was a fixed light grey in polish.css, invisible on paper. */
html body.pk-obsidian .pk-rail-brand-text strong { color: var(--pk-ink); }

/* ---------------------------------------------------------------- the phone drawer (the rail below 760px)
   A solid pane that slides in from the left over a scrim: Paint a dark pane, Matinee warm paper, Glass the same dark. */
.pk-spaces-scrim, .pk-account-hint { display: none; }

@media (max-width: 759px) {
  html body.pk-obsidian .pk-spaces-scrim {
    position: fixed; inset: 0; z-index: 40; display: block; background: var(--pk-scrim);
    opacity: 0; visibility: hidden; touch-action: none; overscroll-behavior: contain;
    transition: opacity var(--pk-dur-base, 200ms) var(--pk-ease-quick, ease), visibility 0s linear var(--pk-dur-base, 200ms);
  }
  html body.pk-obsidian .pk-spaces-toggle:checked ~ .pk-spaces-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

  html body.pk-obsidian .pk-spaces-toggle ~ .pk-rail {
    position: fixed; z-index: 41; top: 0; bottom: 0; left: 0; right: auto; align-self: stretch; width: min(320px, calc(100vw - 56px)); height: auto; max-height: none;
    display: flex; flex-direction: column; gap: var(--fin-1); margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--pk-top-height, 60px) + env(safe-area-inset-top, 0px)) var(--fin-3) calc(var(--fin-4) + env(safe-area-inset-bottom, 0px)) max(var(--fin-3), env(safe-area-inset-left, 0px));
    border: 0; border-radius: 0 var(--fin-r-lg) var(--fin-r-lg) 0;
    background: linear-gradient(var(--paint-sheet, #14101c), var(--paint-sheet, #14101c)), var(--paint-night, #0b0810);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    visibility: hidden; opacity: 1; pointer-events: none; transform: translateX(-104%);
    transition: transform var(--pk-dur-base, 200ms) var(--pk-ease-quick, ease), visibility 0s linear var(--pk-dur-base, 200ms);
  }
  html[data-look="matinee"] body.pk-obsidian .pk-spaces-toggle ~ .pk-rail { box-shadow: 12px 0 40px rgba(60, 40, 20, .24); }
  html body.pk-obsidian .pk-spaces-toggle:checked ~ .pk-rail {
    visibility: visible; pointer-events: auto; transform: none;
    transition: transform var(--pk-dur-slow, 320ms) var(--pk-ease-settle, ease), visibility 0s;
  }
  html body.pk-obsidian .pk-spaces-toggle ~ .pk-rail > * { opacity: 1; transform: none; transition: none; }

  /* The hamburger becomes the close mark in the pane's top corner: ink on the pane, no dark tile. */
  html body.pk-obsidian .pk-spaces-label { z-index: 42; }
  html body.pk-obsidian .pk-spaces-toggle:checked ~ .pk-spaces-label { background: transparent; }
  html body.pk-obsidian .pk-spaces-label::before, html body.pk-obsidian .pk-spaces-label::after { background: var(--pk-ink); }
  html body.pk-obsidian .pk-spaces-label::before { box-shadow: 0 -5px 0 var(--pk-ink); }
  html body.pk-obsidian .pk-spaces-toggle:checked ~ .pk-spaces-label::before { box-shadow: none; }

  /* Rows: 48px, 16px either side, a 24px icon and a 16px label. The current place is a filled pill in the accent tint, bold. */
  html body.pk-obsidian .pk-rail > a {
    display: flex; align-items: center; gap: var(--fin-4); width: auto; min-height: 48px; margin: 0; padding: 0 var(--fin-4);
    border-radius: 999px; background: transparent; box-shadow: none; color: var(--pk-ink); font-size: 16px; font-weight: 600; line-height: 1.25;
  }
  html body.pk-obsidian .pk-rail > a .pk-ico { width: 24px; height: 24px; flex: none; color: inherit; }
  html body.pk-obsidian .pk-rail > a[aria-current="page"] { background: color-mix(in srgb, var(--pk-accent) 22%, transparent); color: var(--pk-ink); font-weight: 700; }
  html body.pk-obsidian .pk-rail > a[aria-current="page"] .pk-ico { color: var(--pk-accent-ink); }
  html body.pk-obsidian .pk-rail > a[aria-current="page"]::after { content: none; }
  html body.pk-obsidian .pk-rail > a:not([aria-current="page"]):focus-visible { background: color-mix(in srgb, var(--pk-ink) 8%, transparent); }

  /* About cinemaOS: the same row, the mark in the icon column, "cinemaOS" in full ink on the same line. */
  html body.pk-obsidian .pk-rail > .pk-rail-brand { flex: none; margin: 0; padding: 0 var(--fin-4); color: var(--pk-muted); }
  html body.pk-obsidian .pk-rail > .pk-rail-brand .pk-cinemaos-mark { width: 24px; height: 24px; flex: none; border-radius: 6px; }
  html body.pk-obsidian .pk-rail-brand-text { font-size: 16px; line-height: 1.25; }
  html body.pk-obsidian .pk-rail-brand-text strong { display: inline; font-size: inherit; }

  /* The account row sits at the foot of the pane, under a quiet divider that stops at the pane's padding. */
  html body.pk-obsidian .pk-rail > .pk-account {
    flex: none; margin: auto 0 0; padding: var(--fin-3) 0 0;
    background: linear-gradient(var(--fin-divider), var(--fin-divider)) top / 100% 1px no-repeat;
  }
  html body.pk-obsidian .pk-rail > .pk-account summary {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; grid-template-areas: "face name go" "face hint go"; align-items: center; column-gap: var(--fin-3);
    min-height: 56px; padding: var(--fin-1) var(--fin-4) var(--fin-1) var(--fin-3); border-radius: 999px; background: transparent; box-shadow: none; color: var(--pk-ink);
  }
  html body.pk-obsidian .pk-rail > .pk-account summary:focus-visible { background: color-mix(in srgb, var(--pk-ink) 8%, transparent); }
  html body.pk-obsidian .pk-rail > .pk-account .pk-account-avatar { grid-area: face; width: 40px; height: 40px; font-size: 16px; }
  html body.pk-obsidian .pk-rail .pk-account-name { grid-area: name; max-width: none; color: var(--pk-ink); font-size: 16px; font-weight: 700; line-height: 1.25; }
  html body.pk-obsidian .pk-rail .pk-account-name::after { content: none; }
  html body.pk-obsidian .pk-rail .pk-account-hint { grid-area: hint; display: block; overflow: hidden; color: var(--pk-muted); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  /* The chevron says the row opens something: it is drawn, not a glyph, so it holds in every font. */
  html body.pk-obsidian .pk-rail > .pk-account summary::after {
    content: ""; display: block; grid-area: go; justify-self: center; width: 9px; height: 9px; margin-right: 3px;
    border: solid var(--pk-muted); border-width: 2px 2px 0 0; transform: rotate(45deg);
  }
}

/* Still: no slide, no fade (the checked state is more specific than the closed one, hence !important). */
@media (prefers-reduced-motion: reduce) {
  html body.pk-obsidian :is(.pk-spaces-scrim, .pk-spaces-toggle ~ .pk-rail) { transition: none !important; }
}
html[data-save="1"] body.pk-obsidian :is(.pk-spaces-scrim, .pk-spaces-toggle ~ .pk-rail) { transition: none !important; }

/* ---------------------------------------------------------------- F8 the brush under the current place is as wide as its label
   Paint draws the stroke across the whole link (12% in from each end, 2px off the bottom): wider than the word and tight to the
   edge. Here it spans the label only, centred, its top 4px below the text. (Glass draws no brush: paint.css is off for it.) */
@media (min-width: 760px) {
  html:not([data-look="glass"]) body.pk-obsidian .pk-rail > a[aria-current="page"]::after { content: none; }
  html:not([data-look="glass"]) body.pk-obsidian .pk-rail > a[aria-current="page"] > span { position: relative; }
  html:not([data-look="glass"]) body.pk-obsidian .pk-rail > a[aria-current="page"] > span::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% + var(--fin-1)); height: 6px; background: var(--pk-accent); pointer-events: none;
    -webkit-mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat; mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat;
  }
}
/* A tab's label is the text inside its padding: the stroke is inset by exactly that padding (--fin-tab-inset, the tab's own
   padding-inline; test/web/drawer.test.mjs pins each to the sheet that sets the padding). */
html body.pk-obsidian .pk-feed-toggle a { --fin-tab-inset: 14px; }
html body.pk-obsidian .pk-home-top .pk-feed-toggle a { --fin-tab-inset: var(--fin-3); }
html body.pk-obsidian .pk-tabs a { --fin-tab-inset: 12px; }
html:not([data-look="glass"]) body.pk-obsidian :is(.pk-feed-toggle a, .pk-tabs a)[aria-current]:not([aria-current="false"])::after {
  left: var(--fin-tab-inset); right: var(--fin-tab-inset); top: calc(50% + .5lh + var(--fin-1)); bottom: auto; height: 6px;
}
/* The profile tabs share the row in equal widths with the label centred (profile-media.css), so the label's own width is not
   known to CSS: the stroke is a short centred one, 2.5em, the width of a word such as Work or Posts. */
html:not([data-look="glass"]) body.pk-obsidian .pk-creator-tabs a[aria-current]:not([aria-current="false"])::after {
  left: calc(50% - 1.25em); right: calc(50% - 1.25em); top: calc(50% + .5lh + var(--fin-1)); bottom: auto; height: 6px;
}
@media (forced-colors: active) {
  html body.pk-obsidian .pk-rail > a[aria-current="page"] > span::after { background: Highlight; }
}

/* ---------------------------------------------------------------- Matinee sweep
   The phone's search sheet is a dark surface in every look (polish.css), but its section heads, the matched letters and "See all
   results" take the paper's tokens, which are dark inks: 3.5:1 or worse on it. They take the dark look's inks here. */
@media (max-width: 759px) {
  html[data-look="matinee"] body.pk-obsidian .pk-search.is-open #suggest-results > .pk-suggest-head { color: #aeb4b4; }
  html[data-look="matinee"] body.pk-obsidian .pk-search.is-open :is(.pk-suggest-text mark, #suggest-results > .pk-search-all) { color: #ef94a2; }
}