/* =====================================================================
   Time Tracker — guide pages (the public SEO articles).

   Loaded after landing.css and built on its variables, buttons, hero, cards,
   steps, FAQ, CTA band, header and footer. This file only adds what an
   article needs and the homepage does not: a contents list, prose
   typography, the example-report card, callouts and screenshot frames.
   Hand-written and unbuilt, like landing.css.
   ===================================================================== */

/* ---------- Hero (single column variant of .hero) ---------- */

.guide-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.guide-hero .hero-copy { max-width: 820px; }
.guide-hero .hero-lede { max-width: 700px; }
.guide-hero .hero-note {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--night-faint);
}

/* ---------- Article layout ---------- */

.guide-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.guide-toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding: 20px 20px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14.5px;
}
.guide-toc-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.guide-toc ol { margin: 0; padding: 0; list-style: none; }
.guide-toc li + li { margin-top: 2px; }
.guide-toc a {
    display: block;
    padding: 6px 10px;
    margin-inline: -10px;
    border-radius: 8px;
    color: var(--muted);
    line-height: 1.4;
}
.guide-toc a:hover { background: #fff; color: var(--brand); }

/* ---------- Prose ---------- */

.prose { min-width: 0; max-width: 760px; }
.prose > section + section { margin-top: clamp(44px, 5vw, 64px); }

.prose h2 {
    margin-bottom: 16px;
    font-size: clamp(26px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ink);
}
.prose h3 {
    margin: 28px 0 8px;
    font-size: 19px;
    color: var(--ink);
}
.prose p { margin-top: 14px; font-size: 17px; color: #36435D; }
.prose h2 + p { margin-top: 0; }
.prose a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 59, 179, .35); }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }
.prose strong { color: var(--ink); }

