/* App layout only — colours come from the --gd-* tokens in theme.css, components from Bulma. */

.site-main {
    max-width: 70rem;
}

.site-main.site-main-wide {
    max-width: 85rem;
}

.section {
    padding: 2.5rem 1rem 4rem;
}

/* --- top bar --------------------------------------------------------------- */

.site-navbar {
    min-height: 4rem;
    border-bottom: 1px solid var(--gd-line);
    background-color: var(--gd-surface);
}

.site-navbar .navbar-item {
    color: var(--gd-ink-2);
    font-weight: 500;
}

.site-navbar a.navbar-item:hover {
    background-color: transparent;
    color: var(--gd-ink);
}

.site-navbar .navbar-item.is-current {
    color: var(--gd-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--gd-primary);
}

.navbar-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.navbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.site-navbar .site-name {
    gap: 0.6rem;
    color: var(--gd-ink);
    font-size: 1.25rem;
}

.site-logo {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: var(--gd-logo-tile);
    color: var(--gd-brass);
}

.site-user {
    color: var(--gd-muted) !important;
    font-size: 0.9rem;
}

.site-navbar .navbar-cta:hover {
    background-color: transparent;
}

/* --- footer ---------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--gd-line);
    background-color: var(--gd-surface);
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.75rem 1.5rem;
}

.site-footer a:not(.button) {
    color: var(--gd-muted);
}

/* --- shared page parts ----------------------------------------------------- */

.page-head {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gd-line);
}

.page-head .title {
    margin-bottom: 0.4rem;
}

.eyebrow {
    margin-bottom: 0.75rem;
    color: var(--gd-link);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.list-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gd-line);
}

.list-head .title {
    margin-bottom: 0;
}

.field-help {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
}

.messages {
    margin-bottom: 1.5rem;
}

.unit-addon {
    align-self: flex-end;
}

.back-link {
    margin-top: 2rem;
    font-size: 0.95rem;
}

.auth-box {
    padding: 2.25rem 2rem;
    box-shadow: var(--gd-shadow-raised);
}

/* --- landing page ---------------------------------------------------------- */

.landing-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0 4.5rem;
}

.landing-hero .title {
    margin-bottom: 1.25rem;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1.04;
    text-wrap: balance;
}

.landing-lead {
    max-width: 34rem;
    margin-bottom: 1.75rem;
    color: var(--gd-ink-2);
    font-size: 1.2rem;
    text-wrap: pretty;
}

.landing-note {
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.landing-plan {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-plan-card {
    padding: 1.25rem;
    border: 1px solid var(--gd-line);
    border-radius: 1rem;
    background-color: var(--gd-surface);
    box-shadow: var(--gd-shadow-raised);
}

.landing-plan-card svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The plan sketch takes its colours from the theme, so it turns into chalk on dark paper. */
.plan-paper { fill: var(--gd-paper); }
.plan-grid-line { fill: none; stroke: var(--gd-line); stroke-width: 1; }
.plan-house { fill: var(--gd-surface-2); stroke: var(--gd-ink-2); stroke-width: 2; }
.plan-roof { fill: none; stroke: var(--gd-ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.plan-path { fill: none; stroke: color-mix(in srgb, var(--gd-brass) 55%, var(--gd-paper)); stroke-width: 18; stroke-linecap: round; }
.plan-path-edge { fill: none; stroke: var(--gd-muted); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.plan-lawn { fill: var(--gd-success-bg); stroke: color-mix(in srgb, var(--gd-primary) 50%, var(--gd-paper)); stroke-width: 1.5; }
.plan-tree { fill: color-mix(in srgb, var(--gd-primary) 22%, var(--gd-paper)); stroke: var(--gd-primary); stroke-width: 2; }
.plan-trunk { fill: var(--gd-primary); }
.plan-pond { fill: var(--gd-info-bg); stroke: var(--gd-info-ink); stroke-width: 2; }
.plan-hedge { stroke: var(--gd-primary); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 14; }

.landing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--gd-ink-2);
    font-size: 0.85rem;
}

.landing-chips span {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background-color: var(--gd-surface-2);
}

.landing-band {
    margin: 0 calc(50% - 50vw);
    padding: 4.5rem calc(50vw - 50%);
    border-top: 1px solid var(--gd-line);
    border-bottom: 1px solid var(--gd-line);
    background-color: var(--gd-surface);
}

.landing-band > .title {
    margin-bottom: 2.5rem;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 2.5rem;
    list-style: none;
}

.landing-steps li {
    padding-top: 1.25rem;
    border-top: 2px solid var(--gd-ink);
}

.landing-steps .title {
    margin: 0.5rem 0 0.5rem;
}

.landing-steps p {
    color: var(--gd-ink-2);
}

.landing-step-number {
    color: var(--gd-muted);
    font-family: var(--gd-font-display);
    font-size: 0.9rem;
    font-weight: 600;
}

.landing-reads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: 3rem;
    align-items: start;
    padding: 4.5rem 0;
}

.landing-reads p {
    color: var(--gd-ink-2);
}

.landing-elements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--gd-line);
    border-radius: 0.75rem;
    background-color: var(--gd-line);
    list-style: none;
}

