/* =============================================================================
   The paradigm chart as a plate from a printed grammar (js/paradigm.js), on
   Paradigms and in the full entry's Paradigm ribbon. Tokens and the card
   pieces (.ccard__cat, .ccard__hole) come from catalogue.css, loaded first.
   ============================================================================= */

/* ---- Choosing a verb: small catalogue cards ------------------------------ */
.verb-list {
  display: grid; gap: .9rem; max-width: none; margin: var(--space-3) 0 var(--space-5); padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  border: 0; background: none; box-shadow: none;
}
.verb-list[hidden] { display: none; }
.verb-list li { list-style: none; }
.verb-list .verb-option {
  display: flex; flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; height: 100%;
  padding: .45rem .9rem .7rem; border: 0; border-radius: 3px; text-align: start; cursor: pointer;
  color: var(--cat-ink);
  background:
    linear-gradient(var(--cat-red), var(--cat-red)) 0 2.9rem / 100% 1.5px no-repeat,
    linear-gradient(180deg, var(--cat-paper-hi), var(--cat-paper));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 5px 12px var(--cat-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.verb-list .verb-option:hover, .verb-list .verb-option:focus-visible {
  transform: translateY(-4px); background-color: transparent;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 12px 20px var(--cat-shadow);
}
.verb-list .verb-option:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; }
.verb-list .verb-option .syriac { font-size: 1.7rem; line-height: 2.4rem; text-align: right; }
.verb-list .verb-option .text-muted {
  padding-top: .35rem; color: var(--cat-ink) !important;
  font: .85rem/1.45 'Courier Prime', ui-monospace, monospace;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Beside the plate: the verb's card and the note slip ----------------- */
.paradigm { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: var(--space-6); }
.paradigm__notes { display: grid; gap: 1.4rem; align-content: start; }
.vcard {
  --pad: 1.1rem;
  position: relative; margin-top: 1rem; padding: .55rem var(--pad) 1.9rem;
  color: var(--cat-ink); border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(1.5rem - 1px), var(--cat-rule) calc(1.5rem - 1px) 1.5rem),
    linear-gradient(180deg, var(--cat-paper-hi), var(--cat-paper));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 22px var(--cat-shadow);
}
.vcard .ccard__cat { inset-inline-end: 1rem; }
.vcard__top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
  margin: 0 calc(-1 * var(--pad)) .35rem; padding: 0 var(--pad) .2rem;
  border-bottom: 1.5px solid var(--cat-red);
  background: linear-gradient(180deg, var(--cat-paper-hi), var(--cat-paper)); border-radius: 4px 4px 0 0;
}
.vcard__no { padding-bottom: .45rem; font: .74rem/1 'Courier Prime', ui-monospace, monospace; color: var(--cat-ink-muted); }
.vcard .vcard__head { margin: 0; font-size: 2.8rem; font-weight: 400; line-height: 1.45; }
.vcard__vowels { margin: 0; font: .88rem/1.5rem 'Courier Prime', ui-monospace, monospace; }
.vcard__open { display: inline-block; margin-top: .3rem; font-size: var(--font-size-sm); font-weight: 600; }

/* V4's grammar notes for the stem class, on a typed slip. */
.note-slip {
  position: relative; padding: .9rem 1.1rem 1rem; border-radius: 2px; color: var(--cat-ink);
  background: color-mix(in srgb, var(--cat-manila) 22%, var(--cat-paper-hi));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 10px var(--cat-shadow);
  transform: rotate(-.35deg);
}
.note-slip__head {
  margin: 0 0 .4rem; font: 700 .76rem/1.4 'Courier Prime', ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cat-rubric);
}
.note-slip__head .syriac { font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--cat-ink); }
.note-slip__vowels { margin: 0 0 .5rem; font: .82rem/1.45 'Courier Prime', ui-monospace, monospace; }
.note-slip .prose { font-size: var(--font-size-sm); line-height: 1.6; color: var(--cat-ink); max-width: none; }
.note-slip .prose p { margin: 0 0 .55rem; }
.note-slip .prose .syriac { font-size: 1.2em; }

/* ---- The plate ----------------------------------------------------------- */
.plate {
  min-width: 0; padding: 1.1rem 1.3rem 1.3rem; border-radius: 3px; color: var(--cat-ink);
  background: linear-gradient(180deg, var(--cat-paper-hi), var(--cat-paper));
  box-shadow:
    2px 2px 0 -1px var(--cat-paper), 3px 3px 0 -1px color-mix(in srgb, var(--cat-ink) 22%, transparent),
    0 12px 26px rgba(0, 0, 0, .4);
}
/* In the full entry the lectern's page is already paper. */
.lectern .plate { padding: 0; background: none; box-shadow: none; }
.lectern .note-slip { transform: none; }

/* On wide screens the plate does not scroll sideways, so its stem headings can
   stay in view at the top of the window while the reader scrolls down (the site
   header scrolls away: it is sticky only inside its own wrapper). */
