/* Additions for text pages (docs/notes/, docs/tutorials/).
   uoft_physics_perc_sw.css is shared with phyduino_pico and stays unchanged. */

.doc-page .board-desc + .board-desc { margin-top: -0.5rem; }

/* Header title with a smaller line under it, as in the Doxygen header */
.header-title-block    { margin-left: auto; display: flex; flex-direction: column;
                         align-items: flex-end; gap: 4px; line-height: 1.2; }
.header-title-block .header-board-title { margin-left: 0; }
.header-subtitle       { font-family: var(--sans); font-size: 16px; font-weight: 500;
                         color: rgba(255, 255, 255, 0.65); }
@media (max-width: 600px) {
  .header-title-block  { margin-left: 0; align-items: center; }
}

/* Running text between steps and tables */
.doc-text            { font-size: 14px; line-height: 1.65; color: var(--text-2);
                       margin: 0 5px 1.25rem; }
.doc-text p          { margin: 0 0 0.75rem; }
.doc-text ul         { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.doc-text li         { margin-bottom: 0.35rem; }

/* Inside a step */
.step-body           { min-width: 0; flex: 1; }
.step-body p         { margin: 0; }
.step-body p + p,
.step-body pre + p,
.step-body ul + p    { margin-top: 6px; }
.step-body ul        { margin: 6px 0 0; padding-left: 1.25rem; }
.step-body li        { margin-bottom: 4px; }

/* Inline code everywhere (the shared sheet styles it only inside .step-body) */
.doc-page code       { font-family: var(--mono); font-size: 12px; background: var(--surface);
                       border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.step-body code      { background: var(--bg); }
.ds-table td code    { background: none; border: none; padding: 0; }
.doc-page a code     { color: #005F7A; }

/* Code blocks */
.doc-page pre.code   { font-family: var(--mono); font-size: 12px; line-height: 1.5;
                       color: var(--text); background: var(--surface);
                       border: 1px solid var(--border); border-radius: var(--r);
                       padding: 10px 14px; margin: 0 0 0.75rem; overflow-x: auto; }
.step-body pre.code  { background: var(--bg); margin: 8px 0; }
.doc-page pre.code code { background: none; border: none; padding: 0; font-size: inherit; }

/* Spec pills that link to a product's home page */
.spec-pill a         { color: inherit; text-decoration: none; }
.spec-pill a:hover   { color: var(--accent); text-decoration: underline; }

.doc-page .ds-table-wrap { margin-bottom: 1.25rem; }

/* Header row, kept on tables with more than two columns */
.doc-page .ds-table th { font-family: var(--mono); font-size: 11px; font-weight: 500;
                         letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
                         text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border);
                         background: var(--bg); }
.doc-page .ds-table th:last-child { padding: 0; }
.doc-page .ds-table td:not(:first-child) { color: var(--text-2); font-size: 13px; }

/* Box-drawing diagrams: IBM Plex Mono lacks these glyphs, so use a font that has them
   (the stack the hardware checklists use for their wiring diagrams) */
.doc-page pre.code.diagram { font-family: Consolas, "Cascadia Mono", Menlo, "DejaVu Sans Mono", monospace;
                             line-height: 1.25; }

/* Sidebar navigation on the right (index.html). The page widens by the sidebar's
   width and gap, so the main column stays at the usual 860px page width */
.doc-page.has-nav    { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 180px;
                       gap: 40px; align-items: start; }
.doc-nav             { position: sticky; top: 1.5rem; margin-top: 2rem;
                       border-left: 1px solid var(--border); padding-left: 16px; }
.doc-nav-head        { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500;
                       letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
                       margin-bottom: 8px; }
.doc-nav ul          { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.doc-nav li          { margin-bottom: 6px; }
.doc-nav a           { font-size: 13px; line-height: 1.4; color: var(--text-2); text-decoration: none; }
.doc-nav a:hover     { color: var(--accent); }
/* Links that leave this page start with '>' */
.doc-nav-ext a::before { content: "> "; font-family: var(--mono); color: var(--text-3); }
.doc-page .section-head[id] { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.doc-nav) { scroll-behavior: smooth; }
}

/* Narrow screens: one column, no sidebar */
@media (max-width: 960px) {
  .doc-page.has-nav  { display: block; max-width: 860px; }
  .doc-nav           { display: none; }
}

/* Tutorial articles (docs/tutorials/), laid out like a U of T Physics news article:
   large title over an orange rule, a lead line, the date, then one column of text */
.article             { max-width: 720px; }
.article-header h1   { font-family: var(--sans); font-size: 32px; font-weight: 500; line-height: 1.25;
                       color: var(--uot-blue); padding-bottom: 0.6rem;
                       border-bottom: 2px solid #B54517; margin-bottom: 1rem; }
.article-intro       { font-size: 19px; line-height: 1.5; color: #343434; margin-bottom: 1rem; }
.article-meta        { font-size: 14px; color: rgba(0, 42, 92, 0.7); margin-bottom: 2rem; }
.article-body        { font-size: 16px; line-height: 1.75; color: var(--text); }
.article a           { color: #005F7A; }
.article-body h2     { font-family: var(--sans); font-size: 22px; font-weight: 500; color: var(--uot-blue);
                       margin: 2.5rem 0 1rem; scroll-margin-top: 1rem; }
.article-body p      { margin: 0 0 1rem; }
.article-body ul     { margin: 0 0 1rem; padding-left: 1.5rem; }
.article-body ol     { margin: 0 0 1.25rem; padding-left: 1.75rem; }
.article-body li     { margin-bottom: 0.6rem; }
.article-body li::marker { color: var(--uot-blue); font-weight: 500; }
.article-body pre.code { font-size: 13px; margin: 0.5rem 0 0.75rem; }
.article-body code   { font-size: 13px; }
.article-footer      { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
                       font-size: 14px; color: var(--text-2); }
.article-footer ul   { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.article-footer li   { margin-bottom: 0.35rem; }
@media (max-width: 600px) {
  .article-header h1 { font-size: 26px; }
  .article-intro     { font-size: 17px; }
}

/* Tutorial breadcrumbs end in the page title (.current). On phones the shared sheet hides
   the last link, which here is "Phyduino Pico MicroPython"; keep it, and drop the course-site links instead */
@media (max-width: 600px) {
  .breadcrumb-inner:has(.current) a:last-of-type { display: inline; }
  .breadcrumb-inner:has(.current) a[href^="http"],
  .breadcrumb-inner:has(.current) a[href^="http"] + .sep { display: none; }
}

/* Terminal windows for commands in tutorials, drawn like each system's default terminal:
   .term-win (Windows PowerShell), .term-linux (Ubuntu), .term-mac (macOS Terminal),
   .term-any (any system). Prompts can't be selected, so copying takes only the commands */
.term                { margin: 0.5rem 0 0.75rem; border-radius: var(--r); overflow: hidden;
                       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.term-bar            { position: relative; display: flex; align-items: center; justify-content: center;
                       height: 30px; padding: 0 10px; font-family: system-ui, sans-serif; font-size: 12px; }
.doc-page .term pre.term-body { margin: 0; border: none; border-radius: 0; padding: 10px 14px;
                       font-size: 13px; line-height: 1.5; white-space: pre; overflow-x: auto; }
.doc-page .term-body code { background: none; border: none; padding: 0; color: inherit;
                       font: inherit; }
.term-body .prompt   { user-select: none; -webkit-user-select: none; }
.term-body .out      { opacity: 0.85; }

.term-win .term-bar  { justify-content: flex-start; background: #FFFFFF; color: #000000;
                       border-bottom: 1px solid #E5E5E5; }
.term-win .term-bar::after { content: "\2500\2003\2610\2003\2715"; position: absolute; right: 12px;
                       color: #000000; font-size: 11px; }
.doc-page .term-win pre.term-body { background: #012456; color: #EEEDF0;
                       font-family: Consolas, "Cascadia Mono", var(--mono); }

.term-linux .term-bar { background: #303030; color: #FFFFFF; font-weight: 600;
                       font-family: Ubuntu, system-ui, sans-serif; }
.term-linux .term-bar::after { content: "\2715"; position: absolute; right: 8px; width: 18px; height: 18px;
                       border-radius: 50%; background: #E95420; color: #FFFFFF; font-size: 10px;
                       display: flex; align-items: center; justify-content: center; }
.doc-page .term-linux pre.term-body { background: #300A24; color: #FFFFFF;
                       font-family: "Ubuntu Mono", "DejaVu Sans Mono", var(--mono); }
.term-linux .user    { color: #8AE234; font-weight: 600; }
.term-linux .path    { color: #729FCF; font-weight: 600; }

.term-mac            { border: 1px solid #C8C8C8; }
.term-mac .term-bar  { background: linear-gradient(#EBEBEB, #D5D5D5); color: #4D4D4D;
                       border-bottom: 1px solid #B8B8B8; }
.term-mac .term-bar::before { content: ""; position: absolute; left: 12px; width: 12px; height: 12px;
                       border-radius: 50%; background: #FF5F57;
                       box-shadow: 20px 0 0 #FEBC2E, 40px 0 0 #28C840; }
.doc-page .term-mac pre.term-body { background: #FFFFFF; color: #000000;
                       font-family: "SF Mono", Menlo, var(--mono); }

.term-any .term-bar  { background: #2D2D2D; color: #BBBBBB; }
.doc-page .term-any pre.term-body { background: #1E1E1E; color: #D4D4D4; font-family: var(--mono); }

/* Screenshots in tutorial articles: the picture with a caption under it.
   .figure-todo is a dashed placeholder for a screenshot still to be taken */
.article-figure      { margin: 0.75rem 0 1.25rem; }
.article-figure img  { display: block; max-width: 100%; height: auto; border: 1px solid var(--border);
                       border-radius: var(--r); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.article-figure a     { display: block; }
.article-figure figcaption { margin-top: 0.4rem; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.figure-todo         { display: flex; align-items: center; justify-content: center; min-height: 140px;
                       padding: 1rem; border: 2px dashed var(--border-med); border-radius: var(--r);
                       font-size: 13px; color: var(--text-3); text-align: center; }

/* Heading that is a drop-down of the systems (os_terminals.js); looks like the other headings */
.article-body h2.os-heading { margin-bottom: 1rem; }
.os-heading select   { font: inherit; color: inherit; background: transparent; cursor: pointer;
                       border: none; border-bottom: 2px solid var(--border-med);
                       border-right: 2px solid var(--border-med); border-radius: 0 0 10px 0;
                       padding: 0 10px 4px 0; }
.os-heading select:hover,
.os-heading select:focus-visible { border-color: var(--uot-blue); outline: none; }