/* Pickerty Help Center
   ---------------------------------------------------------------------------
   Colors, type and shapes come from the app's own design system:
     Pickerty.Client/ClientApp/src/styles/colors.scss
     Pickerty.Client/ClientApp/src/styles/typography.scss
     Pickerty.Client/ClientApp/src/styles/styles.scss  (.cta-button, .pi-dark)
     Pickerty.Client/ClientApp/src/styles/mixins.scss  (tool-cards, resource-sections)
   The SCSS variable each value came from is named in a comment beside it.
   Deviations from the app are marked  DEVIATION:  with the reason.
   --------------------------------------------------------------------------- */

:root{
  /* colors.scss */
  --background:#fff;                 /* $background            */
  --background-alt:#ececef;          /* $background-alt        */
  --background-alt2:#f7f7f7;         /* $background-alt2       */
  --text:#32414b;                    /* $text                  */
  --text-light:#848d93;              /* $text-light - decorative use only     */
  /* DEVIATION: $text-light on white is 3.38:1, below WCAG AA (4.5:1) for the
     small sizes this help center uses it at (ledes, captions, card blurbs).
     Secondary text uses #686e82 instead - which is 400 in the app's own
     $dark-background-palette, so still an in-system value - at 5.07:1. */
  --text-secondary:#686e82;          /* $dark-background-palette 400          */
  --selected:#3f51b5;                /* $selected              */
  --selected-rgb:63,81,181;          /* $selected, as channels, so the note
                                        callout's tints can be composited from
                                        the token instead of a repeated literal */
  --link:#3f51b5;                    /* $link                  */
  --cta-background:#97feed;          /* $cta-background        */
  --cta-border:#32414b;              /* $cta-border            */
  --cta-label:#32414b;               /* $cta-label             */
  --border-card:#d6d9db;             /* $border-card           */
  --border-light:#d6d9db;            /* $border-light          */
  --caution-background:#faf9d8;      /* $caution-background    */
  --caution-border:#c2b500;          /* $caution-border        */
  --header-dark:#040e2f;             /* $header-dark-background */
  --header-dark-text:#fff;           /* $header-dark-text      */
  --side-nav-background:#1d2643;     /* $side-nav-background   */
  --table-header-background:#ececef; /* $table-header-background */
  --table-row-background:#fff;       /* $table-row-background  */
  --table-row-y-border:#ececef;      /* $table-row-y-border    */

  /* typography.scss - root is 16px, so 1rem = 16px */
  --font-xs:0.8rem;                  /* $font-size-xs   12.8px */
  --font-sm:0.9rem;                  /* $font-size-sm   14.4px */
  --font-base:1rem;                  /* $font-size-base 16px   */
  --font-md:1.2rem;                  /* $font-size-md   19.2px */
  --font-lg:1.4rem;                  /* $font-size-lg   22.4px */
  --font-xl:1.6rem;                  /* $font-size-xl   25.6px */
  --font-xxl:2rem;                   /* $font-size-xxl  32px   */

  --radius-card:12px;                /* mixins.scss .tool-card / .resource-subsection */
  --radius-image:8px;                /* mixins.scss .preview-image */
  --radius-button:4px;               /* external: .cta-button as rendered by Angular Material */
}

*{box-sizing:border-box}

html{font-size:16px}                 /* typography.scss assumes a 16px root */

