/* Public reading layouts. Fonts, colours, header and controls come from
   auth.css and theme.css, shared with the existing account and plans pages. */
.public-guide a { text-underline-offset: .2em; }
.public-guide .skip-link {
  position: absolute;
  left: 1rem;
  top: -8rem;
  z-index: 2;
  padding: .75rem;
  background: var(--pl-surface);
}
.public-guide .skip-link:focus { top: 1rem; }
.public-guide .guide-shell { margin-top: 18px; }
.public-guide .breadcrumbs { color: var(--pl-muted); font-size: var(--pl-type-copy); }
.public-guide .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.public-guide .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; }
.public-guide .guide-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; }
.public-guide .byline { margin: 0; color: var(--pl-muted); font-size: var(--pl-type-copy); }
.public-guide .guide-layout { display: grid; gap: 18px; align-items: start; }
.public-guide .guide-layout.has-contents { grid-template-columns: 250px minmax(0, 1fr); }
.public-guide .guide-body { min-width: 0; }
.public-guide .guide-body > .auth-panel { margin: 0 0 18px; scroll-margin-top: 18px; }
.public-guide .guide-body > .auth-panel:last-child { margin-bottom: 0; }
.public-guide .contents { margin: 0; }
.public-guide .contents ul { list-style: none; margin-bottom: 0; padding-left: 0; }
.public-guide .contents a { display: inline-block; padding: .3rem 0; }
.public-guide .guide-shell h2 { margin: 0 0 1rem; font-size: var(--pl-type-section); line-height: 1.2; }
.public-guide .guide-shell h3 { margin: 0 0 .7rem; font-size: var(--pl-type-card); line-height: 1.25; }
.public-guide .contents h2 { font-size: var(--pl-type-card); }
.public-guide .guide-body p,
.public-guide .guide-body li,
.public-guide .guide-cards p,
.public-guide .guide-cta p { max-width: 74ch; font-size: var(--pl-type-copy); line-height: 1.6; }
.public-guide .guide-body p { margin: .75rem 0 1rem; }
.public-guide .guide-body li { margin: .4rem 0; }
.public-guide .guide-body a,
.public-guide .contents a,
.public-guide .breadcrumbs a,
.public-guide .byline a,
.public-guide .guide-footer a { text-decoration: underline; }
.public-guide .guide-shell a:hover { text-decoration: underline; }
.public-guide .guide-table { max-width: 100%; overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--pl-line); }
.public-guide table { width: 100%; border-collapse: collapse; font-size: var(--pl-type-copy); text-align: left; }
.public-guide caption { padding: .7rem 1rem; text-align: left; font-weight: 700; }
.public-guide th,
.public-guide td { padding: .8rem 1rem; border-top: 1px solid var(--pl-line); vertical-align: top; min-width: 6rem; }
.public-guide thead th { background: var(--pl-surface-muted); }
.public-guide tbody th { font-weight: 600; }
.public-guide .guide-note { color: var(--pl-muted); }
.public-guide .related { margin-top: 24px; }
.public-guide .guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 16px; }
.public-guide .guide-cards .auth-panel { margin: 0; }
.public-guide .guide-cards h3 a { display: block; }
.public-guide .guide-cards p { color: var(--pl-muted); margin-bottom: 0; }
.public-guide .guide-cta { margin-top: 24px; }
.public-guide .cta-links,
.public-guide .guide-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.public-guide .guide-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--pl-line); color: var(--pl-muted); font-size: var(--pl-type-copy); }
.public-guide .guide-footer nav a { display: inline-flex; align-items: center; min-height: var(--pl-control-height); }
.public-guide .guide-shell,
.public-guide .account-hub-intro { overflow-wrap: anywhere; }
.public-guide .pattern-figures,
.public-guide .pattern-rule-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.public-guide .pattern-figure { margin: 0; min-width: 0; border: 1px solid var(--pl-line); background: var(--pl-surface); }
.public-guide .pattern-figure > h3 { margin: 0; padding: 16px 14px 8px; }
.public-guide .pattern-diagram { display: block; width: 100%; height: auto; background: var(--pl-paper); }
.public-guide .pattern-diagram text { fill: var(--pl-muted); font-family: inherit; font-size: 22px; }
.public-guide .pattern-diagram .diagram-axis-label { font-size: 20px; }
.public-guide .diagram-grid { stroke: var(--pl-line); stroke-width: 1; }
.public-guide .diagram-boundary { fill: none; stroke-width: 2.5; }
.public-guide .diagram-support { stroke: var(--pl-positive); stroke-dasharray: 8 5; }
.public-guide .diagram-resistance { stroke: var(--pl-negative); stroke-dasharray: 3 4; }
.public-guide .diagram-level { stroke: var(--pl-accent); stroke-dasharray: 10 4 2 4; }
.public-guide .diagram-average { stroke: var(--pl-ai); stroke-width: 3; }
.public-guide .diagram-price { fill: none; stroke: var(--pl-ink); stroke-width: 2.5; stroke-linejoin: round; }
.public-guide .diagram-last-point { fill: var(--pl-ink); stroke: var(--pl-surface); stroke-width: 1.5; }
.public-guide .diagram-signal-band { fill: var(--pl-line); opacity: .5; }
.public-guide .diagram-candle { stroke-width: 2.5; }
.public-guide .diagram-candle-up { stroke: var(--pl-positive); fill: var(--pl-surface); }
.public-guide .diagram-candle-down { stroke: var(--pl-negative); fill: var(--pl-negative); }
.public-guide .pattern-figure figcaption { padding: 4px 14px 14px; }
.public-guide .pattern-figure .diagram-key,
.public-guide .pattern-figure .diagram-detail,
.public-guide .pattern-figure .diagram-notice { font-size: var(--pl-type-copy); color: var(--pl-muted); }
.public-guide .pattern-figure .diagram-detail { margin-top: -.5rem; }
.public-guide .diagram-legend { padding: 0; margin: 12px 0; list-style: none; }
.public-guide .diagram-legend li { display: flex; gap: 8px; align-items: baseline; }
.public-guide .line-key { flex: 0 0 24px; display: inline-block; width: 24px; border-top: 3px solid var(--pl-ink); }
.public-guide .line-key.diagram-support { border-top-color: var(--pl-positive); border-top-style: dashed; }
.public-guide .line-key.diagram-resistance { border-top-color: var(--pl-negative); border-top-style: dotted; }
.public-guide .line-key.diagram-level { border-top-color: var(--pl-accent); border-top-style: dashed; }
.public-guide .line-key.diagram-average { border-top-color: var(--pl-ai); }
.public-guide .candle-key-up,
.public-guide .candle-key-down { display: inline-block; width: 10px; height: 13px; margin-right: 8px; border: 2px solid var(--pl-positive); vertical-align: -1px; }
.public-guide .candle-key-down { border-color: var(--pl-negative); background: var(--pl-negative); }
.public-guide .diagram-notes { padding-left: 20px; }
.public-guide .diagram-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding-top: 12px; border-top: 1px solid var(--pl-line); }
.public-guide .diagram-values dt { color: var(--pl-muted); font-size: var(--pl-type-copy); }
.public-guide .diagram-values dd { margin: 3px 0 0; font-weight: 700; font-size: var(--pl-type-copy); font-variant-numeric: tabular-nums; }
.public-guide .pattern-figure .diagram-notice { margin-bottom: 0; }
.public-guide .pattern-rule-card { padding: 16px; border: 1px solid var(--pl-line); min-width: 0; }
.public-guide .pattern-rule-card dl { margin-bottom: 0; font-size: var(--pl-type-copy); line-height: 1.6; }
.public-guide .pattern-rule-card dt { font-weight: 700; margin-top: 12px; }
.public-guide .pattern-rule-card dd { margin: 4px 0 0; }
@media (max-width: 900px) {
  .public-guide .guide-layout.has-contents { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .public-guide .pattern-figures,
  .public-guide .pattern-rule-cards { grid-template-columns: minmax(0, 1fr); }
  .public-guide .guide-summary { align-items: flex-start; flex-direction: column; }
  .public-guide .cta-links { align-items: stretch; flex-direction: column; }
}