/* =========================================================================
   AI writing assistants — /tools index and the three tool pages.

   Token-driven throughout (--ff-*), including the spacing scale added when the
   theme was reconciled with the design system. Layout follows the design's
   ai-tools kit: a card grid on the index, then a two-column form/results split.
   ========================================================================= */

/* ---- Index head -------------------------------------------------------- */
.w-head {
    position: relative;
    padding: var(--ff-space-16) 0 var(--ff-space-10);
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
}
.w-head h1 {
    font-family: var(--ff-font-serif);
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: var(--ff-space-2) 0 var(--ff-space-4);
    color: var(--ff-ink);
}
.w-head p { color: var(--ff-ink-2); font-size: 1.02rem; line-height: 1.65; margin: 0; }

/* ---- Index cards ------------------------------------------------------- */
.w-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ff-space-5);
    margin-bottom: var(--ff-space-12);
}
.w-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ff-space-8) var(--ff-space-6) var(--ff-space-6);
    background: var(--ff-surface);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    box-shadow: var(--ff-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.w-card:hover {
    border-color: var(--ff-accent-soft);
    box-shadow: var(--ff-shadow-lg);
    transform: translateY(-2px);
}
.w-num {
    font-family: var(--ff-font-serif);
    font-size: 0.95rem;
    color: var(--ff-accent-deep);
    letter-spacing: 0.08em;
    margin-bottom: var(--ff-space-3);
}
.w-card h2 {
    font-family: var(--ff-font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 var(--ff-space-2);
    color: var(--ff-ink);
}
.w-card > p { color: var(--ff-ink-2); font-size: 0.94rem; line-height: 1.6; margin: 0 0 var(--ff-space-5); }

.w-need { list-style: none; margin: 0 0 var(--ff-space-6); padding: 0; display: grid; gap: var(--ff-space-2); }
.w-need li { display: flex; gap: var(--ff-space-2); align-items: flex-start; font-size: 0.86rem; color: var(--ff-ink-3); line-height: 1.5; }
.w-need i {
    flex: 0 0 auto;
    width: 5px; height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--ff-accent);
}
.w-card-foot { margin-top: auto; }

/* ---- Tool page header -------------------------------------------------- */
.w-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ff-space-6);
    flex-wrap: wrap;
    padding: var(--ff-space-12) 0 var(--ff-space-8);
    border-bottom: 1px solid var(--ff-line-soft);
    margin-bottom: var(--ff-space-8);
}
.w-bar h1 {
    font-family: var(--ff-font-serif);
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 500;
    margin: var(--ff-space-1) 0 var(--ff-space-2);
    color: var(--ff-ink);
}
.w-bar p { color: var(--ff-ink-2); font-size: 0.96rem; line-height: 1.6; margin: 0; max-width: 62ch; }

/* ---- Two-column split -------------------------------------------------- */
.w-cols {
    display: grid;
    /* The form is the working surface -- five or six fields, one of them a
       multi-line note -- so it gets the wider half; the drafts read fine in
       the narrower one. Ratio rather than a fixed width so both halves grow
       with the shell. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--ff-space-8);
    align-items: start;
    padding-bottom: var(--ff-space-20);
}
@media (max-width: 900px) { .w-cols { grid-template-columns: 1fr; } }

.w-panel {
    padding: var(--ff-space-6);
    background: var(--ff-surface);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    box-shadow: var(--ff-shadow-sm);
    position: sticky;
    top: var(--ff-space-6);
}
@media (max-width: 900px) { .w-panel { position: static; } }

.w-panel-title { font-family: var(--ff-font-serif); font-size: 1.24rem; color: var(--ff-ink); }
.w-panel-hint { font-size: 0.84rem; color: var(--ff-ink-3); line-height: 1.5; margin: var(--ff-space-1) 0 var(--ff-space-5); }

.w-form { display: grid; gap: var(--ff-space-5); }
.w-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ff-space-3); align-items: start; }
@media (max-width: 460px) { .w-row { grid-template-columns: 1fr; } }

/* Fields. Same treatment as the create/edit forms (.c-field / .c-input in
   create.css), restated here because those stylesheets are per-page and this
   page loads neither — without them the inputs fall back to browser defaults. */
.w-field { display: flex; flex-direction: column; gap: var(--ff-space-2); min-width: 0; }
.w-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ff-space-3); }
.w-label { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ff-ink-2); }
.w-opt { font-size: 0.76rem; color: var(--ff-ink-3); }

.w-input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ff-ink);
    background: var(--ff-surface-2);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    padding: 13px 15px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.w-input::placeholder { color: var(--ff-ink-3); }
.w-input:focus {
    outline: none;
    border-color: var(--ff-accent);
    background: var(--ff-surface);
    box-shadow: 0 0 0 4px var(--ff-accent-tint);
}
/* Grow downward only — a textarea dragged sideways would break the two-column
   grid it sits in. */
.w-textarea { resize: vertical; min-height: 92px; line-height: 1.6; }