body{
  margin:0;
  background:var(--background);
  color:var(--text);
  font-family:"Poppins",sans-serif;  /* styles.scss body */
  /* DEVIATION: app body is $font-size-base (16px). A help article is read, not
     operated, and the audience is older, so body steps up one rung of the
     app's own scale to $font-size-md. No new value is invented. */
  font-size:var(--font-md);
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

/* ---------------------------------------------------------------- header */
.top{background:var(--header-dark);color:var(--header-dark-text);padding:12px 24px}
.top a{
  color:var(--header-dark-text);     /* styles.scss .pi-dark sets link color to white */
  text-decoration:none;font-weight:600;font-size:var(--font-base);
  /* Logo left of the wordmark, the same arrangement as the app's own header
     (header.component.html: a 32px logo128x128.png, then the title, in a flex
     row). gap matches the header component's own spacing. */
  display:inline-flex;align-items:center;gap:10px;padding:6px 2px;
}
.top .logo{
  width:32px;height:32px;display:block;flex:0 0 auto;
}

.wrap{
  /* DEVIATION: app content caps at 1100px (mixins.scss). Prose needs a shorter
     line for comfortable reading, so this is narrower on purpose. */
  max-width:820px;margin:0 auto;padding:28px 24px 90px;
}

/* ---------------------------------------------------------------- type */
h1{font-size:var(--font-xxl);line-height:1.2;margin:18px 0 6px;font-weight:700;color:var(--text)}
h2{font-size:var(--font-xl);line-height:1.3;margin:44px 0 10px;padding-top:22px;
   border-top:1px solid var(--border-light);font-weight:600;color:var(--text)}
h3{font-size:var(--font-lg);margin:30px 0 6px;font-weight:600;color:var(--text)}
p{margin:0 0 16px}
.lede{font-size:var(--font-lg);color:var(--text-secondary);margin-bottom:6px}
.mins{color:var(--text-secondary);font-size:var(--font-sm);margin:0 0 26px}
b,strong{font-weight:600}            /* styles.scss uses 600, not 700, for emphasis */
a{color:var(--link);font-weight:600} /* styles.scss a */

ol,ul{padding-left:26px;margin:0 0 18px}
li{margin-bottom:12px}

/* numbered instructions as circled steps.
   EXTRAPOLATED: the app has no numbered-step component. Built from the
   .subsection-icon / icon-badge pattern in mixins.scss - 44px, radius, the
   $selected tint - restyled as a circle. Worth a designer's eye. */
ol.steps{counter-reset:s;list-style:none;padding-left:0}
ol.steps>li{counter-increment:s;position:relative;padding-left:56px;margin-bottom:22px}
ol.steps>li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:38px;height:38px;
  border-radius:50%;background:var(--header-dark);color:var(--cta-background);
  font-weight:600;font-size:var(--font-md);
  display:flex;align-items:center;justify-content:center;
}

/* ---------------------------------------------------------------- figures */
figure{margin:26px 0}
figure a{display:block}
figure img{                          /* mixins.scss .preview-image */
  /* width/height attributes are emitted per image by make.py so the browser
     reserves the right box before a lazy image loads; height:auto keeps the
     rendered image fluid instead of pinning it to the attribute's pixels. */
  width:100%;height:auto;display:block;border-radius:var(--radius-image);
  background:var(--background);border:1px solid var(--border-card);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
figcaption{font-size:var(--font-sm);color:var(--text-secondary);margin-top:8px;line-height:1.6}
.zoom{display:none}

/* ---------------------------------------------------------------- video
   A video sits in the same frame as a screenshot, so a page reads the same
   whether the slot is filled or still pending. .pending is the reserved
   state: same size, same border, so nothing reflows when the video lands. */
.vid{margin:26px 0}
.vidbox{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--radius-image);overflow:hidden;
  background:var(--background-alt2);border:1px solid var(--border-card);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.vidbox iframe,.vidbox video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  background:#000;
}
.vidbox.pending{
  display:flex;align-items:center;justify-content:center;
  background:var(--background-alt2);
  border:1px dashed var(--border-card);box-shadow:none;
}
.vidbox.pending span{
  font-size:var(--font-sm);font-weight:600;color:var(--text-secondary);
  letter-spacing:.02em;text-transform:uppercase;
}
/* a play triangle, drawn in CSS, so a pending slot reads as video at a glance */
.vidbox.pending::before{
  content:"";width:0;height:0;margin-right:14px;
  border-left:18px solid var(--text-light);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}

/* ---------------------------------------------------------------- callouts */
/* The yellow box maps exactly onto the app's caution tokens. */
.warn{
  background:var(--caution-background);border:1px solid var(--caution-border);
  border-left:6px solid var(--caution-border);
  padding:16px 20px;border-radius:0 var(--radius-card) var(--radius-card) 0;margin:24px 0;
}
/* EXTRAPOLATED: the app has no informational callout - only caution. Built from
   the $selected tint used for active side-nav items in colors.scss
   (rgba($selected,0.1) fill, rgba($selected,0.3) border) so it reads as
   "highlighted", not "warning". Needs design sign-off. */
.note{
  /* Border is exactly $side-nav-item-active-border: rgba($selected,0.3).
     DEVIATION: fill is 0.06 rather than $side-nav-item-active-background's
     0.10 - that tint sits behind a one-line nav item in the app; behind a
     multi-paragraph callout the same value reads as a colored block. */
  background:rgba(var(--selected-rgb),.06);
  border:1px solid rgba(var(--selected-rgb),.3);
  border-left:6px solid var(--selected);
  padding:16px 20px;border-radius:0 var(--radius-card) var(--radius-card) 0;margin:24px 0;
}
.note p:last-child,.warn p:last-child{margin-bottom:0}
.note strong,.warn strong{display:block;margin-bottom:4px;font-weight:600}

