/* =========================================================================
   Derslik — shell extras (Builder B)

   Only what `dk/base.css` does not declare: the brand-artwork swap the
   server-rendered lockups need, three small tab-strip/title-bar pieces, the
   pane variants the un-migrated page bodies sit in, and the bridging rules
   that replace `styles.css`'s `.app-shell > *` sizing now that `.app-shell`
   is gone.

   Component looks (dk-btn, dk-ibtn, dk-tab, dk-pane, dk-avatar, dk-swatch, …)
   belong in `dk/base.css` — never duplicate them here.
   Loaded last: tokens.css → styles.css → base.css → this.
   ========================================================================= */

/* --- <body> reset --------------------------------------------------------
   `styles.css` still centres every direct child of <body> for the old card
   layout (`body{align-items:center;justify-content:center;gap:1.5rem}`) and
   `.dk-app` does not set those three, so they leak through and shrink-wrap
   the title bar and tab strip. Neutralise them here; delete this block the
   moment `dk/base.css` resets them on `.dk-app` itself.
   ------------------------------------------------------------------------- */
body.dk-app {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
}

/* The pre-auth envelope (landing / onboarding / consent / error): title bar
   plus one centred card, no tab strip. `.dk-app` locks the shell to the
   viewport because the app pages scroll inside their panes; these pages have
   no pane to scroll, so relax the lock and let a tall card (the KVKK consent
   copy is the long one) extend the document instead of being clipped.
   `.dk-workspace--centered` still scrolls internally, so short pages render
   exactly as they did — this only removes the clip. */
body.dk-app--plain {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
}

/* --- brand artwork -------------------------------------------------------
   The PNG lockups ship in two colourways. Light artwork is the default; the
   three dark themes swap to the white masters (visual-system §4.3). The
   design's own `filter:invert(1)` hack is not needed — we have both files.
   ------------------------------------------------------------------------- */
.dk-logo,
.dk-bry { display: inline-block; width: auto; }
.dk-logo--ondark { display: none; }

[data-theme="koyu"] .dk-logo--onlight,
[data-theme="tahta"] .dk-logo--onlight,
[data-theme="gece"] .dk-logo--onlight { display: none; }

[data-theme="koyu"] .dk-logo--ondark,
[data-theme="tahta"] .dk-logo--ondark,
[data-theme="gece"] .dk-logo--ondark { display: inline-block; }

/* "bir · bryekosis · ürünüdür" (v5:90-94) — landing page and user settings. */
.dk-bry-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
}
/* S-SPEC finding 5 / S-23: the 0.55 opacity used to sit on the WHOLE lockup, which turned the two words into
   2.05-2.95:1 text on every theme. The words are real text: they carry the muted colour at full strength
   (>= 4.5:1 on --bg and --panel in all eight themes; the açık landing surface darkens --mut itself, auth.css).
   Only the mark stays quiet: a logotype is exempt from the contrast rule. */
.dk-bry-lockup span { color: var(--mut); }
.dk-bry-lockup img { height: 14px; opacity: 0.55; }

/* --- title bar (v5:37-48) ------------------------------------------------ */
.dk-titlebar__brand { text-decoration: none; gap: 9px; }
.dk-titlebar__brand:hover { text-decoration: none; }
/* The title bar carries the app's OWN logo at full strength and at the design's
   sizes (v5:39-40) — it is not the muted "bir · bryekosis · ürünüdür" byline,
   so it must not borrow .dk-bry-lockup (opacity .55, both images 14px).
   Nothing here may set `display` on the images either: a rule like
   `.dk-titlebar__brand img` outranks `.dk-logo--ondark { display: none }`, and
   the light themes then paint BOTH colourways — the white pair invisible but
   still taking 78px of the bar. The brand is a flex container, which blockifies
   its children anyway, so no display rule is needed. */
.dk-titlebar__logo--icon { height: 18px; }
.dk-titlebar__logo--text { height: 13px; }

/* --- tab strip (v5:102-134) ---------------------------------------------- */
/* v5:105-107 — the home tab carries the mark, white once it is active (or on
   a dark theme, where the strip itself sits on a dark surface). */
.dk-tab__logo { display: none; width: auto; }
.dk-tab--home .dk-tab__logo--dark { display: block; }
.dk-tab--home.is-active .dk-tab__logo--dark { display: none; }
.dk-tab--home.is-active .dk-tab__logo--light { display: block; }
[data-theme="koyu"] .dk-tab--home .dk-tab__logo--dark,
[data-theme="tahta"] .dk-tab--home .dk-tab__logo--dark,
[data-theme="gece"] .dk-tab--home .dk-tab__logo--dark { display: none; }
[data-theme="koyu"] .dk-tab--home .dk-tab__logo--light,
[data-theme="tahta"] .dk-tab--home .dk-tab__logo--light,
[data-theme="gece"] .dk-tab--home .dk-tab__logo--light { display: block; }

.dk-tab__name { max-width: 16ch; }
.dk-tab .unread-badge { flex: none; }
.dk-tabstrip__plus { font-size: 18px; font-weight: 600; line-height: 1; }
.dk-tabstrip__logout { display: flex; flex: none; margin: 0; }

/* The friends-drawer toggle moved out of the floating FAB into the strip; the
   badge must stay *inside* the button (friends-drawer.js:11). */
.dk-tabstrip__friends { position: relative; }
/* …and it has to stay clickable while the drawer is open. The drawer is
   `position: fixed; top: 0; right: 0; height: 100vh` at z-index 210 (with the
   scrim at 200), so it lands squarely on the right end of the tab strip —
   over this very button. `friends-drawer.js:248` wires it as a real toggle
   (a second click closes) and keeps `aria-expanded` on it, so covering it
   breaks both the behaviour and the ARIA contract. `.dk-app` is
   `position: relative` with `z-index: auto`, i.e. no stacking context, so a
   z-index here really does clear the drawer. */