.landing-elements li {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background-color: var(--gd-surface);
}

.landing-elements strong {
    font-weight: 600;
}

.landing-elements span {
    color: var(--gd-muted);
    font-size: 0.85rem;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 3.5rem 3rem;
    border: 1px solid var(--gd-logo-tile-border);
    border-radius: 1.25rem;
    background-color: var(--gd-logo-tile);
    color: var(--gd-on-logo-tile);
}

.landing-cta .title {
    margin-bottom: 0.5rem;
    color: var(--gd-on-logo-tile);
}

.landing-cta p {
    color: var(--gd-on-logo-tile-muted);
}

/* --- My gardens ------------------------------------------------------------ */

.garden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
}

.garden-card {
    display: block;
    overflow: hidden;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.garden-card:hover {
    border-color: var(--gd-field-border);
    box-shadow: var(--gd-shadow-raised);
}

.garden-card-image {
    position: relative;
    aspect-ratio: 3 / 2;
    border-bottom: 1px solid var(--gd-line);
    background-color: var(--gd-canvas);
}

.garden-card-image img,
.garden-card-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.garden-card-image img {
    object-fit: cover;
}

.garden-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86927E;
}

.garden-card-placeholder .leaf-logo {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
}

.garden-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.tag.status-pending,
.tag.status-none {
    background-color: var(--gd-neutral-bg);
    color: var(--gd-neutral-ink);
}

.empty-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 2rem;
    text-align: center;
}

.empty-invite p {
    max-width: 28rem;
    color: var(--gd-ink-2);
}

.empty-invite-icon {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.empty-invite-icon .leaf-logo {
    width: 1.75rem;
    height: 1.75rem;
}

/* --- upload ---------------------------------------------------------------- */

.upload-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.upload-layout > .box:first-child {
    flex: 999 1 32rem;
    min-width: 0;
    margin-bottom: 0;
    padding: 1.75rem;
}

.upload-tips {
    flex: 1 1 16rem;
    min-width: 0;
}

.upload-tips ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    color: var(--gd-ink-2);
    list-style: disc;
}

.upload-tips li + li {
    margin-top: 0.4rem;
}

/* --- garden page ----------------------------------------------------------- */

.garden-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.garden-head .title {
    margin-bottom: 0;
}

.garden-head + .subtitle {
    margin-top: 0.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gd-line);
    color: var(--gd-muted);
}

.summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.summary-tile {
    margin-bottom: 0 !important;
}

.summary-tile .heading {
    margin-bottom: 0.25rem;
    color: var(--gd-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.navbar-logout.button {
    border-color: var(--gd-field-border);
    background-color: transparent;
    color: var(--gd-ink);
}

.garden-status form {
    margin-bottom: 1.25rem;
}

/* --- 3D viewer -------------------------------------------------------------- */

.viewer {
    position: relative;
}

.viewer-canvas {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 20rem;
    border: 1px solid var(--gd-line);
    border-radius: 0.875rem;
    background-color: var(--gd-surface-2);
    touch-action: none;
}

.viewer-canvas[hidden] {
    display: none;
}

.viewer-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(20rem, 80%);
    transform: translate(-50%, -50%);
}

.viewer-hint {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(18, 24, 21, 0.82);
    color: #FFFDF8;
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
}

.viewer-hint[hidden] {
    display: none;
}

.viewer-joystick {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    touch-action: none;
}

.viewer-joystick-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 -1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

/* --- 2D review editor ------------------------------------------------------ */

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--gd-line);
    border-radius: 0.625rem;
    background-color: var(--gd-surface);
}

.editor-add-type[hidden] {
    display: none;
}

