/* ═══════════════════════════════════════════════════════════════
   Nomos AI — Accessibility & Display Preferences (v2)

   Linked AFTER the inline <style> block in taskpane.html on purpose —
   must win the cascade over both CSS "generations".

   Feature parity with the web app (PreferencesSettings.js), adapted
   to the taskpane. Compliance: ת"י 5568 / WCAG 2.1 AA.

   Contents:
   1. Theme classes on <html> (a11y-*)
   2. Reading guide element
   3. Sidebar: nav row + accessibility sub-page
   4. Segmented controls, preset chips, selects
   5. Credits meter (v2)
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1a. Motion: OS preference always honored
   ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Manual: reduce motion */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Manual: stop animations completely */
html.a11y-stop-anim *,
html.a11y-stop-anim *::before,
html.a11y-stop-anim *::after {
    animation: none !important;
    transition: none !important;
    animation-play-state: paused !important;
    scroll-behavior: auto !important;
}

/* ───────────────────────────────────────────
   1b. Text & readability
   ─────────────────────────────────────────── */
html.a11y-bold body,
html.a11y-bold body * {
    font-weight: 700 !important;
}

html.a11y-readable-font body,
html.a11y-readable-font button,
html.a11y-readable-font input,
html.a11y-readable-font textarea,
html.a11y-readable-font select {
    font-family: Arial, 'Segoe UI', Tahoma, sans-serif !important;
}

html.a11y-ls-wide body,
html.a11y-ls-wide body * { letter-spacing: 0.05em !important; }

html.a11y-ls-wider body,
html.a11y-ls-wider body * { letter-spacing: 0.1em !important; }

html.a11y-lh-relaxed body,
html.a11y-lh-relaxed body p,
html.a11y-lh-relaxed body span,
html.a11y-lh-relaxed body div { line-height: 1.7 !important; }

html.a11y-lh-loose body,
html.a11y-lh-loose body p,
html.a11y-lh-loose body span,
html.a11y-lh-loose body div { line-height: 1.95 !important; }

/* ───────────────────────────────────────────
   1c. Vision aids
   ─────────────────────────────────────────── */
