/* =========================================================================
   How to use this site - tutorial.php.

   A reading page rather than a working one, so it is the one place on the
   site with a measure set for prose: a column wide enough for the screen
   captures and no wider, numbered steps down the left, and figures that keep
   the shot and its caption together.

   Everything here is prefixed .tut- so nothing leaks into the pages being
   described - several of them are open in the next tab while this is read.
   ========================================================================= */

.container.tutorial { max-width: 1020px; }

/* ---- the jump list ---------------------------------------------------- */

.tut-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.tut-toc a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px; text-decoration: none;
    background: #f3f4f6; color: #374151; font-size: 13px; font-weight: 600;
    border: 1px solid #e5e7eb;
}
.tut-toc a:hover { background: #e0e7ff; border-color: #c7d2fe; color: #3730a3; }
/* The chapter being read. It stays in the list rather than being taken out of
   it, so the list is the same shape on every chapter and the eye can find the
   next one without re-reading the row. */
.tut-toc a.active {
    background: #2563eb; border-color: #2563eb; color: #fff;
}
.tut-toc a.active .n { background: #fff; color: #2563eb; }
.tut-toc .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #2563eb; color: #fff; font-size: 11px;
}

/* ---- a section -------------------------------------------------------- */

.tut-section { padding: 24px; scroll-margin-top: 16px; }
.tut-section > h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; margin: 0 0 6px;
}
.tut-section > h2 .tut-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    background: #2563eb; color: #fff; font-size: 14px; font-weight: 700;
}
.tut-section h3 {
    font-size: 15px; margin: 22px 0 6px; color: #111827;
    padding-top: 16px; border-top: 1px solid #eef0f4;
}
.tut-section h3:first-of-type { border-top: 0; padding-top: 0; }
.tut-section p { margin: 0 0 10px; font-size: 14px; color: #374151; }
.tut-lead { color: #6b7280; font-size: 14px; margin: 0 0 14px; }

/* ---- numbered steps --------------------------------------------------- */

.tut-steps { list-style: none; margin: 0 0 4px; padding: 0; counter-reset: step; }
.tut-steps > li {
    position: relative; padding: 0 0 14px 38px; counter-increment: step;
    font-size: 14px; color: #374151;
}
.tut-steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: -1px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700;
    border: 1px solid #c7d2fe;
}
/* The last step of a list sits against whatever follows it, usually a
   figure, and the extra 14px reads as a gap in the list rather than a
   space before the picture. */
.tut-steps > li:last-child { padding-bottom: 2px; }
.tut-steps b { color: #111827; }

/* A plain bulleted list, for the things that are not an order of work. */
.tut-list { margin: 0 0 10px; padding-left: 20px; font-size: 14px; color: #374151; }
.tut-list li { margin-bottom: 6px; }

/* ---- what a thing is called on screen --------------------------------- */

/* The exact wording of a button or a field, so it can be matched by eye
   against the page it is describing rather than translated first. */
.ui {
    display: inline-block; padding: 1px 7px; border-radius: 5px;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    font-size: 13px; font-weight: 600; color: #1f2937; white-space: nowrap;
}
.ui-primary { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ui-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ui-go      { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* ---- callouts --------------------------------------------------------- */

.tut-note, .tut-warn, .tut-do {
    border-radius: 8px; padding: 12px 14px; margin: 14px 0;
    font-size: 14px; line-height: 1.55; border: 1px solid;
}
.tut-note { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.tut-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.tut-do   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.tut-note b, .tut-warn b, .tut-do b { font-weight: 700; }
.tut-note :last-child, .tut-warn :last-child, .tut-do :last-child { margin-bottom: 0; }

/* ---- screen captures --------------------------------------------------- */

.tut-shot { margin: 14px 0 18px; }
/* Natural size, capped at the column. The captures are taken at twice the
   pixel density, so a 1400px file is 700 CSS px of very sharp picture -
   stretching it to the column width would only soften it. */
.tut-shot img {
    display: block; width: auto; max-width: 100%; height: auto;
    border: 1px solid #e5e7eb; border-radius: 8px; background: #f4f6fa;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
/* The menu is a tall rail rather than a page, and stretched to the column
   width it would be a metre of nav. Held to its own size instead. */
.tut-shot.tut-portrait img { max-width: 330px; }

.tut-shot figcaption {
    margin-top: 7px; font-size: 12px; color: #6b7280; line-height: 1.5;
}
.tut-shot figcaption b { color: #374151; }

/* ---- back a chapter, on a chapter ------------------------------------- */

.tut-pager {
    display: flex; align-items: stretch; gap: 12px; margin: 4px 0 8px;
}
.tut-pager-btn {
    display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
    padding: 12px 14px; border-radius: 10px; text-decoration: none;
    background: #fff; border: 1px solid #e5e7eb; color: #1f2937;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    transition: border-color .12s, box-shadow .12s, transform .05s;
}
.tut-pager-btn.is-next { justify-content: flex-end; text-align: right; }
a.tut-pager-btn:hover {
    border-color: #bfdbfe; box-shadow: 0 2px 6px rgba(37,99,235,.14);
}
a.tut-pager-btn:active { transform: translateY(1px); }
/* An end of the guide: still drawn, so the other button does not move. */
.tut-pager-btn.is-off { background: transparent; box-shadow: none;
    border-style: dashed; color: #9ca3af; }

.tut-pager-arrow { font-size: 20px; line-height: 1; color: #2563eb; flex: none; }
.tut-pager-btn.is-off .tut-pager-arrow { color: #d1d5db; }

.tut-pager-text { display: flex; flex-direction: column; min-width: 0; }
.tut-pager-kicker {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7280; font-weight: 700;
}
.tut-pager-title {
    font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tut-pager-count {
    display: flex; align-items: center; flex: none;
    font-size: 12px; color: #6b7280; font-weight: 600; white-space: nowrap;
    padding: 0 4px;
}

/* Narrow: the count goes above the two buttons rather than squeezing the
   titles it sits between. */
@media (max-width: 640px) {
    .tut-pager { flex-wrap: wrap; }
    .tut-pager-count { order: -1; width: 100%; justify-content: center; }
    .tut-pager-btn { padding: 10px 12px; }
    .tut-pager-title { font-size: 13px; }
}

/* ---- who may do what --------------------------------------------------- */

.tut-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 4px; }
.tut-table th, .tut-table td {
    text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef0f4;
    vertical-align: top;
}
.tut-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.tut-table td:first-child { font-weight: 600; color: #111827; white-space: nowrap; }
.tut-yes { color: #065f46; font-weight: 600; }
.tut-no  { color: #9ca3af; }

/* ---- the two request kinds, side by side ------------------------------- */

.tut-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 6px; }
.tut-split > div {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; background: #fbfcfe;
}
.tut-split h4 { margin: 0 0 6px; font-size: 14px; }
.tut-split p { font-size: 13px; margin: 0 0 6px; }
.tut-split p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .tut-split { grid-template-columns: 1fr; }
    .tut-section { padding: 18px 16px; }
}

/* On paper the jump list is a row of dead links and the rail is gone
   already; the captures and the words are the half worth printing. */
@media print {
    .tut-toc, .tut-pager { display: none !important; }
    .tut-section { break-inside: avoid; box-shadow: none; border: 1px solid #e5e7eb; }
}