.editor-message {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.editor-message[hidden] {
    display: none;
}

.editor-stage-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* The drawing is dark lines on white paper: the stage stays light in both themes. */
.editor-stage {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 70vh;
    min-height: 20rem;
    border: 1px solid var(--gd-line);
    border-radius: 0.75rem;
    background: var(--gd-canvas);
    touch-action: none;
    overflow: hidden;
}

.editor-panel {
    flex: 0 0 17rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0 !important;
    padding: 1.25rem;
}

.editor-panel[hidden] {
    display: none;
}

.editor-panel-title {
    margin: 0;
    font-size: 1.05rem;
}

.editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.editor-note {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--gd-warning-bg);
    color: var(--gd-warning-ink) !important;
    font-size: 0.85rem;
}

.editor-note[hidden] {
    display: none;
}

#editor-delete {
    align-self: stretch;
}

.editor-scale-current {
    margin: 0;
    font-size: 0.9rem;
}

.editor-scale-divider {
    margin: 0.25rem 0;
}

.editor-panel .help {
    margin: 0;
}

.editor-panel .help[hidden] {
    display: none;
}

@media (max-width: 40rem) {
    .editor-stage-row {
        flex-direction: column;
    }

    .editor-panel {
        flex-basis: auto;
        width: 100%;
    }
}

/* --- guide page ------------------------------------------------------------ */

.guide-section {
    scroll-margin-top: 1rem;
    padding-top: 1.5rem;
}

.guide-rules {
    border: 1px solid var(--gd-line);
}

.guide-examples,
.guide-elements {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.guide-examples {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

/* Drawings and 3D renders keep their own light paper in both themes. */
.guide-example .card-image {
    background-color: var(--gd-canvas);
}

.guide-example img {
    display: block;
    width: 100%;
    height: auto;
}

.guide-example-fields dt {
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.guide-example-fields dd {
    margin: 0 0 0.5rem;
}

.guide-kind {
    margin-top: 2rem;
    color: var(--gd-muted);
    font-family: var(--gd-font-text);
    font-size: 0.8rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-element-image {
    aspect-ratio: 1;
    background-color: var(--gd-surface-2);
}

.guide-element-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-element-hint {
    margin-bottom: 0.75rem;
    color: var(--gd-ink-2);
    font-size: 0.95rem;
}

.guide-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.guide-variant {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.65rem 0.15rem 0.15rem;
    border-radius: 999px;
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
    font-size: 0.85rem;
    font-weight: 500;
}

.guide-variant:not(:has(img)) {
    padding-left: 0.65rem;
}

.guide-variant img {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
}

.guide-render-canvas {
    display: block;
    width: 640px;
    height: 640px;
    border: 1px solid var(--gd-line);
}

.guide-render-log {
    margin-top: 1rem;
    font-family: monospace;
    font-size: 0.85rem;
}

/* --- shared parts added with the professional theme ------------------------- */

.button .icon-svg {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}

.button .icon-svg + span {
    margin-left: 0.45em;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.crumbs a:not(.button) {
    color: var(--gd-muted);
}

.crumbs [aria-current] {
    color: var(--gd-ink);
}

.garden-page-head,
.tool-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
}

.garden-page-head .subtitle {
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
}

.page-actions,
.tool-head-actions {
    margin-bottom: 0 !important;
}

.tool-head {
    align-items: center;
    margin-bottom: 1rem;
}

.tool-head .title {
    margin-bottom: 0;
}

.list-count {
    margin-top: 0.25rem;
    color: var(--gd-muted);
}

.side-card {
    padding: 1.25rem 1.4rem;
}

.side-card .title {
    margin-bottom: 0.9rem;
}

.check-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
    color: var(--gd-ink-2);
}

.check-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.check-list .icon-svg {
    flex: none;
    margin-top: 0.2rem;
    color: var(--gd-primary);
}

.form-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gd-line);
}

.upload-box {
    flex: 999 1 32rem;
    min-width: 0;
    margin-bottom: 0 !important;
    padding: 1.75rem;
}

/* The file field as a drop zone: the native input covers it, so a dropped file lands in it. */
.file-drop .file-label {
    position: relative;
    width: 100%;
}

.file-drop-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--gd-field-border);
    border-radius: 0.75rem;
    background-color: var(--gd-paper);
    text-align: center;
}

.file-drop:hover .file-drop-body,
.file-drop .file-input:focus-visible + .file-drop-body {
    border-color: var(--gd-primary);
    background-color: var(--gd-success-bg);
}

.file-drop.is-danger .file-drop-body {
    border-color: var(--gd-danger-ink);
}

.file-drop-icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.file-drop-icon .icon-svg {
    width: 1.5rem;
    height: 1.5rem;
}