body.friends-drawer-lock .dk-tabstrip__friends { z-index: 220; }
.dk-tabstrip__friends .friends-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--r-full, 999px);
  background: var(--bad);
  /* a dot, not a pill: the count lives in the button's aria-label (friends-drawer.js setBadge) */
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}

/* --- pane variants used by the server-rendered bodies -------------------- */
.dk-pane--sidebar { flex: none; width: 420px; max-width: 42vw; overflow-y: auto; }

/* Full-panel overlay (v5:725-734): materials, schedule, quizzes, settings. */
.dk-overlay { flex: 1; min-width: 0; }
.dk-overlay__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4, 8px);
  padding: var(--sp-5, 10px) var(--sp-6, 13px);
  border-bottom: var(--bw, 1.5px) solid var(--line);
}
.dk-overlay__body { flex: 1; min-height: 0; overflow-y: auto; }

/* Derslik-settings overlay: head pinned, rail + content side by side beneath.
   `.dk-pane` supplies the column today, so this block rule is a no-op on the
   current markup — it is here so the block stands on its own once slice 9
   deletes the legacy `.guild-settings` / `.gs-*` rules from `styles.css`. */
.dk-settings { display: flex; flex-direction: column; min-height: 0; }
.dk-settings__body { flex: 1; display: flex; min-height: 0; }
.dk-settings__rail { flex: none; width: 170px; overflow-y: auto; }

/* --- non-app pages ------------------------------------------------------- */
.dk-workspace--centered { align-items: center; justify-content: center; overflow-y: auto; }
.dk-pane--auth,
.dk-pane--centered {
  margin: auto;
  max-width: min(760px, 100%);
  padding: 24px;
  overflow-y: auto;
}

/* --- bridge: page bodies that have not been migrated yet ------------------
   `styles.css` sized these through `.app-shell > *`. Until slices 3-10 move
   each body onto the dk panes, give the same treatment under `.dk-workspace`
   so nothing collapses. Delete a line here the moment its slice lands.
   ------------------------------------------------------------------------- */
.dk-workspace > .guild-layout,
.dk-workspace > .dm-layout,
.dk-workspace > .home-main,
.dk-workspace > .guild-settings {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.dk-workspace > .guild-layout { gap: var(--sp-4, 8px); }
.dk-workspace > .dm-layout,
.dk-workspace > .home-main,
.dk-workspace > .guild-settings { flex-direction: column; }
.dk-workspace > .home-sidebar { flex: none; min-height: 0; overflow-y: auto; }
.dk-workspace > .guild-layout > .channel-sidebar { flex: none; overflow-y: auto; }
.dk-workspace > .guild-layout > .chat-area { flex: 1; min-width: 0; }
/* The floating call dock's offset is `--dock-lift` in `dk/base.css` — one
   value, declared next to the dock's own rules. It used to be restated here
   as a bare `bottom: 5rem`, which is how it drifted out of step with the
   narrow-screen override in `styles.css`. */

/* S-05: unread messages without a count are a DOT, not a pill with a glyph in it. The count variants keep the pill.
   (notify.js and the server both mark the dot with .seeded; the text "•" stays for the screen reader and for the
   desktop badge sum, which reads digits only.) */
.unread-badge.seeded {
  min-width: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

/* --- secondary text inside the viewer's OWN accent bubble (S-SPEC finding 11, S-23) --------------------------------
   `.muted` / the `--muted` family are tuned for the page (--bg, --panel, --panel2), not for the accent: inside
   `.dk-bubble--mine` the "Çözülemedi" / "Şifreli" placeholders of a message this device cannot decrypt rendered
   `--muted` on `--acc` = 1.1:1 in açık (illegible, axe serious; 1.03-2.06:1 in all eight themes). Every secondary
   text in the bubble now takes the bubble's own on-accent ink, `--accInk`, which each palette already guarantees at
   >= 4.5:1 on `--acc` (dk-css-contract.test.js): açık 4.65, koyu 5.76, kampüs 10.07, tahta 8.15, pano 4.69, kağıt 11.08,
   gece 5.94, gül 4.77. The token family is re-pointed (so anything that spends --mut / --muted / --text-muted in there
   follows) and the named hooks are set explicitly. Links are underlined (no hue is left to tell them from text).
   The @mention pill used a white 22% veil on the accent: with white ink on a light-ink palette that was 3.15 (açık),
   3.26 (pano), 3.34 (gül); it is now the accent pulled 18% toward --ink, which moves AWAY from the ink colour in every
   palette (>= 5.69 in all eight). */
.dk-bubble--mine {
  --mut: var(--accInk);
  --muted: var(--accInk);
  --text-muted: var(--accInk);
}
.dk-bubble--mine .muted,
.dk-bubble--mine .msg-edited,
.dk-bubble--mine .msg-time,
.dk-bubble--mine .dk-msg__time,
.dk-bubble--mine .dk-bubble__time,
.dk-bubble--mine .msg-reply-author,
.dk-bubble--mine .msg-reply-preview { color: var(--accInk); }
.dk-bubble--mine .dk-bubble__time { opacity: 1; }
.dk-bubble--mine .msg-reply { border-left-color: var(--accInk); }
.dk-bubble--mine a,
.dk-bubble--mine a:hover { color: var(--accInk); text-decoration: underline; }
.dk-msg .dk-bubble--mine.msg-content .mention {
  background: color-mix(in srgb, var(--acc) 82%, var(--ink));
  color: var(--accInk);
}