/* Copyright © 2025 RPGScience. All rights reserved. No permission is granted to use, copy, modify, or distribute this file. */

/* Reuse before you add. The house rule for this site's CSS is at the top of
   tokens.css. Only what the tutorial alone needs belongs here. */

/* First-time tutorials. Built by js/tutorial/tutorialTour.js, which runs one
   tour at a time over whichever panel it belongs to: the world generator, or a
   dungeon, cave or glade. Two elements only: a see-through hole over the control
   being explained, and a card of text beside it. Both are positioned from
   JavaScript, so nothing here sets top or left. */

/* The dimming is the shadow spreading out from the hole, which saves having a
   second full-screen element. The hole ignores the mouse so every control
   underneath stays usable and nobody can get stuck behind the tutorial.
   Sits above .player-container (20000) and its hint banner (20001), but below
   .modal-overlay (50000) so sign-in still comes out on top. */
.tutorial-hole {
    position: fixed;
    z-index: 20002;
    pointer-events: none;
    border-radius: 4px;
    outline: 2px solid var(--accent-primary);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}

.tutorial-card {
    position: fixed;
    z-index: 20003;
    width: 300px;
    padding: var(--spacing-xl);
    background-color: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-popup);
}

/* Added by the script once both elements have been placed for the first time,
   so step one appears where it belongs instead of sliding in from the corner. */
.tutorial-sliding {
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

/* The card's title bar. Pulled out to the card's edges with negative margins,
   so it stands where the accent stripe used to rather than adding a band under
   it. It names the tutorial because the first one starts on its own, and a
   card that arrives unasked should say what it is before it says anything else.
   The step count rides along, which also shows how short this is and keeps it
   out of the way of the heading.

   Dark text rather than white: the accent is a light safety yellow, and white
   on it is far too faint to read at this size. Tooltips, the only other filled
   accent surface in the app, make the same choice. */
.tutorial-card-banner {
    margin: calc(var(--spacing-xl) * -1) calc(var(--spacing-xl) * -1) 0;
    padding: var(--spacing-sm) var(--spacing-xl);
    /* Sits inside the card's 1px border, so a hair tighter than its own 4px. */
    border-radius: 3px 3px 0 0;
    background-color: var(--accent-primary);
    color: var(--text-headings);
    font-size: var(--font-base);
    font-weight: 600;
}

/* Heading and body sit one notch up the shared type scale from the sidebar,
   since this card is read once and at a glance rather than lived in. */
.tutorial-card-title {
    /* The gap under the bar matches the card's sides, so the words all start on
       the same inset. Tighter below, which keeps the heading tied to the
       paragraph it introduces. */
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-headings);
}

.tutorial-card-body {
    margin: 0;
    font-size: var(--font-lg);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

/* A blank line in a step's body starts a second paragraph, so a card can hold
   a second thought apart from the first rather than burying it in one block.
   The gap matches the one under the heading, which is tighter than a whole
   empty line and keeps a narrow card from looking gappy. */
.tutorial-card-body p {
    margin: 0;
}

.tutorial-card-body p + p {
    margin-top: var(--spacing-md);
}

/* A closing aside about using the thing, rather than another sentence about
   what it is, so it stands a little further off than an ordinary paragraph.
   The label is only bolder, not a badge: small caps and an accent colour gave
   the card a fourth look to read, next to the counter, heading and body. */
.tutorial-card-body p.tutorial-card-tip {
    margin-top: var(--spacing-lg);
}

.tutorial-card-tip-label {
    font-weight: 600;
}

/* Right aligned so Back and Next hold their place on the last step, where
   Skip is dropped. Skip pushes itself left with a margin while it is there.
   Roomier buttons than elsewhere, since the card is read once and at a glance. */
.tutorial-card-actions {
    --btn-pad: var(--spacing-sm) var(--spacing-xl);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* Skip stays away from the pair that moves you along, so it is hard to hit
   by accident but always available. */
.tutorial-card-actions .tutorial-skip {
    margin-right: auto;
}

.tutorial-card-actions .btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* The Tour chip on a sidebar panel heading. It lies over the heading button
   rather than sitting beside it, so the heading keeps its full width, its
   hover highlight and its open/closed arrow at the far right. The padding
   holds a long heading clear of the chip. */
.accordion-header-row {
    position: relative;
}

.accordion-header-row .accordion-header {
    padding-right: 84px;
}

/* Outlined rather than filled, so it reads as something to press rather than
   as a status badge. It is also its own .tooltip host, so these rules have to
   land after components.css to win the position and cursor it sets. */
.tutorial-chip {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 1;
    padding: 1px 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.tutorial-chip:hover {
    color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* The tutorial itself will not run this narrow, so offering it would only
   disappoint. Matches TUTORIAL_MIN_VIEWPORT_WIDTH in tutorialTours.js. */
@media (max-width: 768px) {
    .tutorial-chip {
        display: none;
    }

    .accordion-header-row .accordion-header {
        padding-right: 24px;
    }
}