/* Crowd Editor public website — shares the editor's library/parchment palette. */

:root {
    --ce-bg: #f7f1e3;
    --ce-paper: #fbf6e6;
    --ce-deep: #efe5cb;
    --ce-ink: #1a1612;
    --ce-ink-soft: #4a3f33;
    --ce-rule: #d3c4a3;
    --ce-accent: #7a5a2a;
    --ce-accent-bold: #5a3f15;
}

html, body {
    margin: 0;
    background: var(--ce-bg);
    color: var(--ce-ink);
    font-family: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", serif;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main { display: block; }

.ce-skip-link { position: absolute; left: -9999px; top: 0; }
.ce-skip-link:focus {
    left: 16px; top: 16px; padding: 8px 12px; background: var(--ce-ink); color: var(--ce-bg); z-index: 1000;
}

/* ---- Top bar -------------------------------------------------------- */
.ce-topnav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(247, 241, 227, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ce-rule);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.ce-brand {
    font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em;
    color: var(--ce-ink); text-decoration: none;
}
/* Visible to assistive technology, not to the eye. The clip-path/1px technique rather than
   display:none or visibility:hidden, both of which remove the element from the accessibility tree
   as well — which would defeat the point of having the heading at all.

   In the shell stylesheet because two pages need it now: the player's title, and the reader's
   fallback heading for a manuscript that does not name itself (issue #52). A utility two pages use
   does not belong in one page's stylesheet, even one that happens to be loaded globally. */
.ce-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ce-topnav-spacer { flex: 1; }

/* Offline indicator. Amber rather than red: being offline is a state, not a failure, and the
   writer's work is still safe on the device. `hidden` does the hiding, so this only ever describes
   the shown form — a display rule here would fight the attribute the script sets. */
.ce-connectivity {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid #b58a1b;
    background: rgba(201, 162, 39, 0.14);
    color: #6b5310;
    font-size: 0.85rem;
    white-space: nowrap;
}
.ce-connectivity-label { font-weight: 600; }
/* The reassurance is the first thing to go when the bar is tight; the word "Offline" is the part
   that has to survive, and a narrow screen is where a writer is likeliest to lose signal. */
@media (max-width: 720px) {
    .ce-connectivity-detail { display: none; }
}
/* The palette's link colour, for every anchor that has not been given one.

   Half the product's links carried no class — 31 of 63 anchors — and only four
   contexts styled anchors by element, so everything else fell through to the
   browser default: blue, underlined, on a cream page. That included the
   profile's project list, the cast page's navigation, the fork lineage on the
   reader, both not-found pages, and links a writer put inside their own
   manuscript, which `Read.razor` renders as bare anchors.

   No sweep found it because every styling ratchet derives its list from the
   classes present in the markup and asks whether each is styled; an element
   with no class is not in the list. So this is a base rule rather than a class
   per site — the alternative was thirty-one new classes, and the next unclassed
   anchor would have been blue again. Anything more specific still wins,
   including `.ce-btn`, which is a control rather than a link. */
a { color: var(--ce-accent); }

.ce-topnav a { color: var(--ce-ink-soft); text-decoration: none; font-size: 0.95rem; }
.ce-topnav a:hover { color: var(--ce-accent-bold); }

/* Profile + sign-out read as a single segmented control: shared border, no gap
   between segments, outer corners pilled. */
.ce-topnav-userbtns {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ce-rule);
    border-radius: 999px;
    background: var(--ce-paper);
    overflow: hidden;
}
.ce-topnav-userbtns:hover { border-color: var(--ce-accent); }

.ce-topnav-profile {
    padding: 4px 14px;
    color: var(--ce-ink) !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}
.ce-topnav-profile:hover { color: var(--ce-accent-bold) !important; background: var(--ce-deep); }

.ce-topnav-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-left: 1px solid var(--ce-rule);
    color: var(--ce-ink-soft) !important;
}
.ce-topnav-signout:hover {
    background: var(--ce-deep);
    color: var(--ce-accent-bold) !important;
}
.ce-topnav-signout svg { display: block; }

.ce-topnav-new {
    padding: 4px 12px;
    border: 1px solid var(--ce-accent);
    border-radius: 4px;
    color: var(--ce-accent) !important;
    font-weight: 500;
}
.ce-topnav-new:hover {
    background: var(--ce-accent);
    color: var(--ce-bg) !important;
}

/* ---- Hero ----------------------------------------------------------- */
.ce-hero {
    padding: 110px 24px 90px;
    border-bottom: 1px solid var(--ce-rule);
    background:
        radial-gradient(ellipse at 50% 10%, rgba(122, 90, 42, 0.07), transparent 60%),
        radial-gradient(ellipse at 15% 90%, rgba(122, 90, 42, 0.04), transparent 65%),
        var(--ce-bg);
}
.ce-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ce-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-weight: 400;
}
.ce-hero-lede { font-size: 1.2rem; color: var(--ce-ink-soft); margin: 0 0 36px 0; }
.ce-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.ce-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--ce-ink);
    border-radius: 4px;
    background: transparent;
    color: var(--ce-ink);
    text-decoration: none;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ce-btn:hover { background: var(--ce-ink); color: var(--ce-bg); }
