/* The app's own styles sit in a cascade layer, so the card editor's scoped
   card styles (unlayered) always win over them inside a card. See editor.js. */
@layer app {
/*
 * The shell: a slim icon rail down the left (KAGE's dock), a glass bar along
 * the top, and the page. On a phone the rail becomes a tab bar at the thumb.
 */

.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 36px var(--gutter) 96px; }
.page--wide { max-width: 1600px; }

/* ---------- the dock ---------- */

.dock {
  position: sticky; top: 0; align-self: flex-start;
  width: var(--dock-w); height: 100vh; height: 100dvh; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-bottom: 14px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  z-index: 40;
}
/* The mark, in a square cell whose rule meets the bar's. */
.dock__brand {
  display: grid; place-items: center; flex: none;
  width: 100%; height: var(--topbar-h);
  background: color-mix(in oklab, var(--bg-elevated) 70%, var(--surface-hover));
  border-bottom: 1px solid var(--border-soft);
  position: relative; overflow: hidden;
  transition: background-color var(--quick);
}
.dock__brand:hover { background: color-mix(in oklab, var(--surface-hover) 86%, var(--accent)); }
.dock__brand:focus-visible { outline-offset: -3px; }
/* The fan: sized by width (it's 1.625 times as wide as tall), and set a
   hair low in its cell — its mass sits high, so true center looks high. */
.dock__mark { display: block; width: 36px; height: auto; position: relative; z-index: 1; translate: 0 1px; transition: transform var(--quick); }
.dock__brand:hover .dock__mark { transform: scale(1.06); }
.dock__nav, .dock__foot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.dock__nav { padding-top: 10px; }
.dock__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); }

.dock__item {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 44px; flex: none;
  border-radius: 12px;
  color: var(--text-muted);
  transition: background-color var(--quick), color var(--quick);
}
.dock__item:hover { background: var(--surface-hover); color: var(--text); }
.dock__item .icon { width: 22px; height: 22px; }
.dock__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.dock__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.dock__badge {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-strong); color: #fff;
  font: 700 10.5px/1 var(--font); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg-elevated);
}
.dock__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in oklab, var(--neon-a) 60%, var(--surface)), color-mix(in oklab, var(--neon-b) 50%, var(--surface)));
  color: #fff; font: 650 13px/1 var(--font);
}

/* Names, on demand: CSS-only tips that also appear on keyboard focus. */
.tip {
  position: absolute; left: calc(100% + 14px); top: 50%;
  transform: translate(-4px, -50%);
  padding: 7px 11px; border-radius: 8px;
  background: var(--surface-active); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font: 550 12.5px/1 var(--font); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
  z-index: 100;
}
.tip kbd { height: 18px; min-width: 18px; margin-left: 8px; font-size: 10.5px; }
.tips-off .tip { opacity: 0 !important; }
/* A bridge over the gap, so the pointer can move onto a tip without losing it. */
.tip::before { content: ""; position: absolute; right: 100%; top: -6px; bottom: -6px; width: 18px; }
.dock__item:hover .tip { pointer-events: auto; }
.dock__item:hover .tip, .dock__item:focus-visible .tip {
  opacity: 1; transform: translate(0, -50%); transition-delay: 0.08s;
}

/* ---------- topbar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gutter) 0 24px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}
.topbar__brand { display: none; }
.topbar__crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font: 550 14px/1 var(--font); color: var(--text-muted); }
.topbar__crumbs a:hover { color: var(--text); }
.topbar__crumbs .sep { color: var(--text-faint); }
.topbar__crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }

.search { position: relative; width: min(420px, 38vw); }
.search__toggle { display: none; }
.search__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; width: 17px; height: 17px; }
.search__input {
  width: 100%; height: 40px; padding: 0 40px 0 40px;
  border-radius: 12px; border: 1px solid var(--border-soft);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--text);
  transition: border-color var(--quick), background-color var(--quick), box-shadow var(--quick);
}
.search__input::placeholder { color: var(--text-faint); }
.search__input:hover { border-color: var(--border); }
.search__input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__key { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search__input:focus ~ .search__key, .search__input:not(:placeholder-shown) ~ .search__key { display: none; }
.search__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: min(460px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 80px)); overflow: auto;
  padding: 6px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.search__group + .search__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.search__label { padding: 8px 10px 4px; font: var(--type-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); }
.search__item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
}
.search__item[aria-selected="true"] { background: var(--surface-hover); }
.search__text { display: grid; min-width: 0; }
.search__text .q { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__text .a { color: var(--text-muted); font: var(--type-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Matches read in bold, not highlighter. */
.search__item mark { background: none; color: inherit; font-weight: 700; }
.search__item .q mark { color: var(--accent); }
.search__meta { color: var(--text-faint); font: var(--type-caption); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* A deck is its plate in miniature; a tag its hash; a card a dot in its deck's color. */
.search__plate {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in oklab, var(--deck-deep) 86%, var(--deck)); color: #fff;
  font: 600 14px/1 var(--font);
}
.search__plate.is-cjk { font: 700 14px/1 var(--font-mincho); }
.search__hash { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--text-muted); font: 650 15px/1 var(--font); }
.search__dot { display: grid; place-items: center; width: 28px; height: 28px; }
.search__dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--deck); }
.search__tip { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font: var(--type-caption); }
.search__tip kbd { margin: 0 2px; }
.search__empty { padding: 18px 14px; color: var(--text-muted); font: var(--type-caption); text-align: center; }

/* A guest's standing: said plainly, beside one ordinary button. */
.guest-note { color: var(--text-muted); font: 500 13px/1 var(--font); white-space: nowrap; }

.account-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 5px; border-radius: 12px; color: var(--text-dim); transition: background-color var(--quick); }
.account-btn:hover { background: var(--surface-hover); color: var(--text); }
.account-btn .name { font: 550 13.5px/1 var(--font); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- focus mode (studying) ---------- */

.shell--focus .dock, .shell--focus .topbar, .shell--focus .tabbar { display: none; }

/* ---------- phones ---------- */

.tabbar { display: none; }

@media (max-width: 820px) {
  :root { --rail-w: 0px; }
  .dock { display: none; }
  .topbar { padding: 0 12px 0 16px; gap: 8px; }
  .topbar__brand { display: inline-flex; align-items: center; height: 44px; }
  .topbar__mark { display: block; width: 32px; height: auto; translate: 0 1px; }
  .topbar__crumbs { display: none; }
  /* A button that opens into the field, rather than a field too narrow to use. */
  .search { width: auto; flex: 0 0 auto; margin-left: auto; }
  .search__toggle { display: inline-grid; }
  .search .search__input, .search .search__icon { display: none; }
  .search.is-open { position: absolute; left: 12px; right: 12px; top: 8px; z-index: 5; }
  .search.is-open .search__toggle { display: none; }
  .search.is-open .search__input, .search.is-open .search__icon { display: block; }
  .search__key { display: none; }
  .guest-note { display: none; }
  .account-btn .name { display: none; }
  .page { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--border-soft);
  }
  .tabbar__item {
    position: relative;
    display: grid; justify-items: center; gap: 3px; padding: 6px 0;
    border-radius: 12px; color: var(--text-muted);
    font: 600 10.5px/1 var(--font); letter-spacing: 0.02em;
  }
  .tabbar__item .icon { width: 22px; height: 22px; }
  .tabbar__item[aria-current="page"] { color: var(--accent); }
  .tabbar__item .dock__badge { top: 0; right: calc(50% - 22px); }
}

html[data-searchable="false"] [data-search-box] { visibility: hidden; }
}