/* ==========================================================================
   dgtable.css - the essential dignity table
   ==========================================================================
   Lifted out of senshi.css section 177 on 16 Sep 2026, because the chart is
   no longer a profile-only component: dignity.html carries it too, and the
   codex article pages load index.css and nothing else. Rather than keep two
   copies in step by hand, the rules live here once and both sides link it.

   De-scoped from .senshi-art, and every palette variable carries a fallback,
   so inside a guardian profile it takes that guardian's colours and outside
   one it falls back to codex neutrals.

   WHAT THE CHART IS FOR. The four dignity cards state four facts in prose.
   What prose cannot show is the SHAPE: that detriment is always opposite
   domicile and fall always opposite exaltation, and that the twelve domiciles
   fan out from Cancer and Leo. Seven rows by twelve columns shows all of it at
   a glance, and that is why the whole table earns its place over a single row.

   THE MARKS ENCODE ON TWO CHANNELS, so the chart survives colourblindness and
   a black-and-white print:
       COLOUR says which side of the ledger - dignity or debility
       SHAPE  says which one - disc domicile, up triangle exaltation,
                               ring detriment, down triangle fall
   Either channel alone is enough to read it.

   ROW ORDER IS LOAD-BEARING. Chaldean order, slowest at the top, against
   columns in zodiacal order, is what makes the domicile marks fall into two
   arms meeting at Cancer and Leo. Sort the rows any other way - alphabetically,
   say - and the Thema Mundi disappears out of the picture.

   It is a real <table> with <th scope> and hidden per-mark text, not an image:
   readable by a screen reader, printable, and it inherits the surrounding
   palette like everything else on the page.
   ========================================================================== */

/* ---- layout: table left, the explanation beside it ----
   Ashley, 16 Sep: "can you place the paragraph next to the table, rather than
   under?" So a two-column grid. The table column is max-content and the prose
   column takes the rest, with a floor on it so the text never gets squeezed
   into a ribbon. Below 900px there is no honest way to have both, so it
   stacks - table first, because that is the thing being explained. */
.dgt-grid{
  display:grid;
  grid-template-columns:minmax(0, max-content) minmax(190px, 1fr);
  gap:6px 22px;
  align-items:start;
}
.dgt-wrap{ overflow-x:auto; }