/* Tone picker — radios styled as chips, so keyboard and screen readers get a
   real radiogroup rather than a row of buttons. */
.w-tones { display: flex; flex-wrap: wrap; gap: var(--ff-space-2); }
.w-tone { cursor: pointer; }
.w-tone input { position: absolute; opacity: 0; width: 0; height: 0; }
.w-tone span {
    display: inline-block;
    padding: 6px 13px;
    font-size: 0.83rem;
    color: var(--ff-ink-2);
    background: var(--ff-surface-2);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-full, 999px);
    transition: background .18s, border-color .18s, color .18s;
}
.w-tone:hover span { border-color: var(--ff-accent-soft); }
.w-tone input:checked + span {
    color: var(--ff-accent-deep);
    background: var(--ff-accent-tint);
    border-color: var(--ff-accent-soft);
    font-weight: 600;
}
.w-tone input:focus-visible + span { outline: 2px solid var(--ff-accent); outline-offset: 2px; }

/* Cloudflare renders a fixed-size box with its own dark chrome, which sat flush
   against the tone chips. Set it apart on its own line with a rule above, so it
   reads as a step before the button rather than another field. */
.w-verify {
    margin-top: var(--ff-space-6);
    padding-top: var(--ff-space-5);
    border-top: 1px solid var(--ff-line-soft);
}
.w-verify:empty { display: none; }

.w-actions { display: flex; flex-wrap: wrap; gap: var(--ff-space-2); margin-top: var(--ff-space-6); }
.w-note { font-size: 0.82rem; color: var(--ff-ink-3); line-height: 1.55; margin: var(--ff-space-3) 0 0; }
.w-note-center { text-align: center; max-width: 54ch; margin: var(--ff-space-12) auto 0; }
.w-note-tail { margin-top: var(--ff-space-5); }
.w-quota { display: block; margin-top: var(--ff-space-1); font-weight: 600; color: var(--ff-ink-2); }
.w-quota.is-spent { color: var(--ff-danger-deep); }

/* ---- Results ----------------------------------------------------------- */
.w-out-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ff-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ff-space-4);
}
.w-out { display: grid; gap: var(--ff-space-3); }

.w-draft {
    padding: var(--ff-space-5) var(--ff-space-6);
    background: var(--ff-surface);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    box-shadow: var(--ff-shadow-sm);
    transition: border-color .2s;
}
.w-draft:hover { border-color: var(--ff-accent-soft); }

.w-draft-line {
    font-family: var(--ff-font-serif);
    font-size: 1.45rem;
    line-height: 1.4;
    color: var(--ff-ink);
}
.w-draft-msg { font-size: 0.97rem; line-height: 1.68; color: var(--ff-ink); }
.w-draft-prose p { font-size: 0.97rem; line-height: 1.72; color: var(--ff-ink); margin: 0 0 var(--ff-space-4); }
.w-draft-prose p:last-child { margin-bottom: 0; }

.w-draft-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-4);
    flex-wrap: wrap;
    margin-top: var(--ff-space-4);
    padding-top: var(--ff-space-3);
    border-top: 1px solid var(--ff-line-soft);
}
.w-draft-meta { display: inline-flex; align-items: center; gap: var(--ff-space-2); font-size: 0.8rem; color: var(--ff-ink-3); }
.w-draft-label { font-weight: 600; color: var(--ff-ink-2); }
.w-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ff-line); }

.w-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: var(--ff-space-10) var(--ff-space-8);
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ff-ink-3);
    background: var(--ff-surface-2);
    border: 1px dashed var(--ff-line);
    border-radius: var(--ff-radius-lg);
}
.w-empty span { max-width: 46ch; }

.w-error {
    padding: 11px 14px;
    margin-bottom: var(--ff-space-4);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ff-danger-deep);
    background: var(--ff-danger-soft);
    border: 1px solid var(--ff-danger-line);
    border-radius: var(--ff-radius-sm);
}
.w-notice {
    padding: 12px 16px;
    margin-bottom: var(--ff-space-6);
    font-size: 0.9rem;
    color: var(--ff-ink-2);
    background: var(--ff-surface-2);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
}
.w-notice code { font-size: 0.85em; color: var(--ff-accent-deep); }

/* ---- Loading shimmer --------------------------------------------------- */
/* Named stages plus an elapsed count: a draft takes the better part of half a
   minute, and a shimmer that never changes reads as a hung page. */
.w-progress {
    margin: 0 0 var(--ff-space-3);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ff-ink-3);
}
.w-load {
    display: grid;
    gap: var(--ff-space-3);
    padding: var(--ff-space-6);
    background: var(--ff-surface);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
}
.w-shim {
    height: 11px;
    border-radius: var(--ff-radius-sm);
    background: linear-gradient(90deg, var(--ff-surface-2) 25%, var(--ff-accent-tint) 50%, var(--ff-surface-2) 75%);
    background-size: 300% 100%;
    animation: w-shim 1.5s ease-in-out infinite;
}
@keyframes w-shim {
    0% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .w-shim { animation: none; }
    .w-card:hover { transform: none; }
}