/*
 * Base styles (spec §12). RTL-ready: only CSS logical properties are used
 * (margin-inline-*, padding-inline-*, inset-inline-*, text-align: start/end),
 * so the same rules work for lang="ar" dir="rtl" without a separate override
 * block. No external dependencies (spec §3): system font stack only.
 *
 * Font stack: system-ui covers French and renders Arabic cleanly on all
 * major platforms (Segoe UI, SF Pro, Roboto/Noto all include Arabic);
 * Tahoma is a widely available Arabic-friendly fallback (spec §12.2).
 *
 * Design tokens: one accent colour, a spacing scale, a small type scale and
 * consistent radii, so the admin panel and the public form read as one system.
 */

:root {
    /* Colour */
    --color-ink: #1a1c22;
    --color-muted: #5b616e;
    --color-bg: #f2f3f5;
    --color-card: #ffffff;
    --color-border: #e4e6eb;
    --color-border-input: #cfd3db;
    --color-accent: #2551d6;
    --color-accent-hover: #1c3fa8;
    --color-accent-weak: #eef2fe;

    --color-success-text: #0f6b3f;
    --color-success-bg: #e9f9f0;
    --color-success-border: #a7dcc0;

    --color-danger-text: #a01e1e;
    --color-danger-bg: #fdeded;
    --color-danger-border: #efb4b4;

    --color-notice-bg: #fff8e6;
    --color-notice-border: #e6c34a;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    /* Radii */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.06), 0 1px 3px rgba(20, 24, 33, 0.04);
    --shadow-focus: 0 0 0 3px rgba(37, 81, 214, 0.18);

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, Tahoma, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-bg);
    text-align: start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 44rem;
    margin-block: var(--space-7);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

h1, h2, h3 {
    line-height: 1.25;
    color: var(--color-ink);
}

h1 {
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-block: 0 var(--space-4);
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-accent-hover);
}

p {
    margin-block: var(--space-3);
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding-block: var(--space-5);
    padding-inline: var(--space-5);
    margin-block-start: var(--space-5);
}

.card > :first-child {
    margin-block-start: 0;
}

.card > :last-child {
    margin-block-end: 0;
}

.card h2 {
    margin-block-start: 0;
    margin-block-end: var(--space-4);
    font-size: 1.15rem;
    font-weight: 600;
}

.notice {
    background: var(--color-notice-bg);
    border-color: var(--color-notice-border);
    box-shadow: none;
}

/* Forms (admin auth in Phase 3; reused by the public form in Phase 5). */

label {
    display: block;
    font-weight: 600;
    margin-block-end: var(--space-1);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--color-ink);
    background: var(--color-card);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #b8bdc8;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Buttons: primary (solid accent) is the default; secondary is a quiet
 * outline for supporting actions; danger reuses the destructive palette. */

