/* Windows 2000/XP-era edge treatments, using the existing lemon/olive palette.
   Presentation only: no layout, content, typography, or interaction changes. */
:root {
  --edge-light: #fffef4;
  --edge-shadow: #a6aa86;
  --edge-deep: #777f61;
  --edge-green-light: #8d9e79;
  --edge-green-dark: #35462f;
  --raised-edge: inset 1px 1px 0 var(--edge-light),
                 inset -1px -1px 0 var(--edge-shadow);
  --sunken-edge: inset 1px 1px 0 var(--edge-shadow),
                 inset -1px -1px 0 var(--edge-light);
}

/* Classic rectangular panels; an etched edge separates groups from controls. */
.card, .mini-card, .article-item, .entry, .paired, .author-panel,
.action, .recovery, .explanation, .comparison, .iteration, .branch, .caution {
  border-radius: 2px;
}
.card, .mini-card, .article-item, .paired, .author-panel {
  box-shadow: var(--raised-edge);
}
.action, .recovery, .comparison, .explanation {
  box-shadow: var(--sunken-edge);
}
.branch, .caution {
  box-shadow: inset 0 1px 0 var(--edge-light), inset 0 -1px 0 var(--edge-shadow);
}
.iteration {
  border-style: solid;
  box-shadow: var(--sunken-edge);
}
blockquote {
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--edge-shadow), inset 0 -1px 0 var(--edge-light);
}

/* Raised push buttons retain their original fills and tap areas. */
.button, .secondary-button, .urgent, .share-actions button,
.perspectives a, .entry, .chip {
  border-radius: 2px;
  border-color: var(--edge-deep);
  box-shadow: var(--raised-edge);
}
.button, .perspectives a.selected {
  border-color: var(--edge-green-dark);
  box-shadow: inset 1px 1px 0 var(--edge-green-light),
              inset -1px -1px 0 var(--edge-green-dark);
}
.button:hover, .secondary-button:hover, .urgent:hover,
.share-actions button:hover, .perspectives a:hover, .entry:hover, .chip:hover {
  text-decoration: none;
  outline: 1px solid var(--edge-shadow);
  outline-offset: 1px;
}
.button:active, .secondary-button:active, .urgent:active,
.share-actions button:active, .perspectives a:active, .entry:active, .chip:active {
  box-shadow: var(--sunken-edge);
}
.button:active, .perspectives a.selected:active {
  box-shadow: inset 1px 1px 0 var(--edge-green-dark),
              inset -1px -1px 0 var(--edge-green-light);
}

/* Inset input wells, compact labels, and a raised disclosure control. */
.glossary-search input {
  border-radius: 1px;
  border-color: var(--edge-deep);
  box-shadow: var(--sunken-edge);
}
.tag, .perspective-label {
  border-radius: 1px;
  box-shadow: var(--sunken-edge);
}
.page-nav {
  border-radius: 2px;
  border-color: var(--edge-deep);
  box-shadow: var(--raised-edge);
}
.page-nav[open] {
  box-shadow: var(--sunken-edge);
}
.page-nav > nav {
  box-shadow: inset 0 1px 0 var(--edge-light);
}
.page-nav > nav > a:hover {
  border-radius: 0;
}
.explanation > summary::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  height: 18px;
  border: 1px solid var(--edge-deep);
  background: var(--cream);
  box-shadow: var(--raised-edge);
  font-size: 16px;
  line-height: 1;
}

/* Etched horizontal rules, rather than soft modern dividers. */
.site-header, .family, .context, .grounded, .forthcoming, .sub-explanation {
  border-bottom-color: var(--edge-shadow);
  box-shadow: 0 1px 0 var(--edge-light);
}
.sub-explanation.article-item {
  box-shadow: var(--raised-edge);
}
.explanation {
  box-shadow: var(--sunken-edge);
}
.ideas, .reference, footer, .glossary-row {
  border-top-color: var(--edge-shadow);
}

/* Preserve a strong, contemporary keyboard focus cue over all hover states. */
a:focus-visible, button:focus-visible, summary:focus-visible,
.glossary-search input:focus-visible {
  outline: 3px solid #7a6c2d;
  outline-offset: 4px;
}
@media (forced-colors: active) {
  .tag, .perspective-label { border: 1px solid CanvasText; }
}