/* On-screen control reference.
   DEVIATION: deliberately NOT $cta-background/.cta-button. A chip marks
   buttons, toggles, menu items and links alike, and most of those are not
   mint in the app - only the primary CTA is. Copying one control's color
   would promise a match the docs can't keep, and would go stale the day that
   button is restyled. Neutral surface tokens say "this exact thing on screen"
   and stay true whatever color the control happens to be. */
.btn{
  display:inline-block;background:var(--background-alt2);color:var(--text);
  border:1px solid var(--border-card);border-radius:var(--radius-button);
  padding:1px 8px;font-weight:600;font-size:.92em;white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* ---------------------------------------------------------------- tables */
.tw{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch}
table{
  border-collapse:collapse;width:100%;min-width:260px;margin:0;
  background:var(--table-row-background);
  font-size:var(--font-base);       /* app tables run at $font-size-base */
  border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--border-card);
}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--table-row-y-border);
      vertical-align:top}
th{background:var(--table-header-background);font-size:var(--font-sm);font-weight:600;
   letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- quote */
.quote{
  background:var(--background-alt2);padding:16px 20px;
  border-radius:var(--radius-card);font-style:italic;
}

/* ---------------------------------------------------------------- nav blocks */
/* both follow mixins.scss .tool-card: white, 12px radius, 1px $border-card */
.next,.sibs{
  background:var(--background);border:1px solid var(--border-card);
  border-radius:var(--radius-card);padding:20px 22px;
}
.next{margin-top:56px}
.sibs{margin-top:18px}
.next h3,.sibs h3{margin:0 0 10px;font-size:var(--font-sm);text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-secondary);font-weight:600}
.next p{margin:0 0 6px}
.next p:last-child{margin-bottom:0}
.sibs ul{margin:0;padding-left:22px}
.sibs li{margin:0 0 7px}
.sibs .here{color:var(--text-secondary);font-weight:600}
.sibs .here span{font-weight:400;font-size:var(--font-sm)}

footer{color:var(--text-secondary);font-size:var(--font-sm);margin-top:44px;text-align:center}

/* ---------------------------------------------------------------- index */
/* mixins.scss .tool-cards grid, including its 720px collapse point */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
@media screen and (max-width:720px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{
  background:var(--background);border:1px solid var(--border-card);
  border-radius:var(--radius-card);padding:20px;text-decoration:none;color:inherit;
  display:block;transition:box-shadow .2s ease-in-out,border-color .2s ease-in-out;
}
.card:hover{border-color:var(--selected);box-shadow:0 4px 12px rgba(0,0,0,.1)}
/* An off-site card ({{link:}}) gets an arrow after its title, so a reader can see
   before clicking that this one leaves the resource center. */
.card.ext b::after{content:" \2197";font-weight:400;color:var(--text-secondary)}
.card b{display:block;font-size:var(--font-md);margin-bottom:3px;color:var(--link);font-weight:600}
.card span{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;font-weight:400}
.sec{margin:38px 0 12px;font-size:var(--font-sm);text-transform:uppercase;
     letter-spacing:.07em;color:var(--text-secondary);font-weight:600}
.secblurb{margin:-6px 0 14px;color:var(--text-secondary);font-size:var(--font-sm)}

/* ---------------------------------------------------------------- phones */
/* 600px is the app's own primary breakpoint (mixins.scss). Supported down to 375px. */
@media screen and (max-width:600px){
  body{font-size:var(--font-base)}
  h1{font-size:var(--font-xl)}
  h2{font-size:var(--font-lg)}
  h3{font-size:var(--font-md)}
  .lede{font-size:var(--font-md)}
  .wrap{padding:20px 16px 70px}
  th,td{padding:11px 10px}
  table{font-size:var(--font-sm)}
  .note,.warn{padding:14px 16px}
  .next,.sibs{padding:18px}
  ol.steps>li{padding-left:48px}
  ol.steps>li::before{width:34px;height:34px;font-size:var(--font-base)}
  .zoom{display:inline;color:var(--link);font-weight:600}
  .sibs li{margin-bottom:15px}
  .next p{margin:0 0 13px}
  .sibs a,.next a{display:inline-block;padding:3px 0}
}