.file-drop-text {
    font-weight: 600;
}

.file-drop-link {
    color: var(--gd-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.file-drop .file-name {
    max-width: 100%;
    border: 0;
    background: transparent;
    color: var(--gd-muted);
    font-size: 0.9rem;
}

.status-note {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.status-note > .icon-svg {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.1rem;
}

.status-note > div {
    flex: 1;
}

.status-note-title {
    font-weight: 600;
}

.status-note .block {
    margin-bottom: 0.75rem;
}

.garden-done {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

/* The drawing keeps its own light paper in both themes. */
.garden-drawing {
    flex: 999 1 30rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--gd-line);
    border-radius: 0.75rem;
    background-color: var(--gd-canvas);
}

.garden-drawing img {
    display: block;
    width: 100%;
    height: auto;
}

.garden-facts {
    flex: 1 1 18rem;
    min-width: 0;
}

.garden-facts .summary-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid var(--gd-line);
    border-radius: 0.5rem;
    background-color: var(--gd-line);
}

.garden-facts .summary-tile {
    padding: 0.9rem 1rem;
    background-color: var(--gd-surface);
}

.garden-facts .summary-tile .title {
    margin: 0;
}

.toolbar-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.25rem;
    background-color: var(--gd-line);
}

.toolbar-hint {
    margin-left: auto;
    color: var(--gd-muted);
    font-size: 0.85rem;
}

.editor-add {
    border-color: transparent;
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.editor-add:hover {
    border-color: transparent;
    color: var(--gd-success-ink);
}

.key-help {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 1rem;
    color: var(--gd-muted);
    font-size: 0.875rem;
}

kbd {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--gd-line);
    border-radius: 0.25rem;
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font-family: inherit;
    font-size: 0.8rem;
}

.table-box {
    padding: 0;
    overflow: hidden;
}

.table-box .table {
    margin-bottom: 0;
}

/* --- account pages --------------------------------------------------------- */

.auth-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 0 3rem;
}

.auth-layout .auth-box {
    flex: 0 1 28rem;
    width: 100%;
    min-width: 0;
}

.auth-intro {
    flex: 1 1 20rem;
    max-width: 28rem;
    padding-top: 0.75rem;
}

.auth-intro .title {
    margin-bottom: 1.5rem;
    font-size: clamp(1.9rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    text-wrap: balance;
}

.auth-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

.auth-steps li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.auth-steps li > span:last-child {
    display: flex;
    flex-direction: column;
    color: var(--gd-ink-2);
}

.auth-steps strong {
    color: var(--gd-ink);
    font-weight: 600;
}

.auth-step-number {
    display: inline-flex;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gd-primary);
    border-radius: 50%;
    color: var(--gd-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.auth-box .button[type="submit"] {
    width: 100%;
}

/* --- guide page layout ----------------------------------------------------- */

.guide-hero {
    margin: -2.5rem calc(50% - 50vw) 2.5rem;
    padding: 3.5rem calc(50vw - 50%) 3rem;
    border-bottom: 1px solid var(--gd-line);
    background-color: var(--gd-surface);
}

.guide-hero .title {
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 4.5vw, 3rem);
}

.guide-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
}

.guide-toc {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: 0.25rem;
}

.guide-toc-title {
    padding: 0 0.75rem 0.5rem;
    color: var(--gd-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-toc a:not(.button):not(.navbar-item):not(.card) {
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--gd-ink-2);
    text-decoration: none;
}

.guide-toc a:not(.button):not(.navbar-item):not(.card):hover {
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.guide-body {
    flex: 999 1 40rem;
    min-width: 0;
}

.guide-body .guide-section:first-child {
    padding-top: 0;
}

.content ul.guide-rule-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
    list-style: none;
}

.content ul.guide-rule-list li {
    position: relative;
    margin: 0;
    padding: 0.9rem 1rem 0.9rem 2.6rem;
    border: 1px solid var(--gd-line);
    border-radius: 0.75rem;
    background-color: var(--gd-surface);
    color: var(--gd-ink-2);
}

.content ul.guide-rule-list li::before {
    position: absolute;
    top: 1.05rem;
    left: 1rem;
    width: 0.9rem;
    height: 0.5rem;
    border-bottom: 2.5px solid var(--gd-primary);
    border-left: 2.5px solid var(--gd-primary);
    content: "";
    transform: rotate(-45deg);
}

.content ul.guide-rule-list strong {
    color: var(--gd-ink);
}