html.a11y-underline-links a,
html.a11y-underline-links .menu-item-link span,
html.a11y-underline-links a.nav-row .nav-row-label,
html.a11y-underline-links .menu-item-small {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

html.a11y-highlight-buttons button:not(.close-btn) {
    outline: 1px solid #8a7340 !important;
    outline-offset: -1px;
    border-radius: 6px;
}

/* Large cursor (arrow, black with white outline) */
html.a11y-large-cursor,
html.a11y-large-cursor * {
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M7 2l20 15-9 1.5 5.5 10-4.5 2.5-5.5-10L7 28z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Larger click targets (≥44px — WCAG 2.5.5) */
html.a11y-large-targets button,
html.a11y-large-targets a.menu-item-link,
html.a11y-large-targets a.menu-item-small,
html.a11y-large-targets input[type="checkbox"] + *,
html.a11y-large-targets .setting-row,
html.a11y-large-targets .header-btn {
    min-height: 44px !important;
}

/* Strong focus ring (amplified; baseline lives in taskpane.css) */
html.a11y-strong-focus :is(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid var(--color-accent, #b49b67) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* ───────────────────────────────────────────
   1d. High contrast — darken light greys (#777–#bbb) to slate
   so body-size text passes AA. Backgrounds & gold stay.
   ─────────────────────────────────────────── */
html.a11y-high-contrast {
    --color-text-secondary: #334155;
    --color-text-tertiary: #475569;
    --color-border: #94A3B8;
}

html.a11y-high-contrast .section-title,
html.a11y-high-contrast .usage-meter-label,
html.a11y-high-contrast .usage-stat-lbl,
html.a11y-high-contrast .usage-muted,
html.a11y-high-contrast .usage-remaining-of,
html.a11y-high-contrast .usage-meter-caption,
html.a11y-high-contrast .menu-item-small,
html.a11y-high-contrast .setting-label .icon-sm,
html.a11y-high-contrast .menu-item-link .icon-sm,
html.a11y-high-contrast .user-email,
html.a11y-high-contrast .menu-item-sub,
html.a11y-high-contrast .a11y-group-title,
html.a11y-high-contrast .setting-desc,
html.a11y-high-contrast .subpage-hint,
html.a11y-high-contrast .version-info,
html.a11y-high-contrast .version-info .copyright,
html.a11y-high-contrast .mode-tab,
html.a11y-high-contrast .tab-panel-desc,
html.a11y-high-contrast .tab-panel-hint,
html.a11y-high-contrast .quick-actions-title,
html.a11y-high-contrast .input-hint,
html.a11y-high-contrast .auth-subtitle,
html.a11y-high-contrast .file-chip-size {
    color: #334155 !important;
}

html.a11y-high-contrast .setting-label,
html.a11y-high-contrast .menu-item-link,
html.a11y-high-contrast .nav-row-label,
html.a11y-high-contrast .nav-row-icon,
html.a11y-high-contrast .btn-logout-block {
    color: #0F172A !important;
}

html.a11y-high-contrast .toggle-input { background: #94A3B8; }
html.a11y-high-contrast .toggle-input:checked { background: #6b5d3e; }
html.a11y-high-contrast .sidebar-section + .sidebar-section { border-top-color: #CBD5E1; }
html.a11y-high-contrast .usage-stat-sep { background: #CBD5E1; }

/* ═══════════════════════════════════════════
   2. Reading guide (created by uiPreferences.ts)
   ═══════════════════════════════════════════ */
#a11y-reading-guide {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px solid rgba(180, 155, 102, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 2px 8px rgba(15, 23, 42, 0.25);
    pointer-events: none;
    z-index: 2147483647;
    display: none;
}

/* ═══════════════════════════════════════════
   3. Sidebar — nav row + accessibility sub-page
   ═══════════════════════════════════════════ */

/* ── Primary navigation: flat list (Claude-settings style) ──
   Quiet rows: icon + label, light hover, chevron for sub-pages,
   external-link glyph for outbound rows, inline toggle allowed. */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 12px 8px;
}

.nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    color: #333;
    transition: background 0.12s ease;
}

.nav-row:hover {
    background: #f5f5f5;
}

.nav-row:active {
    background: #efefef;
}

.nav-row-icon {
    width: 17px;
    height: 17px;
    color: #666;
    flex-shrink: 0;
}

.nav-row:hover .nav-row-icon {
    color: #111;
}

.nav-row-label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 450;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-row:hover .nav-row-label {
    color: #111;
}

.nav-row-chevron {
    width: 14px;
    height: 14px;
    color: #c2c2c2;
    flex-shrink: 0;
    transition: transform 0.12s ease, color 0.12s ease;
}

.nav-row:hover .nav-row-chevron {
    color: #999;
    transform: translateX(-1px);
}

[dir="ltr"] .nav-row-chevron { transform: scaleX(-1); }
[dir="ltr"] .nav-row:hover .nav-row-chevron { transform: scaleX(-1) translateX(-1px); }

.nav-row-ext {
    width: 13px;
    height: 13px;
    color: #c2c2c2;
    flex-shrink: 0;
}

.nav-row:hover .nav-row-ext {
    color: #999;
}

.nav-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 6px 10px;
}

/* The user identity card sits above the nav */
.sidebar-content .user-profile-row {
    margin: 4px 12px 8px;
}

/* ── Sub-page: covers the whole sidebar, own header/body/footer ── */
.sidebar-subpage {
    position: absolute;
    inset: 0;
    background: var(--color-surface, #fff);
    z-index: 5;
    display: flex;
    flex-direction: column;
    animation: subpageIn 0.18s ease-out;
}

.sidebar-subpage[hidden] { display: none; }

@keyframes subpageIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

.subpage-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.subpage-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin: 0;
    flex: 1;
}

.subpage-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.subpage-back:hover {
    background: #f5f5f5;
    color: #111;
}

[dir="ltr"] .subpage-back svg { transform: scaleX(-1); }

.subpage-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 20px;
}

.subpage-footer {
    flex-shrink: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid #f0f0f0;
}

/* Groups */
.a11y-group + .a11y-group {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

.a11y-group-title {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

/* Toggle rows inside the page: title + description */
.subpage-body .setting-row {
    padding: 8px 10px;
    margin-bottom: 2px;
}

.setting-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-inline-end: 10px;
}

.setting-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
}

.setting-desc {
    font-size: 10.5px;
    color: #aaa;
    line-height: 1.35;
}

.subpage-hint {
    margin: 8px 2px 0;
    font-size: 10.5px;
    color: #aaa;
    line-height: 1.4;
}

/* Reset (footer) */
.subpage-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #666;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.subpage-reset-btn:hover {
    border-color: #b49b67;
    color: #8a7340;
    background: #faf8f4;
}

.subpage-statement-link {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #999;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subpage-statement-link:hover { color: #6b5d3e; }

/* ═══════════════════════════════════════════
   4. Controls: size segment, mini segments, chips, selects
   ═══════════════════════════════════════════ */

/* Display sub-page: size row with stepper (− % +) */
.display-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 0;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fcfcfc;
    padding: 2px;
    flex-shrink: 0;
}

.zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 0.12s ease;
}

.zoom-btn:hover:not(:disabled) {
    background: #f0f0f0;
    color: #111;
}

.zoom-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.zoom-value {
    min-width: 44px;
    text-align: center;
    direction: ltr;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    font-variant-numeric: tabular-nums;
}

/* 3-way mini segment (letter spacing / line height) */
.mini-segment {
    display: flex;
    gap: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.mini-seg-opt {
    padding: 5px 10px;
    font-size: 11px;
    font-family: inherit;
    color: #777;
    background: #fcfcfc;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mini-seg-opt + .mini-seg-opt {
    border-inline-start: 1px solid #eee;
}

.mini-seg-opt:hover { background: #fff; color: #333; }

.mini-seg-opt.active {
    background: #f5f2eb;
    color: #6b5d3e;
    font-weight: 600;
}

/* Setting row that stacks control under the label (for segments) */
.setting-row.stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: default;
}

.setting-row.stacked:hover { background: transparent; }

/* Quick profile chips */
.a11y-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid #e5dcc9;
    border-radius: 999px;
    background: #faf8f4;
    color: #6b5d3e;
    font-size: 11.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-chip:hover {
    background: #f5f0e6;
    border-color: #b49b67;
    transform: translateY(-1px);
}

.preset-chip:active { transform: translateY(0); }

/* Compact select (color-blind mode) */
.a11y-select {
    font-family: inherit;
    font-size: 11.5px;
    color: #333;
    background: #fcfcfc;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    max-width: 150px;
    transition: border-color 0.15s ease;
}

.a11y-select:hover { border-color: #d4c9a8; }
.a11y-select:focus-visible { outline: 2px solid #b49b67; outline-offset: 1px; }

/* ═══════════════════════════════════════════
   5. Credits meter (v2)
   ok #059669 · warning #d97706 · danger #dc2626
   ═══════════════════════════════════════════ */

.usage-percent-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    background: #ecfdf5;
    color: #059669;
}

.usage-percent-badge.warning { background: #fffbeb; color: #b45309; }
.usage-percent-badge.danger { background: #fef2f2; color: #dc2626; }
.usage-percent-badge.unlimited { background: #f5f2eb; color: #8a7340; }

.usage-remaining-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 0 7px;
}

.usage-remaining-value {
    font-size: 17px;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.usage-remaining-of {
    font-size: 11.5px;
    color: #888;
}

.usage-meter-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #999;
}

.usage-caption-sep { color: #ccc; }

.usage-meter-header { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   6. Usage page (v3.1) — panel + 2×2 activity cards
   ═══════════════════════════════════════════ */

.usage-panel {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}

.usage-panel .usage-plan-row {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.usage-panel .usage-meter {
    margin-bottom: 0;
}

.usage-activity-title {
    margin: 0 2px 8px;
}

.usage-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.usage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 11px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    text-align: center;
    min-width: 0;
}

.usage-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f5f2eb;
    color: #8a7340;
}

.usage-card-icon svg {
    width: 15px;
    height: 15px;
}

.usage-card-val {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    line-height: 1;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.usage-card-lbl {
    font-size: 10.5px;
    color: #999;
    line-height: 1.3;
}

/* Plan chip in the user identity card */
.user-plan-chip {
    align-self: flex-start;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1.5px 8px;
    border-radius: 9px;
    background: #f5f2eb;
    color: #8a7340;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-plan-chip.org {
    background: #eef2ff;
    color: #4f46e5;
}

/* High-contrast coverage for the new labels */
html.a11y-high-contrast .usage-card-lbl,
html.a11y-high-contrast .usage-activity-title {
    color: #334155 !important;
}

/* ═══════════════════════════════════════════
   7. Theme — light / dark / system
   Dark = tuned inversion on <html> (set via style.filter by
   uiPreferences.ts + boot script). Raster images are counter-
   inverted so logos/photos keep their true colors.
   ═══════════════════════════════════════════ */

html.theme-dark {
    background: #fff; /* inverts to near-black behind the body */
}

html.theme-dark img {
    filter: invert(1) hue-rotate(180deg);
}

/* Theme segment (Claude-style: three labeled pills) */
.theme-row {
    padding-top: 0;
}

.theme-segment {
    display: flex;
    gap: 6px;
}

.theme-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s ease;
    min-width: 0;
    white-space: nowrap;
}

.theme-opt svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.theme-opt:hover {
    background: #fafafa;
    color: #111;
}

.theme-opt.active {
    background: #f0f0f0;
    border-color: #d9d9d9;
    color: #111;
    font-weight: 600;
}

.subpage-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 14px 0;
}