.ce-btn-primary {
    background: var(--ce-accent);
    border-color: var(--ce-accent);
    color: var(--ce-bg);
}
.ce-btn-primary:hover { background: var(--ce-accent-bold); border-color: var(--ce-accent-bold); color: var(--ce-bg); }

.ce-btn-danger {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #8a3a2e;
    border-radius: 4px;
    background: transparent;
    color: #8a3a2e;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ce-btn-danger:hover { background: #8a3a2e; color: var(--ce-bg); }
.ce-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* The same for the two classes used ten times more often. `.ce-btn-danger` has
   had a disabled state since it was written and nothing carried it across, so
   "Post", "Save curated tags", "Send invite", "Create project" and "Save
   changes" all rendered identically whether or not they would do anything.

   A disabled control takes no pointer events, so there is no hover feedback to
   fall back on either: the button simply sits there and the click is silently
   nothing. Dimmed as well as re-cursored, because `not-allowed` is feedback you
   only get after aiming at it, and the state has to be visible while scanning. */
.ce-btn:disabled,
.ce-btn-primary:disabled,
.ce-btn-edit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Moved out of Review.razor's page-local <style> and renamed. A Blazor <style>
   block is global only once its component has rendered, and this class is also
   used by LocalAiBanner on the *editor* page — so "Forget downloaded files" was
   an unstyled chrome button unless the reviewer happened to have visited
   /review first. The `ce-` prefix brings it inside the styling sweeps, which
   skip non-product classes on purpose. */
.ce-link-button {
    background: none;
    border: none;
    color: #7a5a2a;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.ce-link-button:disabled { opacity: 0.55; cursor: not-allowed; text-decoration: none; }

.ce-btn-edit {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--ce-accent);
    border-radius: 4px;
    background: var(--ce-accent);
    color: var(--ce-bg);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ce-btn-edit:hover { background: var(--ce-accent-bold); border-color: var(--ce-accent-bold); color: var(--ce-bg); }

/* ---- Sections ------------------------------------------------------- */
.ce-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 80px 24px;
}
.ce-section h2 {
    font-size: 2rem;
    margin: 0 0 16px 0;
    font-weight: 500;
    text-align: center;
}
.ce-section-lede {
    text-align: center;
    color: var(--ce-ink-soft);
    max-width: 640px;
    margin: 0 auto 48px auto;
    font-size: 1.05rem;
}

/* ---- Showcase rows -------------------------------------------------- */
.ce-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin: 72px 0;
}
.ce-showcase.ce-showcase-flip > .ce-showcase-text { order: 2; }
.ce-showcase-text h3 { font-size: 1.5rem; margin: 0 0 16px 0; font-weight: 500; }
.ce-showcase-text p { font-size: 1.05rem; color: var(--ce-ink-soft); margin: 0; }

.ce-screenshot {
    background: var(--ce-deep);
    border: 1px solid var(--ce-rule);
    border-radius: 6px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(60, 40, 10, 0.10);
    display: flex; align-items: center; justify-content: center;
    color: var(--ce-ink-soft);
    font-style: italic;
    font-size: 0.95rem;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(122, 90, 42, 0.05) 14px 15px);
}
.ce-screenshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
    .ce-showcase { grid-template-columns: 1fr; gap: 24px; margin: 48px 0; }
    .ce-showcase.ce-showcase-flip > .ce-showcase-text { order: 0; }
}

/* ---- Feature grid --------------------------------------------------- */
.ce-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}
.ce-feature {
    padding: 24px;
    background: var(--ce-paper);
    border: 1px solid var(--ce-rule);
    border-radius: 6px;
}
.ce-feature h3 { margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; }
.ce-feature p { margin: 0; color: var(--ce-ink-soft); font-size: 0.98rem; line-height: 1.6; }

/* ---- Browse --------------------------------------------------------- */
.ce-projects {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.ce-project-card {
    padding: 18px 20px;
    background: var(--ce-paper);
    border: 1px solid var(--ce-rule);
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ce-project-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(60, 40, 10, 0.10); }
.ce-project-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ce-ink);
    text-decoration: none;
    margin-bottom: 4px;
    line-height: 1.3;
}
.ce-project-title:hover { color: var(--ce-accent); }
.ce-project-author { margin: 0 0 8px 0; font-size: 0.9rem; color: var(--ce-ink-soft); font-style: italic; }
.ce-project-desc { margin: 0 0 8px 0; font-size: 0.95rem; color: var(--ce-ink); }
.ce-project-tags { margin: 0; font-size: 0.85rem; color: var(--ce-ink-soft); }
.text-muted { color: var(--ce-ink-soft); }

/* ---- Footer --------------------------------------------------------- */
.ce-footer {
    border-top: 1px solid var(--ce-rule);
    padding: 28px 24px 40px;
    text-align: center;
    color: var(--ce-ink-soft);
    font-size: 0.9rem;
}
.ce-footer a { color: var(--ce-accent); }

/* A writer's works on their profile. A `<ul>`, so browser discs and 40px of
   indent — the same reset the contents drawer and the orphan tray needed. */
.ce-project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}