/*
 * Interaction signifiers
 *
 * Clickability must be visible before hover.  Shape, border, a short action
 * verb and a direction/state mark carry the meaning; colour is only support.
 */

:root {
  --signifier-accent: #b63f2f;
  --signifier-focus: #efbd6b;
  --signifier-edge: rgba(20, 31, 48, .34);
}

:where(a[href], button:not(:disabled), summary, select, [role="button"], label:has(input[type="checkbox"], input[type="radio"])) {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(182, 63, 47, .18);
}

:where(a[href], button, summary, select, input, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--signifier-focus);
  outline-offset: 3px;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* A link inside reading matter must look like a link without requiring hover. */
:where(main, .site-footer) :where(p, li, dd, figcaption) > a[href]:not(.button) {
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

.text-link,
.unit-goal-disclosure aside a,
.curriculum-disclosures a,
.footer-nav a,
.footer-about {
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .25em;
}

.footer-nav a::after,
.arrow-link::after {
  content: "  →";
  font-family: var(--mono);
}

.footer-about::after {
  content: "  ↗";
  font-family: var(--mono);
}

/* The header is a tab row: a persistent baseline distinguishes navigation. */
.site-nav a:not(.teacher-entry) {
  box-shadow: inset 0 -1px 0 rgba(20, 31, 48, .24);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -4px 0 var(--signifier-accent);
}

/* Whole-card links carry their destination cue in the resting state. */
.learning-mode-card,
.category-chip-card,
.topic-media-links a,
.ontology-relations a,
.ontology-applications a {
  position: relative;
}

.learning-mode-card {
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.learning-mode-card strong {
  text-decoration-line: underline;
  text-underline-offset: .25em;
}

.category-chip-card {
  padding-right: 3.6rem;
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.category-chip-card::after,
.topic-media-links a::after,
.ontology-relations a::after,
.ontology-applications a::after {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  content: "→";
  font: 800 .72rem/1 var(--mono);
}

.category-chip-card::after {
  right: 1rem;
  width: 1.8rem;
  height: 1.8rem;
}

.topic-media-links a {
  padding-right: 2.7rem;
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.topic-media-links a::after {
  right: .8rem;
  width: 1.55rem;
  height: 1.55rem;
}

.ontology-relations a::after,
.ontology-applications a::after {
  top: .8rem;
  right: .8rem;
  width: 1.6rem;
  height: 1.6rem;
}

/* A concept card opens a dialog, so it names that action explicitly. */
.knowledge-card {
  position: relative;
  padding-bottom: 3.7rem;
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.knowledge-card .interaction-cue {
  position: absolute;
  right: 1.2rem;
  bottom: 1.15rem;
  display: inline-flex;
  min-height: 2rem;
  padding: .45rem .7rem;
  gap: .65rem;
  align-items: center;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  font: 800 .64rem/1 var(--sans);
}

.knowledge-card:hover .interaction-cue,
.knowledge-card:focus-visible .interaction-cue {
  color: var(--ink);
  background: var(--signifier-focus);
  border-color: var(--signifier-focus);
}

/* Index and lesson tabs show direction/current state without relying on colour. */
.category-nav button,
.reading-index button,
.learning-beats button {
  position: relative;
  padding-right: 3.2rem;
}

.category-nav button::after,
.reading-index button::after,
.learning-beats button::after {
  position: absolute;
  right: .65rem;
  color: currentColor;
  content: "→";
  font: 800 .65rem/1 var(--mono);
}

.category-nav button[aria-pressed="true"]::after,
.reading-index button[aria-current="true"]::after,
.learning-beats button.is-current::after {
  content: "✓";
}

.learning-beats button:disabled::after {
  content: "—";
}

.category-nav button:not([aria-pressed="true"]),
.reading-index button:not([aria-current="true"]),
.learning-beats button.is-open:not(.is-current),
.unit-route button:not(.is-current),
.next-concept {
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.unit-route button > small {
  display: inline-flex;
  width: fit-content;
  padding-bottom: .18rem;
  border-bottom: 1px solid currentColor;
}

.unit-route button.is-current > small::before {
  content: "✓ ";
}

/* Selection cards name both the available action and the chosen state. */
:is(
  .route-candidate-choices,
  .article-check-choices,
  .foundation-context-choices,
  .foundation-check-simple,
  .decision-pair,
  .worksheet-review-choices,
  .experiment-interpretation,
  .experiment-prediction,
  .system-lab-decisions,
  .system-lab-interpretation,
  .system-lab-cases,
  .office-choice-list
) button {
  position: relative;
  padding-bottom: 2.8rem;
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

:is(
  .route-candidate-choices,
  .article-check-choices,
  .foundation-context-choices,
  .foundation-check-simple,
  .decision-pair,
  .worksheet-review-choices,
  .experiment-interpretation,
  .experiment-prediction,
  .system-lab-decisions,
  .system-lab-interpretation,
  .system-lab-cases,
  .office-choice-list
) button::after {
  position: absolute;
  right: .85rem;
  bottom: .72rem;
  padding-bottom: .14rem;
  border-bottom: 1px solid currentColor;
  content: "選ぶ  →";
  font: 800 .62rem/1 var(--sans);
  letter-spacing: .04em;
}

:is(
  .route-candidate-choices,
  .article-check-choices,
  .foundation-context-choices,
  .foundation-check-simple,
  .decision-pair,
  .worksheet-review-choices,
  .experiment-interpretation,
  .experiment-prediction,
  .system-lab-decisions,
  .system-lab-interpretation,
  .system-lab-cases,
  .office-choice-list
) button[aria-pressed="true"]::after {
  content: "選択中  ✓";
}

/* Slide choices use the same cue, scaled to the 16:9 canvas. */
.slide-response-choices button,
.learner-choice-options button {
  position: relative;
  padding-right: max(2.45cqw, 2.4rem);
  box-shadow: inset 0 -.18cqw 0 rgba(20, 31, 48, .42);
}

.slide-response-choices button::after,
.learner-choice-options button::after {
  position: absolute;
  top: 50%;
  right: max(.38cqw, .35rem);
  display: grid;
  width: max(1.15cqw, 1.25rem);
  height: max(1.15cqw, 1.25rem);
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  content: "→";
  font: 800 max(.62cqw, .8125rem)/1 var(--sans);
  transform: translateY(-50%);
}

.slide-response-choices button[aria-pressed="true"]::after,
.learner-choice-options button[aria-pressed="true"]::after {
  color: var(--ink);
  background: var(--signifier-focus);
  content: "✓";
}

.filter-chip[aria-pressed="true"]::before,
.teacher-auth-tabs button[aria-pressed="true"]::before,
.teacher-toolbar button[aria-pressed="true"]::before,
.teacher-planner > nav button[aria-pressed="true"]::before,
.office-device-switch button[aria-pressed="true"]::before {
  content: "✓ ";
}

.office-app-tab {
  padding-bottom: 3.2rem;
  box-shadow: inset 0 -3px 0 var(--signifier-edge);
}

.office-app-tab::after,
.office-app-tab[aria-pressed="true"]::after {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  width: auto;
  height: auto;
  padding-bottom: .16rem;
  color: currentColor;
  background: transparent;
  border-bottom: 2px solid var(--app-color);
  content: "選ぶ  →";
  font: 800 .68rem/1 var(--sans);
}

.office-app-tab[aria-pressed="true"]::after {
  content: "表示中  ✓";
}

.office-shot button,
.office-workshop-shot button {
  position: relative;
}

.office-shot button::after,
.office-workshop-shot button::after {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  display: inline-flex;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  align-items: center;
  color: var(--ink);
  background: var(--signifier-focus);
  border: 1px solid var(--ink);
  content: "拡大  ⤢";
  font: 800 .72rem/1 var(--sans);
  box-shadow: .2rem .2rem 0 rgba(0, 0, 0, .3);
}

/* Disclosure rows should never look like static headings. */
details > summary {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: .08em;
  text-underline-offset: .3em;
}

details[open] > summary {
  text-decoration-style: solid;
}

.term-ledger summary {
  position: relative;
  padding-right: 3.2rem;
}

.term-ledger summary::after {
  position: absolute;
  right: 1rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  content: "+";
  font: 800 .85rem/1 var(--mono);
}

.term-ledger details[open] summary::after {
  content: "−";
}

@media (hover: hover) {
  :where(.knowledge-card, .learning-mode-card, .category-chip-card, .topic-media-links a, button:not(:disabled), summary):hover {
    text-decoration-thickness: .12em;
  }
}

@media (max-width: 760px) {
  .knowledge-card .interaction-cue {
    right: .9rem;
    bottom: .9rem;
  }

  .footer-nav a::after,
  .arrow-link::after {
    content: " →";
  }


  .footer-about::after {
    content: " ↗";
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary) {
    transition: none !important;
  }
}