.dgt{
  border-collapse:collapse;
  /* width:max-content, NOT auto. On a phone the table was being squeezed to
     the column instead of overflowing it: cells fell under 24px and the two
     doubled cells (Mercury in Virgo, Mercury in Pisces) wrapped their second
     mark onto a new line, which broke the row rhythm and hid exactly the
     detail the table is there to show. Let it keep its real width and let
     .dgt-wrap scroll. */
  width:max-content;
  margin:0;
  font-family:"rainyhearts", monospace;
}
.dgt th,
.dgt td{
  border:1px dotted var(--backbow, #d9d2c4);
  padding:0;
}
.dgt-corner{ border:0 !important; }

/* ---- column headers: sign glyph + a three-letter label ----
   "either label them or make them hoverable to see the same" - labelled,
   because a learning chart should not need a hover to be legible, and hover
   does nothing at all on a phone. The title attribute and the hidden text
   both still carry the full name.

   The glyph art comes from images/zodiac_element/, not images/zodiac/. Same
   twelve glyphs pixel for pixel - the alpha channels are byte-identical - but
   coloured by triplicity instead of flat pink: fire red, earth green, air
   yellow, water blue. So the header row carries the elements as well as the
   signs, and the four colours repeat every fourth column.

   The art is 16px. It is shown at 32 - an INTEGER 2x - so it doubles
   cleanly. 24px would resample it and go fuzzy, which is the whole reason
   this number is not "a bit bigger". */
.dgt-sign{
  width:36px;
  padding:4px 0 3px;
  text-align:center; vertical-align:bottom;
  background:var(--washa, #f4efe4);
  font-weight:400;
}
.dgt-gly{
  display:block; margin:0 auto;
  image-rendering:pixelated;
}
.dgt-ab{
  display:block; margin-top:2px;
  font-size:10px; letter-spacing:.4px; line-height:1;
  color:var(--ink, #2b2b33); opacity:.75;
}

/* ---- row headers: the senshi glyph, then the planet ----
   Natural 20px, so no resampling. */
.dgt-p{
  width:106px; height:36px;
  text-align:left; padding:0 8px 0 5px;
  font-size:14px; line-height:1; font-weight:400;
  color:var(--ink, #2b2b33); white-space:nowrap;
  background:var(--washa, #f4efe4);
}
.dgt-pg{
  display:inline-block; vertical-align:middle;
  margin:0 6px 0 0;
  image-rendering:pixelated;
}
.dgt-c{
  width:36px; height:36px;
  text-align:center; vertical-align:middle;
  white-space:nowrap;            /* a doubled cell keeps both marks on one line */
}

/* the profile's own planet */
.dgt-r--on > .dgt-c{ background:var(--wash, #efe7d6); }
.dgt-r--on > .dgt-p{
  /* --onhead, not --onskirt. --onskirt is the ink for --skirt, and on the ten
     profiles whose skirt and head are different colours it is a DARK ink being
     asked to sit on a DARK bar. See senshi.css section 180. */
  background:var(--head, #7a5b1e); color:var(--onhead, var(--onskirt, #fffdf6));
  font-weight:600;
}

/* ---- the four marks ---- */
.dgt-m{ display:inline-block; vertical-align:middle; margin:0 1px; }
.dgt-m--dom{                                  /* domicile: filled disc */
  width:11px; height:11px; border-radius:50%;
  background:var(--head, #7a5b1e);
}
.dgt-m--exa{                                  /* exaltation: up triangle */
  width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:10px solid var(--head, #7a5b1e);
}
.dgt-m--det{                                  /* detriment: hollow ring */
  width:11px; height:11px; border-radius:50%;
  border:2px solid var(--accent, #6a6a86); background:none;
  box-sizing:border-box;
}
.dgt-m--fal{                                  /* fall: down triangle */
  width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:10px solid var(--accent, #6a6a86);
}

/* ---- legend + the explanation ---- */
.dgt-key{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  margin:9px 0 0;
  font-family:"rainyhearts", monospace; font-size:13.5px;
  color:var(--ink, #2b2b33);
}
.dgt-k{ display:inline-flex; align-items:center; gap:6px; }
.dgt-side{ min-width:0; }
.dgt-cap{
  margin:0;
  font-family:"rainyhearts", monospace;
  font-size:13.5px; line-height:1.62;
  color:var(--ink, #2b2b33); opacity:.92;
}
.dgt-lnk{
  color:var(--head, #7a5b1e); text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.dgt-lnk:hover,
.dgt-lnk:focus-visible{ color:var(--accent, #6a6a86); border-bottom-style:solid; }

/* screen-reader text: the site had no such utility, so here is one */
.dgt-vh{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (max-width: 900px){
  .dgt-grid{ grid-template-columns:minmax(0, 1fr); gap:12px; }
}
@media (max-width: 700px){
  .dgt-sign{ width:32px; }
  .dgt-c{ width:32px; height:32px; }
  .dgt-p{ width:96px; height:32px; font-size:13px; padding-right:6px; }
  .dgt-cap, .dgt-key{ font-size:12.5px; }
}

/* A legend term is a link AND a glossary mark at once: click for the codex
   page, hover for the one-line definition. .gloss already carries the pink
   dotted treatment in both index.css and senshi.css, so all this needs to do
   is get the browser's default link underline out of the way and let it. */
.dgt-term{ text-decoration:none; }
.dgt-cap--more{ margin-top:8px; }

/* The outer-planet aside: full width under BOTH columns, with a rule above it,
   because it answers a question about the whole chart rather than continuing
   the explanation beside it. Someone new to astrology meets seven rows and
   immediately wonders where Uranus, Neptune and Pluto went; this gets to them
   before they have to go looking. */
.dgt-note{
  grid-column:1 / -1;
  margin:14px 0 0; padding-top:11px;
  border-top:1px dotted var(--backbow, #d9d2c4);
  font-family:"rainyhearts", monospace;
  font-size:13.5px; line-height:1.62;
  color:var(--ink, #2b2b33); opacity:.92;
}
@media (max-width: 700px){ .dgt-note{ font-size:12.5px; } }

/* ==========================================================================
   SECT AS A SPECTRUM - the strip in the condition block
   ==========================================================================
   Brennan, Hellenistic Astrology ch. 7, figure 7.4. Built second, after the
   dignity table, and kept in this file because it is the same kind of object:
   a fixed scheme with this guardian's planet picked out of it, shared by the
   profiles and available to the codex.

   ONE PICTURE FOR TWO ROWS OF THE BLOCK. The condition list already asserts
   "sect" and "nature" separately. Brennan's point is that they are one
   mechanism - sect is the dial that moves a planet along the benefic/malefic
   spectrum - so this retires both at once rather than illustrating one.

   The two rows are the same four planets in a different order, which is the
   whole idea and the reason they are stacked rather than shown side by side:
   the eye should catch Jupiter and Venus trading the left-hand end, and Mars
   and Saturn trading the right.

   The gradient runs helpful -> difficult, but the ORDER carries the meaning on
   its own, so the strip still reads with the colours off.
   ========================================================================== */
.sx{ margin:16px 0 0; }
.sx-h{
  margin:0 0 9px; padding-bottom:5px;
  border-bottom:1px dotted var(--backbow, #d9d2c4);
  font-family:"rainyhearts", monospace;
  font-size:14px; letter-spacing:.4px;
  color:var(--head, #7a5b1e);
}
.sx-row{
  display:flex; align-items:center; gap:10px;
  margin:0 0 8px;
}
.sx-lab{
  flex:0 0 74px;
  font-family:"rainyhearts", monospace; font-size:12.5px;
  color:var(--ink, #2b2b33); opacity:.85;
}
.sx-line{
  list-style:none; margin:0; padding:5px 8px;
  display:flex; flex:1 1 auto; gap:6px;
  border:1px dotted var(--backbow, #d9d2c4);
  background:linear-gradient(90deg,
              var(--wash, #efe7d6) 0%,
              var(--paper, #fffdf6) 50%,
              var(--washa, #f4efe4) 100%);
}
.sx-p{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:5px;
  padding:3px 5px;
  font-family:"rainyhearts", monospace; font-size:12.5px; line-height:1;
  color:var(--ink, #2b2b33);
  border:1px solid transparent;
}
.sx-g{ flex:0 0 auto; image-rendering:pixelated; }
.sx-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-p--best .sx-n{ font-weight:600; }
.sx-p--worst .sx-n{ font-weight:600; }
/* this guardian's own planet, in both rows */
.sx-p--on{
  border-color:var(--head, #7a5b1e);
  background:var(--paper, #fffdf6);
}
.sx-p--on .sx-n{ font-weight:600; color:var(--head, #7a5b1e); }

.sx-ends{
  display:flex; justify-content:space-between;
  margin:0 0 10px; padding-left:84px;
  font-family:"rainyhearts", monospace; font-size:11px;
  color:var(--ink, #2b2b33); opacity:.7;
}
.sx-note{
  margin:0 0 8px;
  font-family:"rainyhearts", monospace;
  font-size:13.5px; line-height:1.6;
  color:var(--ink, #2b2b33); opacity:.92;
}
.sx-note--rule{ margin-bottom:0; opacity:.86; }
.sx-lnk{
  color:var(--head, #7a5b1e); text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.sx-lnk:hover, .sx-lnk:focus-visible{
  color:var(--accent, #6a6a86); border-bottom-style:solid;
}

@media (max-width: 700px){
  .sx-row{ flex-direction:column; align-items:stretch; gap:3px; }
  .sx-lab{ flex:none; }
  .sx-ends{ padding-left:0; }
  /* Four across a phone gave "Jup...", "Ve...", "Sa..." - the names truncated
     to the point of uselessness, which on a chart whose whole job is to name
     the planets is worse than useless. Two by two instead: still reads 1-2-3-4
     in order, and every name fits whole. */
  .sx-line{ flex-wrap:wrap; }
  .sx-p{ flex:0 0 calc(50% - 3px); }
  .sx-n{ font-size:12px; }
}

/* ==========================================================================
   REVISION, 16 Sep - the table takes the whole column again
   ==========================================================================
   Ashley: "make it bigger again and move the paragraph back under it. expand
   the table to the width of the column."

   So the two-column grid from earlier today is off. The caption goes back
   underneath, and the table stops being max-content and fills the column
   instead: table-layout:fixed with the planet label pinned and the twelve sign
   columns splitting whatever is left, which at the profile's width is about
   54px a cell rather than 36. Bigger marks to match.

   This supersedes the .dgt-grid rules above rather than replacing them in
   place - the grid still exists and still stacks, it just has one column now,
   so nothing else has to be rewired if we ever want the side-by-side back.
   ========================================================================== */
.dgt-grid{ display:block; }
.dgt-wrap{ overflow-x:auto; }
/* width:100% with a MIN-WIDTH rather than a breakpoint. A breakpoint at 900
   was measuring the viewport, not the column, so at 900 the table dropped to
   max-content while its column was still 782 wide and it stopped filling.
   A min-width lets it fill wherever there is room and scroll where there is
   not, with no magic number tied to a screen size. 494 = the twelve columns at
   their floor plus the label. */
.dgt{ width:100%; min-width:494px; table-layout:fixed; }
/* THE LABEL COLUMN IS SIZED ON .dgt-corner, NOT .dgt-p. With
   table-layout:fixed the browser takes every column width from the FIRST ROW
   only - here the thead row, whose first cell is the empty corner. A width on
   .dgt-p (a th in the body rows) is simply ignored, which is why "Mercury" kept
   clipping at 1440 while looking fine at 1100: the corner was taking whatever
   was left over rather than a stated width. */
.dgt-corner{ width:124px; }
.dgt-p{ height:40px; }
.dgt-sign{ width:auto; padding:5px 0 4px; }
.dgt-c{ width:auto; height:40px; }
.dgt-side{ margin-top:14px; }

/* the marks grow with the cells */
.dgt-m--dom{ width:13px; height:13px; }
.dgt-m--det{ width:13px; height:13px; border-width:2px; }
.dgt-m--exa{ border-left-width:7px; border-right-width:7px; border-bottom-width:12px; }
.dgt-m--fal{ border-left-width:7px; border-right-width:7px; border-top-width:12px; }

@media (max-width: 700px){
  .dgt{ min-width:0; width:max-content; table-layout:auto; }
  .dgt-sign{ width:32px; }
  .dgt-c{ width:32px; height:36px; }
  .dgt-corner{ width:104px; }
  .dgt-p{ height:36px; }
}

/* ---------------------------------------------------------------------------
   PHONE: LET THE SIGN GLYPH KEEP ITS FULL 32px

   The site has a global `img{max-width:100%}`. On a phone .dgt-sign is 32px
   wide with a 1px border on each side, so the content box is 30 and that rule
   squeezed the 32px glyph down to 31 - a fractional scale on pixel art, which
   softens it exactly where the screen is smallest and the colour is doing the
   most work. Widening the header cell by the two border pixels gives the glyph
   its honest 2x back. Four pixels across the whole table; it does not change
   whether the table scrolls, because it already does at this width. */
@media (max-width: 700px){
  .dgt-sign{ width:34px; }
}

/* ---------------------------------------------------------------------------
   HOVER + LINK ON BOTH HEADERS

   Ashley, 15 Sep: "can you add the hover feature to the table?" Every sign
   column and every planet row is now a .gloss mark as well as a link, so the
   whole frame of the chart is live: hover for the one-line definition, click
   for the codex page.

   THE PROBLEM THIS SOLVES. .senshi-art .gloss paints its mark pink
   (#d81888) with a pink dotted rule under the whole thing. That treatment is
   right in a paragraph, where a mark has to announce itself inside a run of
   text. It is wrong here twice over: it would repaint all twelve three-letter
   labels and all seven planet names pink, fighting the element colours that
   are the entire point of the header art, and it would draw a dotted rule
   under each 32px glyph as well as its label, twelve times across the top.

   So the anchor keeps the BEHAVIOUR and drops the paint. The affordance moves
   onto the small label text alone - the abbreviation under the glyph, the
   planet name beside it - which is the part that reads as a word and the part
   a cursor naturally lands on. Nothing in the header changes colour until it
   is hovered.

   The anchor is display:block and fills its cell, so the whole header cell is
   the target rather than three letters of pixel type. */
/* SPECIFICITY: these must out-rank `.senshi-art .gloss` (0,2,0), which paints
   every mark pink and rules it with a pink dotted line. First pass lost that
   fight and turned all nineteen labels magenta - including the planet name
   sitting on the highlighted row's dark band, where pink on brown was close to
   unreadable. `.dgt .dgt-h` is 0,3,0 and wins outright, whatever order the two
   stylesheets happen to load in. */
/* .post-content is the codex side, and index.css styles links there as
   `body.--post .post-content a` - specificity (0,2,2), which beats a bare
   `.dgt .dgt-h` at (0,2,0). On dignity.html that painted all seven planet
   names teal and underlined them. Adding the .post-content ancestor takes this
   to (0,3,0) and settles it on both sides of the site. */
.post-content .dgt .dgt-h,
.dgt .dgt-h{
  display:block;
  color:inherit;
  border-bottom:0;              /* kill the .gloss dotted rule on the whole cell */
  text-decoration:none;
  cursor:help;                  /* the .gloss contract: this pops, it does not just go */
}
/* the affordance, on the label text only - not under the glyph. Ink at low
   opacity rather than the prose pink: twelve pink rules across the top would
   fight the element colours that the header art exists to carry. */
.post-content .dgt .dgt-h .dgt-ab,
.dgt .dgt-h .dgt-ab{
  display:inline-block; margin-top:3px;
  border-bottom:1px dotted currentColor;
}
.dgt .dgt-h--p{
  line-height:1;
  white-space:nowrap;
}

@media (hover: hover){
  .post-content .dgt .dgt-h:hover,
  .dgt .dgt-h:hover,
  .dgt .dgt-h:focus-visible{ color:var(--head, #7a5b1e); }
  .dgt-sign:hover{ background:var(--wash, #efe7d6); }
  /* The highlighted row sits ON --head, so it lifts the other way. It rests on
     --onhead (see above) and hovers to plain white, which is a visible step on
     every palette. This used to say var(--onskirt) and was a no-op on exactly
     the profiles where the resting state was already broken. */
  .dgt .dgt-r--on > .dgt-p .dgt-h:hover,
  .dgt .dgt-r--on > .dgt-p .dgt-h:focus-visible{ color:#fffdf6; }
}
.dgt .dgt-h:focus-visible{ outline:2px dotted currentColor; outline-offset:1px; }

/* ---------------------------------------------------------------------------
   A STRONGER OUTER FRAME

   Ashley, 15 Sep: "can we frame the dignity table a little stronger on the
   outside for each profile?"

   The grid inside is 1px dotted --backbow, which is right: those lines are
   scaffolding and should stay quiet so the marks carry the eye. But with
   nothing around the outside the table had no edge, so it read as loose ruling
   on the plate rather than as one object.

   2px solid --head, which is the same frame .dgplate itself wears, so the
   table reads as a framed thing inside a framed thing rather than inventing a
   third border language. It takes the guardian's colour on a profile and the
   codex neutral everywhere else, through the same fallback as the rest of
   this file.

   The frame goes on the TABLE, not on .dgt-wrap. The wrapper is the scrolling
   box: a border there would sit still while the table slid underneath it, and
   on a phone - where the table does scroll - the frame would cut through the
   middle of the columns instead of around them. */
.dgt{
  border:3px solid var(--head, #7a5b1e);
  box-shadow:3px 3px 0 var(--frontbow, #d9d2c4);
}
/* the empty top-left cell keeps no rules of its own, but it must not punch a
   hole in the new outer frame where the two meet */
.dgt-corner{
  border:0 !important;
  background:transparent;
}

/* ==========================================================================
   THE JOYS WHEEL
   ==========================================================================
   Moved here from senshi.css section 183 on 15 Sep 2026, when the wheel
   stopped being a profile-only component: planetary-joys.html carries it too,
   and codex article pages load index.css and nothing else. De-scoped from
   .senshi-art, every palette variable given a fallback, so inside a guardian
   profile it takes that guardian's colours and outside one it falls back to
   codex neutrals - the same arrangement as the table above.

   SOURCE: Brennan ch. 10, "Joys of the Planets" (p. 336 ff), whose list is
   the one drawn here, and whose structural readings - his own work with
   Benjamin Dykes, plus an observation of Robert Schmidt's - are the three
   things the picture is built to show AT ONCE:

     the HORIZON      every day planet's joy above it, every night planet's
                      below, Mercury (of neither sect) on the line itself
     the ASPECTS      both lights see both benefics by sextile or trine and
                      both malefics by square - eight for eight, asserted in
                      astro-notes/joys_wheel.py rather than taken on trust
     the TRIADS       each quarter holds a triplicity's rulers: fire at the
                      top, air rising, water setting, earth at the bottom,
                      which is Aristotle's order of natural place - and may be
                      why the signs have the elements they have at all

   The element tints are SAMPLED FROM images/zodiac_element (the most common
   non-outline pixel of each triplicity's three glyphs), so the wheel and the
   dignity table's header row are the same four colours exactly rather than
   four colours that merely look similar.

   THE FIRST RULE HERE IS THE ONE THAT MATTERS MOST. An SVG <circle> with no
   fill declared defaults to BLACK, and this wheel has two of them - the outer
   ring and the inner one. The first build of this section never made it into
   the stylesheet (a && chain short-circuited on a failed assertion), so those
   two circles painted solid black over the entire diagram and nothing else
   was visible at all. If the joys wheel ever goes dark again, this is why.
   ========================================================================== */
.jw{
  display:grid;
  grid-template-columns:minmax(0, 380px) minmax(200px, 1fr);
  gap:4px 22px; align-items:start;
}
.jw-svg{
  display:block; width:100%; max-width:380px; height:auto;
  color:var(--ink, #2b2b33);
}
.jw-ring{ fill:none; stroke:var(--head, #7a5b1e); stroke-width:1.6; opacity:.75; }
.jw-spoke{ stroke:var(--backbow, #d9d2c4); stroke-width:1; opacity:.6; }
/* the horizon is the whole first claim, so it is the only heavy line */
.jw-horizon{ stroke:var(--head, #7a5b1e); stroke-width:2.4; stroke-dasharray:7 4; }
.jw-n{
  font-family:rainyhearts, monospace; font-size:12px;
  fill:var(--ink, #2b2b33); opacity:.7; text-anchor:middle;
}
.jw-ang{
  font-family:rainyhearts, monospace; font-size:11px; letter-spacing:.5px;
  fill:var(--head, #7a5b1e);
}
.jw-ang--l{ text-anchor:end; }
.jw-ang--r{ text-anchor:start; }
.jw-ang--c{ text-anchor:middle; }
.jw-j image{ image-rendering:pixelated; }
/* the guardian whose page this is gets a ring round her own joy */
.jw-j--on image{ outline:2px solid var(--head, #7a5b1e); outline-offset:3px; }
.jw-side{ min-width:0; }
.jw-cap, .jw-note{
  margin:0; font-family:rainyhearts, monospace;
  font-size:13.5px; line-height:1.62; color:var(--ink, #2b2b33); opacity:.92;
}
.jw-note{ margin-top:10px; }
.jw-lnk{
  color:var(--head, #7a5b1e); text-decoration:none;
  border-bottom:1px dotted currentColor;
}
.jw-lnk:hover{ color:var(--accent, #6a6a86); border-bottom-style:solid; }
@media (max-width: 760px){
  .jw{ grid-template-columns:minmax(0,1fr); }
  .jw-svg{ margin:0 auto 12px; }
}

.jw-fig{
  margin:22px 0;
  padding:14px 16px 16px;
  border:3px solid var(--head, #7a5b1e);
  background:var(--paper, #fffdf6);
  box-shadow:3px 3px 0 var(--frontbow, #d9d2c4);
}
.jw-fig-h{
  margin:0 0 12px; padding-bottom:6px;
  font-family:"rainyhearts", monospace;
  font-size:13px; letter-spacing:.5px;
  color:var(--head, #7a5b1e); opacity:.9;
  border-bottom:1px solid var(--backbow, #d9d2c4);
}