button,
.button-link {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

button:hover,
.button-link:hover {
    color: #fff;
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

button:active,
.button-link:active {
    transform: translateY(1px);
}

.btn-secondary {
    color: var(--color-accent);
    background: var(--color-card);
    border-color: var(--color-border-input);
}

.btn-secondary:hover {
    color: var(--color-accent-hover);
    background: var(--color-accent-weak);
    border-color: var(--color-accent);
}

.btn-danger {
    color: #fff;
    background: var(--color-danger-text);
    border-color: var(--color-danger-text);
}

.btn-danger:hover {
    color: #fff;
    background: #841818;
    border-color: #841818;
}

.alert {
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    margin-block: var(--space-4);
}

.alert-error {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

.alert-success {
    color: var(--color-success-text);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

pre {
    background: #f0f1f3;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    overflow-x: auto;
    direction: ltr; /* commands stay LTR even inside RTL pages */
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* Form management (Phase 4, admin dashboard + form screens). */

textarea {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    direction: ltr; /* Markdown source stays LTR; Arabic lines render RTL inline */
    text-align: left;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
}

.forms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.forms-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    background: #f7f8fa;
}

.forms-table th,
.forms-table td {
    padding-block: var(--space-3);
    padding-inline: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
}

.forms-table tbody tr:last-child th,
.forms-table tbody tr:last-child td {
    border-block-end: 0;
}

.forms-table tbody tr:hover {
    background: var(--color-accent-weak);
}

.share-cell {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.share-url {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    direction: ltr;
    min-width: 12rem;
}

.copy-btn {
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: 0.85rem;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding-block: 0.15rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid;
}

.badge-active {
    color: var(--color-success-text);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.badge-disabled {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

.badge-suspended {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

.badge-pending {
    color: var(--color-muted);
    background: var(--color-surface, #f2f3f5);
    border-color: var(--color-border);
}

.inline-form {
    display: inline;
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.link-button:hover {
    color: var(--color-accent-hover);
    background: none;
    transform: none;
}

.actions-cell {
    white-space: nowrap;
}

.actions-cell a {
    margin-inline-end: var(--space-3);
}

.danger-link {
    color: var(--color-danger-text);
}

.danger-link:hover {
    color: #841818;
}

.toolbar {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.cheatsheet summary {
    cursor: pointer;
    font-weight: 600;
}

small {
    display: block;
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* Definition list for a single response detail (Phase 6). */

.response-detail {
    margin: 0;
}

.response-detail dt {
    font-weight: 600;
    margin-block-start: var(--space-4);
}

.response-detail dt:first-child {
    margin-block-start: 0;
}

.response-detail dd {
    margin-inline-start: 0;
    margin-block-start: var(--space-1);
    color: var(--color-ink);
}

/* Confirmation-page action rows (delete screens): primary action + a quiet
 * cancel link, aligned on one baseline. */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-block-start: var(--space-4);
}

/*
 * Public form (Phase 5, spec §12). Same logical-properties-only strategy:
 * one rule set serves dir="ltr" and dir="rtl" alike (§12.2).
 */

/* The global textarea rule pins the admin Markdown editor to LTR monospace;
 * a public-form answer must follow the page language and direction. */
.public-form textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    direction: inherit;
    text-align: start;
}

.form-description {
    color: var(--color-muted);
    margin-block: 0 var(--space-4);
}

.public-form .field {
    margin-block-end: var(--space-5);
}

.field {
    margin-block-end: var(--space-5);
}

.field small {
    margin-block: 0 var(--space-2);
    font-weight: 400;
}

fieldset.choice-group {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

fieldset.choice-group legend {
    padding: 0;
    font-weight: 600;
    margin-block-end: var(--space-2);
}

.choice-option label {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-weight: 400;
    margin-block-end: var(--space-1);
}

/* Rating scale: a horizontal row of stacked circle+number units. The row
 * wraps to an even grid on narrow screens (each unit has a consistent min
 * width, so wrapped rows line up); on desktop the whole scale fits on one
 * line. flex-direction: row honours dir, so Arabic (RTL) reads 0 on the
 * right — no hard-coded left/right. Legend and help stay above as block flow
 * because the flex lives on this inner container, not the fieldset. */
.rating-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.rating-options .choice-option {
    flex: 0 0 auto;
    min-inline-size: 2.5rem;
}

.rating-options .choice-option label {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.required-mark {
    color: var(--color-danger-text);
    margin-inline-start: 0.15rem;
}

.field-error {
    color: var(--color-danger-text);
    font-size: 0.9rem;
    margin-block: var(--space-1) 0;
}

.public-form [aria-invalid="true"] {
    border-color: var(--color-danger-text);
}

.public-form [aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(160, 30, 30, 0.16);
}

.public-form button[type="submit"] {
    inline-size: 100%;
    padding-block: var(--space-3);
    font-size: 1.05rem;
    margin-block-start: var(--space-2);
}

/* Honeypot (§11.8): moved off-screen rather than display:none — some bots
 * skip fields that are display:none but still fill off-screen ones. */
.hp-field {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

.lang-switch {
    text-align: end;
    margin-block: 0 var(--space-3);
}

/* Language-choice screen (bilingual forms, §6.2.3). */

.choose-language {
    text-align: center;
    padding-block: var(--space-7);
}

.choose-language h1 span,
.form-titles span {
    display: block;
}

.choose-language h1 {
    margin-block-end: var(--space-2);
}

.form-titles {
    color: var(--color-muted);
    margin-block: 0 var(--space-6);
}

.lang-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.lang-buttons .button-link {
    flex: 1 1 10rem;
    max-inline-size: 16rem;
    padding-block: var(--space-3);
    font-size: 1.1rem;
    text-align: center;
}

/*
 * Public landing page (spec §1). Presentational only; reuses the design tokens
 * and the logical-properties-only strategy so one rule set serves LTR and RTL.
 */

.landing-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* trailing edge in both directions */
    align-items: center;
    gap: var(--space-4);
    font-size: 0.9rem;
    margin-block-end: var(--space-5);
}

.landing-nav .admin-link,
.landing-footer .admin-link {
    color: var(--color-muted);
    text-decoration: none;
}

.landing-nav .admin-link:hover,
.landing-footer .admin-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.landing-hero {
    margin-block-end: var(--space-6);
}

.landing-hero h1 {
    font-size: 2rem;
    margin-block-end: var(--space-3);
}

.tagline {
    font-size: 1.15rem;
    color: var(--color-muted);
    margin-block: 0;
}

.benefits {
    margin-block: 0;
    padding-inline-start: var(--space-5);
}

.benefits li {
    margin-block: var(--space-2);
}

.landing-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Reduced-motion: drop the button press micro-interaction (§ quality floor). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    button:active,
    .button-link:active {
        transform: none;
    }
}