.prose ul,
.prose ol.plain { margin: 16px 0 0; padding-left: 22px; font-size: 17px; color: #36435D; }
.prose li { margin-top: 8px; padding-left: 4px; }
.prose ul:not(.tags) { list-style: disc; }
.prose li::marker { color: var(--brand); }

/* Task-type names as small labels. */
.prose .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.prose .tags li { margin: 0; padding: 6px 13px; background: #EEF1FF; border: 1px solid #DCE2FA; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--brand-700); }

/* ---------- Two-column comparison (IT guide: planned vs unplanned work) ---------- */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.compare-col { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.compare-col--a { background: #F5F7FF; border-color: #DCE2FA; }
.compare-col--b { background: #FFF9EE; border-color: #F4E3BC; }
.prose .compare-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand);
}
.compare-col--b .compare-label { color: #8A5B00; }
.prose .compare-col h3 { margin: 6px 0 0; font-size: 19px; }
.prose .compare-col > p:not(.compare-label) { margin-top: 8px; font-size: 15.5px; color: var(--muted); }
.prose .compare-col ul { margin: 14px 0 0; padding-left: 20px; }
.prose .compare-col li { margin-top: 6px; font-size: 15.5px; color: #36435D; }
.compare-col--b li::marker { color: #C98A00; }

/* ---------- Reference table (task type, what goes in it, which side) ---------- */

.matrix { width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.matrix th,
.matrix td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF1F6; }
.matrix thead th { background: #FBFCFE; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.matrix tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.matrix td { color: #36435D; }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .side { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.matrix .side--planned { background: #EEF1FF; color: var(--brand-700); }
.matrix .side--unplanned { background: #FFF1D1; color: #7A4F00; }
.matrix .side--either { background: #EAF6F5; color: #1E5F5A; }

/* ---------- Q and A list ("what the log lets you answer") ---------- */

.qa { margin: 20px 0 0; padding: 0; }
.qa dt { margin-top: 18px; font-size: 17px; font-weight: 700; color: var(--ink); }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 4px 0 0; font-size: 16.5px; color: #36435D; }

/* ---------- The short answer (project guide) ---------- */

.answer { margin-top: 20px; padding: 22px 24px 18px; background: #F5F7FF; border: 1px solid #DCE2FA; border-left: 4px solid var(--brand); border-radius: var(--radius); }
.prose .answer-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--brand); }
.prose .answer ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: answer; }
.prose .answer li { counter-increment: answer; position: relative; margin: 0; padding: 8px 0 8px 42px; font-size: 16.5px; color: #36435D; }
.prose .answer li::before {
    content: counter(answer);
    position: absolute;
    left: 0;
    top: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

/* Inline code, for the one Excel formula a guide gives. */
.prose code {
    padding: 2px 7px;
    background: #F1F4FA;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ---------- Callouts and the mid-page related link ---------- */

.callout {
    margin-top: 22px;
    padding: 16px 20px;
    background: #F1FAF9;
    border: 1px solid #CDEBE8;
    border-left: 4px solid var(--teal);
    border-radius: 10px;
    font-size: 15.5px;
    color: #2D4A48;
}
.callout p { margin: 0; font-size: inherit; color: inherit; }
.callout p + p { margin-top: 10px; }
.callout strong { color: #17423F; }

.prose .related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 26px;
    padding: 16px 20px;
    background: #EEF1FF;
    border: 1px solid #DCE2FA;
    border-radius: 12px;
    font-size: 16px;
    color: var(--ink);
}
.related b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.prose .related a { font-weight: 600; }

/* ---------- Cards and steps inside an article ---------- */

.prose .card-grid { margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.prose .card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.prose .card h3 { margin: 0; font-size: 17.5px; }
.prose .card p { font-size: 15px; color: var(--muted); }

.prose .steps { margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.prose .step { padding: 22px 20px; }
.prose .step h3 { margin: 0; font-size: 16.5px; }
.prose .step p { font-size: 14.5px; color: var(--muted); }

/* ---------- A day with the timer ---------- */

.timeline { margin: 22px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.prose .timeline li { position: relative; margin: 0; padding: 0 0 22px 26px; }
.prose .timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--brand);
}
.timeline time {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.timeline strong { display: block; font-size: 17px; }
.timeline span { display: block; margin-top: 2px; font-size: 15.5px; color: var(--muted); }

/* ---------- Example report ---------- */

.report {
    container-type: inline-size;
    margin-top: 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 16px 22px;
    background: #FBFCFE;
    border-bottom: 1px solid var(--line);
}
.report-head strong { font-size: 16px; color: var(--ink); }
.report-head span { font-size: 13.5px; color: var(--faint); }

.report table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.report th,
.report td { padding: 14px 22px; text-align: left; border-bottom: 1px solid #EEF1F6; }
.report thead th {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--faint);
}
.report tbody th { font-weight: 600; color: var(--ink); }
.report td { color: var(--muted); font-variant-numeric: tabular-nums; }
.report th.time,
.report td.time { text-align: right; }
.report td.time { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--ink); white-space: nowrap; }
.report tfoot th,
.report tfoot td { border-bottom: 0; background: #F4F6FC; font-weight: 700; color: var(--ink); }

/* A .report that is a copy of the Reports screen: six columns, so it stacks
   into one small card per entry on a phone. */
.report table.log { font-size: 13.5px; }
.report table.log th,
.report table.log td { padding: 11px 10px; }
.report table.log td { white-space: nowrap; }
.report table.log td.wrap { white-space: normal; min-width: 120px; }
.report table.log tfoot th { text-align: right; }

/* ---------- The timesheet template shown as a table ---------- */

/* A spreadsheet keeps its columns, so on a narrow screen it scrolls sideways
   instead of stacking. Shaded cells are the ones the file works out itself. */
.sheet { margin-top: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.sheet-scroll { overflow-x: auto; }
.sheet table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sheet th,
.sheet td { padding: 8px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF1F6; white-space: nowrap; }
.sheet thead th { background: var(--brand); font-weight: 700; color: #fff; white-space: normal; vertical-align: bottom; }
.sheet td { color: #36435D; }
.sheet td.auto { background: #F1F4FA; }
.sheet .num { text-align: right; }
.sheet td.wrap { min-width: 150px; white-space: normal; }
.sheet tr.day-end td { border-bottom-color: #C5CEDF; }
.sheet tbody tr:last-child td { border-bottom: 0; }

/* ---------- Screenshots ---------- */

.shot { margin: 26px 0 0; }
.shot a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--white);
    cursor: zoom-in;
}
.shot img { width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--faint); text-align: center; }

/* Long list screenshots: show the top and fade out, the full image is one click away. */
.shot--crop a { max-height: 520px; }
.shot--crop a::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 85%);
    pointer-events: none;
}
.shot--crop img { object-fit: cover; object-position: top; }

/* The desktop app's window: shown near its real size, centred. */
.shot--narrow { max-width: 420px; margin-inline: auto; }

/* ---------- The complete guide: parts and numbered steps ---------- */

/* A documentation layout: the contents are a full-height sidebar against the
   left edge of the window, and the article sits in the space beside them.
   Only the complete guide uses it; the shorter guides keep .guide-layout. */
.guide-docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.guide-docs-main { padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 64px) clamp(64px, 8vw, 112px); }
.guide-docs-main .prose { margin-inline: auto; }

.guide-toc--side {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 32px 24px 40px 28px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
}
.guide-toc--side > ol > li + li { margin-top: 12px; }
.guide-toc .toc-part { font-weight: 700; color: var(--ink); }
.guide-toc ol ol { margin-top: 2px; }
.guide-toc ol ol a { padding-block: 4px; font-size: 14px; }
.guide-toc ol ol span { display: inline-block; min-width: 1.7em; color: var(--faint); font-variant-numeric: tabular-nums; }

/* A part: its label, heading and a short intro, then the steps. */
.part-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.prose .part-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.prose .part-head h2 { margin-bottom: 10px; }

.gstep { margin-top: 36px; }
.gstep + .gstep { padding-top: 36px; border-top: 1px dashed var(--line); }
.prose .gstep > h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 22px; line-height: 1.25; }
.gstep-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The clicks of a step, in order. */
.prose ol.clicks { margin: 16px 0 0; padding-left: 24px; list-style: decimal; font-size: 17px; color: #36435D; }
.prose ol.clicks li { margin-top: 8px; padding-left: 6px; }
.prose ol.clicks li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Troubleshooting: one card per kind of problem. */
.trouble { margin-top: 20px; padding: 18px 22px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.prose .trouble h4 { margin: 0; font-size: 17.5px; color: var(--ink); }
.prose .trouble .qa { margin-top: 10px; }
.prose .trouble .qa dt { margin-top: 14px; font-size: 16px; }
.prose .trouble .qa dt:first-child { margin-top: 0; }
.prose .trouble .qa dd { font-size: 15.5px; }

/* ---------- FAQ and closing CTA sit in the article's flow ---------- */

.prose .faq { max-width: none; margin-top: 20px; }
.prose .faq-item h3,
.prose .faq-item h4 { margin: 0; }
.guide-cta-title { margin: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .guide-layout { grid-template-columns: minmax(0, 1fr); }
    .guide-toc { position: static; }
    .guide-toc ol { columns: 2; column-gap: 24px; }
    .guide-docs { grid-template-columns: minmax(0, 1fr); }
    .guide-toc--side { height: auto; overflow: visible; padding: 28px clamp(18px, 5vw, 40px); border-right: 0; border-bottom: 1px solid var(--line); }
    .guide-toc ol ol { columns: 1; }
    .guide-toc--side > ol > li { break-inside: avoid; }
}

@media (max-width: 720px) {
    .compare { grid-template-columns: minmax(0, 1fr); }

    /* The three-column table becomes one small card per row. */
    .matrix,
    .matrix tbody,
    .matrix tr,
    .matrix th,
    .matrix td { display: block; }
    .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .matrix tbody tr { padding: 14px 0; border-bottom: 1px solid #EEF1F6; }
    .matrix tbody tr:last-child { border-bottom: 0; }
    .matrix th,
    .matrix td { padding: 2px 18px; border-bottom: 0; }
    .matrix td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-top: 8px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--faint);
    }
}

@media (max-width: 560px) {
    .guide-toc ol { columns: 1; }
    .prose ol.clicks { font-size: 16.5px; }
    .prose .gstep > h3 { font-size: 20px; }
    .prose p,
    .prose ul,
    .prose ol.plain { font-size: 16.5px; }
    .report th,
    .report td { padding: 12px 14px; }
    .report-head { padding-inline: 14px; }
}

/* The example log stacks into one card per entry whenever the card itself is too
   narrow for six columns, which depends on the page layout, not just the screen. */
@container (max-width: 700px) {
    .report table.log,
    .report table.log tbody,
    .report table.log tfoot,
    .report table.log tr,
    .report table.log th,
    .report table.log td { display: block; }
    .report table.log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .report table.log tbody tr { padding: 12px 0; border-bottom: 1px solid #EEF1F6; }
    .report table.log td { padding: 2px 16px; border-bottom: 0; white-space: normal; }
    .report table.log td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 96px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
    .report table.log td.time { text-align: left; font-family: inherit; }
    .report table.log tfoot tr { padding: 12px 16px; background: #F4F6FC; }
    .report table.log tfoot th,
    .report table.log tfoot td { padding: 2px 0; background: none; text-align: left; }
    .report table.log tfoot td:empty { display: none; }
}

/* ---------- The /guides page ---------- */

.guide-group + .guide-group { margin-top: clamp(48px, 6vw, 72px); }
.guide-group h2 { margin-bottom: 20px; }

/* Each card is one link: the title's ::after covers the whole card. */
.guide-group .card { position: relative; }
.guide-group .card h3 a { color: inherit; }
.guide-group .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-group .card:hover h3 a { color: var(--brand); }

@media print {
    .guide-toc { display: none !important; }
}