/* Public reading pages: /help/, /forms/ and /privacy/. Loaded after /fonts/fonts.css and
   /shared/tokens.css, which give the colors, fonts, base type and the shared .card, .mark, .btn,
   .chip, .stamp, .muted and .small. This file is only the layout of these pages.
   Same system as the app and the home page: paper 60 · ink 30 · pen 10, green and red only inside
   stamps, hairline borders instead of shadows, 44px targets. There are no inline styles on these
   pages, so style-src 'self' holds. */

body{padding-inline:20px;padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
.wrap{max-width:680px;margin-inline:auto;padding-block:20px 48px;display:grid;gap:40px}
main{display:grid;gap:48px}
main:focus{outline:none}
h2{font-size:1.4rem}
h3{font-size:1.05rem;letter-spacing:-.01em}
.fine{font-size:.88rem;color:var(--muted)}
.nowrap{white-space:nowrap}

/* Hidden from sight, still read aloud: tells repeated links apart ("Open the blank form: Job Search Log"). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link: off screen until focused. */
.skip{position:absolute;left:12px;top:-120px;z-index:10;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--pen);font-weight:600}
.skip:focus{top:12px}

/* Top bar: the mark, and two links. On the narrowest phones the links wrap under the mark. */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;min-height:48px}
.top .mark{min-height:44px}
.top nav{margin-left:auto}
.top ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.top ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.top ul a:hover{background:var(--pen-wash)}

.intro{display:grid;gap:12px}
.lede{font-size:1.1rem;color:var(--muted)}
.meta{font-size:.95rem;color:var(--muted)}

/* A section: its title, then cards. */
.sec{display:grid;gap:12px;scroll-margin-top:16px}

/* A card with room inside (.card is the shared white box with a hairline border). */
.pad{padding:20px;display:grid;gap:12px;justify-items:start}
.pad > p,.pad > ul,.pad > ol{justify-self:stretch}
.big{font-size:1.25rem}

/* Grouped rows, like the app's lists: one card, rows split by hairlines. */
.rows{list-style:none;margin:0;padding:0}
.rows > li{padding:12px 16px;min-height:60px}
.rows > li + li{border-top:1px solid var(--line)}
.row-title{display:block;font-weight:600}
.row-detail{display:block;color:var(--muted);font-size:.95rem}
.row-meta{display:block;color:var(--muted);font-size:.85rem}
.group-head{padding:16px 16px 4px}
.group-foot{padding:12px 16px 16px;border-top:1px solid var(--line)}

/* Who to call: numbered steps in pen circles. The <ol> keeps the order for screen readers. */
.calls{counter-reset:step}
.calls > li{counter-increment:step;display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-content:start}
.calls > li::before{content:counter(step);grid-row:1 / span 2;width:28px;height:28px;margin-top:1px;border-radius:50%;border:2px solid var(--pen);color:var(--pen);display:grid;place-items:center;font:500 .8rem var(--mono)}
.calls .row-title,.calls .row-detail{grid-column:2}

/* Office-visit checklist: plain checkboxes, the whole row is the target. */
.checklist > li{padding:0}
.checklist label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;min-height:60px;padding:12px 16px;cursor:pointer}
.checklist input{width:22px;height:22px;margin:3px 0 0 3px;accent-color:var(--pen);cursor:pointer}
.checklist label:hover{background:var(--pen-wash)}
.row-text{display:block}

/* Lists inside cards */
.bullets{margin:0;padding-left:1.25em;display:grid;gap:6px}
.bullets li::marker{color:var(--muted)}
.steps{margin:0;padding-left:1.6em;display:grid;gap:6px}
.steps li::marker{color:var(--muted);font-family:var(--mono);font-size:.9em}

/* Where a rule comes from. Rules found only in the older slide guide get a tag first. */
.src{display:grid;justify-items:start;gap:4px;font-size:.85rem;line-height:1.45;color:var(--muted)}
.tag{padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600}

/* The live office-hours hint (help.js). */
.hint{padding:10px 14px;border-radius:12px;background:var(--pen-wash);color:var(--ink);font-weight:600}

/* Buttons (.btn, .secondary) come from tokens.css. */
.btn.wide{width:100%}
.btn .icon{width:20px;height:20px}
.icon{flex:0 0 auto;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* A link to FDC's site or another page, with room to tap. */
.ext{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;text-decoration:none}
.ext:hover{text-decoration:underline}

/* "More on this page": a wrap of .chip links. */
.toc{display:grid;gap:10px;padding-top:24px;border-top:1px solid var(--line)}
.toc h2{font-size:1rem;letter-spacing:0;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.toc .chip:hover{border-color:var(--pen)}

/* Topics: each .card opens in place. */
.topics{display:grid;gap:8px}
.topic summary{list-style:none;display:grid;grid-template-columns:1fr 20px;column-gap:12px;align-items:center;min-height:60px;padding:12px 16px;cursor:pointer}
.topic summary::-webkit-details-marker{display:none}
.topic summary::after{content:"";grid-column:2;grid-row:1 / span 2;justify-self:center;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.topic[open] summary::after{margin-top:5px;transform:rotate(225deg)}
.topic summary:hover{background:var(--pen-wash)}
.topic[open] summary{border-bottom:1px solid var(--line)}
.topic-title{grid-column:1;grid-row:1;font-weight:600}
.topic-sum{grid-column:1;grid-row:2;color:var(--muted);font-size:.95rem}
.block{padding:16px;display:grid;gap:10px}
.block + .block{border-top:1px solid var(--line)}
.sub{font-size:1rem;letter-spacing:0}
.links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.links a{font-weight:600}
.links .muted{font-size:.9rem}

/* Forms and guides */
.docs > li{display:grid;gap:2px;padding:16px}
.doc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:10px}
.doc-actions .btn{min-height:44px;padding:0 16px;border-radius:12px}
.note-box{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--pen-wash)}
.fine-stack{display:grid;gap:6px}
.plain-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}

/* Privacy: sections of short paragraphs and lists. */
.prose{display:grid;gap:12px}
.prose > ul{margin:0;padding-left:1.25em;display:grid;gap:8px}
.prose > ul li::marker{color:var(--muted)}
.prose b{font-weight:600}

footer.foot{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot ul{list-style:none;margin:0 0 0 -8px;padding:0;display:flex;flex-wrap:wrap}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}

@media (max-width:380px){
  body{padding-inline:16px}
  .top ul a{padding:0 8px}
  .pad{padding:16px}
}

/* Printing: the text, without the page furniture. */
@media print{
  body{background:#fff;color:#000;padding:0}
  .skip,.top nav,.toc,.foot nav,.doc-actions{display:none}
  .card,.note-box{border-color:#999;background:#fff}
}