.item-guide {
  --line: #3b4239;
  --ink: #f0efe6;
  --muted: #adb2a5;
  --panel: #252c24;
  box-sizing: border-box;
  width: min(760px, calc(100vw - 24px));
  height: min(650px, calc(var(--overlay-height, 100svh) - 24px));
  max-height: none;
  max-width: none;
  margin: auto;
  padding: 20px;
  border: 1px solid #4b5144;
  border-radius: 18px;
  background: #191f19;
  color: var(--ink);
  overflow: visible;
  box-shadow: 0 24px 70px #0009;
}
.item-guide[open] {
  display: grid;
  grid-template-rows: 48px auto minmax(0, 1fr) 44px;
  gap: 12px;
}
.item-guide[open][data-detail="true"] {
  grid-template-rows: 48px minmax(0, 1fr) 44px;
}
.item-guide::backdrop {
  background: #050906b8;
}
.item-guide * {
  box-sizing: border-box;
  min-width: 0;
}
.guide-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-head h2 {
  flex: 1;
  margin: 0;
  font:
    26px/1.1 Georgia,
    serif;
}
.guide-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #242c23;
  color: var(--ink);
  font-size: 16px;
}
.guide-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 8px;
}
.guide-filters input,
.guide-filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #111710;
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  font:
    16px/1.2 system-ui,
    sans-serif;
}
.guide-filters[hidden] {
  display: none;
}
.guide-controls { display: grid; gap: 8px; }
.guide-controls[hidden] { display: none; }
.guide-tabs { display: flex; gap: 8px; }
.guide-tab { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #20271f; font: 14px/1.2 system-ui, sans-serif; }
.guide-tab[aria-pressed="true"] { background: #373b2b; border-color: #a69870; color: #f0e1bc; }
.playbook-mark { color: #d8bd85; font: 44px/1 Georgia, serif; }
.playbook-example { white-space: pre-line; color: #e8cc90; font: 20px/1.65 ui-monospace, monospace; padding: 8px 0; }
.playbook-detail { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.guide-body {
  height: 100%;
  min-height: 0;
}
.guide-foot {
  display: flex;
  gap: 10px;
  align-items: center;
}
.guide-count {
  color: var(--muted);
  font:
    12px/1.4 system-ui,
    sans-serif;
}
.guide-back {
  border: 1px solid var(--line);
  background: #252c24;
  color: var(--ink);
  border-radius: 8px;
  min-height: 44px;
  padding: 9px 12px;
  white-space: nowrap;
  font:
    13px/1.2 system-ui,
    sans-serif;
}
.guide-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  text-align: left;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px solid #5c6148;
  border-radius: 12px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 100% 0%, #55513c50, transparent 65%), #232a21;
  touch-action: pan-y pinch-zoom;
}
.guide-item-mark {
  display: block;
  color: #d8bd85;
  width: 56px;
  height: 56px;
}
.guide-item-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.guide-kicker {
  font:
    11px/1.4 ui-monospace,
    monospace;
  color: #cbbb96;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}
.guide-item h3,
.guide-detail h3 {
  font:
    28px/1.1 Georgia,
    serif;
  margin: 0;
}
.guide-open {
  font:
    13px/1.4 system-ui,
    sans-serif;
  color: #c9caba;
}
.guide-detail {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.guide-detail h3 {
  font-size: 23px;
  margin: 8px 0 12px;
}
.guide-detail p:not(.guide-kicker) {
  font:
    15px/1.65 system-ui,
    sans-serif;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.guide-detail.overview {
  background: #252d22;
}
.guide-detail.overview .guide-item-mark {
  float: right;
}
.guide-empty {
  align-self: center;
  text-align: center;
  color: var(--muted);
  font:
    15px/1.6 system-ui,
    sans-serif;
}
.item-guide button {
  cursor: pointer;
  touch-action: manipulation;
}
.item-guide button[data-swipe-card] {
  touch-action: pan-y pinch-zoom;
}
.item-guide button:focus-visible,
.item-guide input:focus-visible,
.item-guide select:focus-visible {
  outline: 2px solid #e3c78f;
  outline-offset: 3px;
}
.item-guide button:active {
  transform: scale(0.98);
}
@media (max-width: 500px) {
  .item-guide {
    padding: 12px;
  }
  .item-guide[open] {
    gap: 8px;
  }
  .guide-head h2 {
    font-size: 23px;
  }
  .guide-filters {
    grid-template-columns: minmax(0, 1fr) 105px;
  }
  .guide-filters select {
    font-size: 16px;
  }
  .guide-item {
    padding: 18px;
    gap: 12px;
  }
  .guide-foot {
    gap: 8px;
  }
  .guide-count {
    font-size: 11px;
  }
}
@media (max-height: 450px) and (min-width: 600px) {
  .item-guide {
    width: min(760px, calc(100vw - 24px));
    padding: 10px 14px;
  }
  .item-guide[open] {
    grid-template-rows: 44px auto minmax(0, 1fr) 44px;
    gap: 5px;
  }
  .item-guide[open][data-detail="true"] {
    grid-template-rows: 44px minmax(0, 1fr) 44px;
  }
  .guide-item {
    padding: 10px;
    gap: 5px;
  }
  .guide-item-mark {
    width: 34px;
    height: 34px;
  }
  .guide-controls { grid-template-columns: 220px minmax(0, 1fr); gap: 8px; }
  .item-guide[data-guide-view="playbook"] .guide-controls { grid-template-columns: 1fr; }
  .playbook-mark { grid-row: 1 / 4; font-size: 30px; }
  .playbook-detail { padding: 8px 14px; }
  .playbook-detail h3 { margin: 4px 0; font-size: 20px; }
  .playbook-detail p:not(.guide-kicker) { font-size: 14px; line-height: 1.5; margin: 4px 0; }
  .playbook-example { font-size: 18px; line-height: 1.4; padding: 4px 0; }
  .guide-item h3 {
    font-size: 22px;
  }
  .guide-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 8px 14px;
  }
  .guide-item .guide-item-mark {
    grid-row: 1 / 4;
  }
  .guide-item .guide-kicker,
  .guide-item h3,
  .guide-item .guide-open {
    grid-column: 2;
    width: auto;
  }
  .guide-back {
    position: relative;
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .item-guide button:active {
    transform: none;
  }
}