/* ========================================================================
   GagaMuller Learning — 10-policies.css
   The policy card: the document, and the sentence underneath it.
   ======================================================================== */

/* ONE COLUMN, FULL MEASURE. A policy card is not a tile in a grid - it holds a
   document somebody has to read, and a two-up grid would halve the width of
   the thing they are reading to save space nobody needed. */
.pol-card{padding:0; overflow:hidden;}
.pol-card.done{opacity:.86;}

.pol-head{display:flex; align-items:flex-start; gap:14px; padding:20px 22px 16px;}
/* The mark, so a policy reads as a policy at a glance rather than as another
   card. Same scales the tab wears. */
.pol-mark{flex:none; width:40px; height:40px; border-radius:11px; display:grid;
  place-items:center; background:var(--brand-soft); color:var(--brand);}
.pol-mark svg{width:21px; height:21px;}
.pol-head h3{font-size:17.5px; letter-spacing:-.25px; line-height:1.3;}
.pol-desc{margin-top:5px; max-width:72ch;}
.pol-meta{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px;}
.pol-code, .pol-ver{flex:none; font-size:10.5px; color:var(--muted); padding:3px 8px;
  border:1px solid var(--line); border-radius:6px; background:var(--raised);
  letter-spacing:.3px;}

/* ------------------------------------------------------------- the steps --
   Numbered, because the card is a sequence and not a pile. The rail down the
   left is what makes it read as one: a number, a line to the next number, and
   the step's own content beside it. */
.pol-step{display:flex; gap:14px; padding:0 22px 18px; position:relative;}
.pol-step:last-child{padding-bottom:22px;}
.pol-num{flex:none; width:26px; height:26px; border-radius:50%; display:grid;
  place-items:center; font:700 12px var(--mono); border:1.5px solid var(--line);
  color:var(--muted); background:var(--surface); z-index:1;}
.pol-num svg{width:14px; height:14px;}
/* The rail, drawn from each number down to the next. */
.pol-step:not(:last-child)::before{content:''; position:absolute; left:34px; top:26px;
  bottom:0; width:1.5px; background:var(--line);}
.pol-step.done .pol-num{border-color:var(--ok); color:var(--ok); background:var(--ok-soft);}
.pol-step.done:not(:last-child)::before{background:var(--ok);}
.pol-stepbody{flex:1; min-width:0;}
.pol-steptitle{font-size:13.5px; font-weight:650; color:var(--ink); margin-bottom:3px;}
.pol-step .mini{margin-bottom:11px;}

/* THE WAY TO THE DOCUMENT, and it should look like the main event of step one:
   full-width on a narrow card, the policy's own name on it so there is no doubt
   what it opens. */
.pol-open{display:inline-flex; align-items:center; gap:9px; max-width:100%;
  padding:11px 17px; border:1px solid var(--brand); border-radius:10px;
  background:var(--brand-soft); color:var(--ink); font-size:13.5px; font-weight:600;
  text-decoration:none; transition:.14s;}
.pol-open:hover{background:color-mix(in srgb, var(--brand) 22%, transparent);}
.pol-open svg{width:16px; height:16px; flex:none;}
.pol-open:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.pol-open.opened{border-color:var(--ok); background:transparent; font-weight:500;
  color:var(--muted);}
.pol-open.opened::after{content:'✓ opened'; font-size:11.5px; color:var(--ok);
  margin-left:2px;}

/* ---------------------------------------------------------------- signing */

.pol-signstep{background:var(--raised); margin:0; padding-top:18px;
  border-top:1px solid var(--line);}
.pol-reissued{display:flex; align-items:flex-start; gap:7px; margin-bottom:11px;
  color:var(--warn);}
.pol-reissued svg{width:15px; height:15px; flex:none; margin-top:1px;}

/* The sentence reads as a sentence, with the name written into it. */
.pol-say{display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:14.5px; line-height:1.9; color:var(--ink);}
.pol-say .pol-name{padding:2px 2px 3px; border-bottom:1.5px solid var(--brand);
  font-weight:700; color:var(--ink); white-space:nowrap;}

.pol-act{margin-top:14px; gap:11px; align-items:center;}
.pol-why{flex:1; color:var(--warn); min-height:1em;}
/* Until the document is opened the sentence is not yet available to agree to,
   and it should look that way. */
.pol-signstep:has(button:disabled) .pol-say{opacity:.55;}

/* The stamp that replaces the form once it is signed. */
.pol-done{display:flex; align-items:center; gap:11px; padding:14px 18px;
  border-top:1px solid var(--line); margin-top:16px;
  background:color-mix(in srgb, var(--ok) 9%, transparent);}
.pol-done svg{width:20px; height:20px; flex:none; color:var(--ok);}
.pol-done b{font-size:13.5px;}

/* The lock banner, on the page that is the only one open. */
.pol-lock h4{font-size:14.5px;}

/* A path row in the "which paths carry this" dialog. */
.pol-path{cursor:pointer;}
.pol-path:hover{border-color:var(--brand);}
.pol-path input{flex:none; width:16px; height:16px; accent-color:var(--brand);}

@media (max-width: 760px){
  .pol-head, .pol-step, .pol-done{padding-left:14px; padding-right:14px;}
  .pol-step:not(:last-child)::before{left:26px;}
  /* On a phone the document button takes the width rather than sitting in a
     line it cannot fill. */
  .pol-open{display:flex; justify-content:center; text-align:center;}
}