.paradigm__chart { overflow-x: auto; }
@media (min-width: 1100px) { .paradigm__chart { overflow: visible; } }
/* The lectern column is narrower than the plate: there it scrolls sideways. */
.lectern .paradigm__chart { overflow-x: auto; }
.lectern .plate .paradigm-table thead th { position: static; }

.plate .paradigm-table {
  display: table; overflow: visible; font-size: inherit;   /* layout.css made it a scrolling block */
  width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; margin: 0;
  font-variant-numeric: lining-nums;
}
.plate .paradigm-table th, .plate .paradigm-table td {
  border: 0; border-bottom: 1px solid var(--cat-rule); background: transparent; color: var(--cat-ink);
  padding: .35rem .55rem; text-align: center; vertical-align: middle;
}
/* The stems: ribbon-coloured heads, the six colours of the lectern's ribbons. */
.plate .paradigm-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: .45rem .5rem .4rem; border-bottom: 0;
  background: var(--cat-paper-hi); box-shadow: 0 1px 0 var(--cat-rule);
}
.plate .paradigm-kaylo { --rib: #8c2f39; white-space: nowrap; }
.plate .paradigm-table thead .paradigm-kaylo {
  color: #fff8ec; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rib) 82%, #000), var(--rib) 30%, color-mix(in srgb, var(--rib) 85%, #fff) 55%, var(--rib) 80%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .35rem), 0 100%);
  padding-bottom: .7rem;
}
.plate .paradigm-kaylo--0 { --rib: #8c2f39; }
.plate .paradigm-kaylo--1 { --rib: #2f5d8c; }
.plate .paradigm-kaylo--2 { --rib: #3c7a4a; }
.plate .paradigm-kaylo--3 { --rib: #8a6a1f; }
.plate .paradigm-kaylo--4 { --rib: #6b3f8c; }
.plate .paradigm-kaylo--5 { --rib: #a0522d; }
.plate .paradigm-kaylo__name { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.plate .paradigm-kaylo .syriac { font-size: 1.35rem; line-height: 1.4; }
.plate .paradigm-corner { background: var(--cat-paper-hi); }

/* The tenses: rubricated section heads. */
.plate .paradigm-tense__head th {
  padding: 1.1rem .4rem .25rem !important; text-align: start !important;
  background: transparent !important; color: var(--cat-rubric) !important;
  border-bottom: 1.5px solid var(--cat-red) !important;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-variant: small-caps;
}
.plate .paradigm-tense:first-of-type .paradigm-tense__head th { padding-top: .5rem !important; }
.plate .paradigm-key {
  text-align: start !important; white-space: nowrap; cursor: help;
  font: .8rem/1.3 'Courier Prime', ui-monospace, monospace; color: var(--cat-ink-muted) !important;
}
.plate .paradigm-cell { font-size: 1.5rem; line-height: 1.55; white-space: nowrap; }
.plate .paradigm-radical { color: var(--cat-ink); }
.plate .paradigm-affix, .plate .paradigm-override { color: var(--cat-rubric); }
.plate .paradigm-cell--empty { color: var(--cat-ink-muted); }

/* A ruler across the plate: the hovered cell's row and column. */
.plate .paradigm-table tbody tr:hover > *:not([colspan]),
.plate .paradigm-table td.is-col { background: color-mix(in srgb, var(--cat-rubric) 9%, transparent); }
.plate .paradigm-table thead th.is-col { filter: brightness(1.15); }

/* Alternate forms: footnote numbers in the cells, the forms under the plate. */
.plate .paradigm-fn { margin-inline-start: 2px; font: 700 .62rem/0 'Noto Sans', system-ui, sans-serif; vertical-align: super; }
.plate .paradigm-fn a { color: var(--cat-rubric); text-decoration: none; }
.plate .paradigm-fn a:hover { text-decoration: underline; }
.plate-notes {
  margin: 1.1rem 0 0; padding: .7rem 0 0; list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--cat-ink-muted) 40%, transparent);
  columns: 2 18rem; column-gap: 2rem; font-size: .8rem; color: var(--cat-ink);
}
.plate-notes li { break-inside: avoid; padding: .12rem 0; scroll-margin-top: 5rem; }
.plate-notes li:target { background: color-mix(in srgb, var(--cat-rubric) 14%, transparent); border-radius: 3px; }
.plate-notes__back {
  display: inline-block; min-width: 1.4rem; font-weight: 700; color: var(--cat-rubric); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.plate-notes .syriac { font-size: 1.2rem; }
.plate-notes__where { color: var(--cat-ink-muted); font-family: 'Courier Prime', ui-monospace, monospace; font-size: .74rem; }
.plate .paradigm-edit { color: var(--cat-ink-muted); }

@media (max-width: 960px) {
  .paradigm { grid-template-columns: minmax(0, 1fr); }
  .note-slip { transform: none; }
}
@media (max-width: 600px) {
  .plate { padding: .8rem .6rem 1rem; }
  .plate .paradigm-cell { font-size: 1.3rem; }
}

/* In the full entry the lectern is narrow: the note above the plate. */
.paradigm--in-entry { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.paradigm--in-entry .note-slip .prose { columns: 2 22rem; column-gap: 2rem; }