/*
 * The roaster guide, and the customer one that borrows its shapes.
 *
 * Deliberately NOT scoped to #tapper-cafe-app, unlike the storefront's rules.
 * This markup is drawn in two places -- inside that wrapper on the public page,
 * and inside Dokan's dashboard content where storefront.css is not loaded at
 * all -- and a rule scoped to the first would leave the second as unstyled
 * paragraphs. The `tc-guide` prefix is what keeps it from reaching anything
 * else, since it is a namespace nothing on either page uses.
 *
 * Tokens are declared locally for the same reason: --tc-green and the rest live
 * on #tapper-cafe-app, which is not an ancestor on the dashboard. They are
 * named for what they do and hold the storefront's values as literals.
 *
 * The sections sit in one white card on the page's cream. A line of prose is
 * held to about 68 characters however wide the card is: on the dashboard the
 * card runs the width of the content column, and a paragraph that did the same
 * would be read with a ruler.
 */
.tc-guide {
    --tcg-green: #29594B;
    --tcg-green-dark: #1F463B;
    --tcg-amber: #F3AA22;
    --tcg-ink: #121111;
    --tcg-body: #413E3C;
    --tcg-muted: #6B6660;
    --tcg-line: rgba(18, 17, 17, .1);
    --tcg-band: #F5EFE3;
    --tcg-ring: inset 0 0 0 1px rgba(18, 17, 17, .13), 0 2px 8px rgba(18, 17, 17, .05);
    --tcg-measure: 68ch;

    max-width: 720px;
    margin: 0 auto;
    color: var(--tcg-body);
    font-family: var(--mt-font__main, "Outfit", Arial, sans-serif);
    font-size: 15px;
    line-height: 1.6;
}

.tc-guide__title {
    margin: 0;
    color: var(--tcg-ink);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.tc-guide__standfirst {
    margin: 8px 0 0;
    max-width: var(--tcg-measure);
    color: var(--tcg-body);
    font-size: 16px;
}

/*
 * The card, and the numbering.
 *
 * Numbered, because this is a sequence and not a set of topics. The counter is
 * drawn rather than left to the list marker so that it is part of the heading
 * -- "4. What decides the cup" -- in the heading's ink and weight; a marker
 * would hang outside the card's padding in the body colour.
 */
.tc-guide__sections {
    margin: 24px 0 0;
    padding: 4px 22px;
    border: 1px solid var(--tcg-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(18, 17, 17, .08);
    list-style: none;
    counter-reset: tc-guide;
}

.tc-guide__section {
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--tcg-line);
    counter-increment: tc-guide;
}

.tc-guide__section:first-child {
    border-top: 0;
}

.tc-guide__heading {
    margin: 0 0 8px;
    max-width: var(--tcg-measure);
    color: var(--tcg-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.tc-guide__heading::before {
    content: counter(tc-guide) ". ";
}

.tc-guide__section p {
    margin: 0 0 10px;
    max-width: var(--tcg-measure);
}

.tc-guide__section p:last-child {
    margin-bottom: 0;
}

.tc-guide a {
    color: var(--tcg-green);
}

/*
 * A link in the prose: green, with the amber underline. Three classes and the
 * element, because on the dashboard Dokan strips the underline from every
 * anchor in the content at (0,2,1).
 */
.tc-guide .tc-guide__sections .tc-guide__section a,
.tc-guide.tc-guide--dashboard .tc-guide__foot a {
    color: var(--tcg-green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--tcg-amber);
    text-decoration-thickness: 2px;
    text-underline-offset: .35em;
}

.tc-guide .tc-guide__sections .tc-guide__section a:hover,
.tc-guide.tc-guide--dashboard .tc-guide__foot a:hover {
    color: var(--tcg-green-dark);
}

.tc-guide a:focus-visible {
    outline: 2px solid var(--tcg-green);
    outline-offset: 2px;
}

/*
 * The line that is worth reading twice: the rule about leaving fields blank,
 * the preview, the binding version of the agreement. A cream panel inside the
 * white card, in ink.
 */
.tc-guide__aside {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--tcg-band);
    color: var(--tcg-ink);
    font-size: 14px;
}

/*
 * A part the owner has still to write, or one hidden from visitors until it
 * is true: shown to staff only, as a dashed amber box, so nobody mistakes it
 * for what a customer sees (2026-10-09; the class had no style until then).
 */
.tc-guide .tc-guide__section--gap {
    margin: 12px 0;
    padding: 14px;
    border: 1px dashed var(--tcg-amber);
    border-radius: 12px;
    background: #FFF8E6;
}

.tc-guide .tc-guide__section--gap + * {
    border-top: 0;
}

.tc-guide .tc-guide__section--gap .tc-guide__heading {
    color: var(--tcg-muted);
}

.tc-guide .tc-guide__section--gap .tc-guide__aside {
    padding: 0;
    background: transparent;
}

/* The way back, under the card. As tall as a thumb. */
.tc-guide__foot {
    margin: 12px 0 0;
    font-size: 15px;
}

.tc-guide__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/*
 * Inside the dashboard there is already a page heading above this, and the
 * card runs the width of the content column as every other dashboard card
 * does. The measure above is what keeps the prose narrow inside it.
 */
.tc-guide--dashboard {
    max-width: none;
    margin: 0;
    padding: 4px 0 24px;
}

.tc-guide--dashboard .tc-guide__standfirst {
    margin-top: 0;
}

.tc-guide--dashboard .tc-guide__sections {
    margin-top: 16px;
}

@media (max-width: 480px) {
    .tc-guide__sections {
        padding: 0 16px;
    }

    .tc-guide__section {
        padding: 16px 0;
    }
}

/* ----- the hub that points at the guides */

.tc-learnHub__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

/* A raised white tile: a hairline ring and a short shadow, no border. */
.tc-learnHub__link {
    display: block;
    box-sizing: border-box;
    height: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--tcg-ring);
    color: inherit;
    text-decoration: none;
}

.tc-learnHub__link:hover,
.tc-learnHub__link:focus {
    box-shadow: inset 0 0 0 1px var(--tcg-green), 0 6px 16px rgba(18, 17, 17, .1);
    text-decoration: none;
}

.tc-learnHub__name {
    display: block;
    margin-bottom: 4px;
    color: var(--tcg-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.tc-learnHub__blurb {
    display: block;
    color: var(--tcg-muted);
    font-size: 14px;
    line-height: 1.5;
}

/*
 * Fast delivery | Standard delivery (TT_Way_Tabs, 2026-10-07). On the
 * dashboard the strip is styled once in tt-dashboard-skin.css; the public
 * guide has no dashboard sheet, so it gets the same shape here.
 */
.tc-guide--public .tt-lanes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.tc-guide--public .tt-lanes__tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 16px;
    border: 1px solid var(--tcg-line, rgba(18, 17, 17, 0.12));
    border-radius: 999px;
    background: #fff;
    color: var(--tcg-ink, #121111);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.tc-guide--public .tt-lanes__tab.is-current {
    border-color: var(--tcg-ink, #121111);
    background: var(--tcg-ink, #121111);
    color: #fff;
}