/* ==========================================================================
   Print Register — visual skin (direction C, docs/design/skin-directions.md)

   Expedition fieldbook: warm paper light mode, ocean-tinted paper dark mode,
   ink-green text, hairline rules over soft shadows, Bitter display voice,
   JetBrains Mono for measurements. Ranger green keeps action; deep ocean
   carries place/weather.

   Loaded after modern.css; every rule is gated on [data-skin="register"]
   so the Classic look is untouched when the attribute is absent.
   ========================================================================== */

/* ---------- Light: warm paper ---------- */
html[data-skin="register"] {
    --font-family-display: 'Bitter', Georgia, serif;
    --color-place: #0e3a5d;
    --color-primary-foreground: #3f5848;
    --text-on-primary: #faf8f3;
    --action-subtle-surface: #f0f4f1;
    --action-subtle-border: #d9e4db;
    --neutral-subtle-surface: #f3f0e7;
    --neutral-subtle-border: #d9d3c2;

    --bg-primary: #faf8f3;
    --bg-secondary: #f3f0e7;
    --bg-tertiary: #eae6d9;

    --surface-primary: #faf8f3;
    --surface-secondary: #f3f0e7;
    --surface-tertiary: #eae6d9;
    --surface-raised: #fffdf8;

    --text-primary: #232b23;
    --text-secondary: #4d574c;
    /* #5b6b53 rather than the original #71806f: the muted tier carries the
       12px fieldbook labels (Name, Location, TAKE #…) at regular size, and
       4.12:1 on the paper surface failed the 4.5:1 AA floor. This value
       clears 4.5:1 on every paper surface in this skin (5.62:1 on
       --surface-raised) while staying in the same ink-green family. */
    --text-muted: #5b6b53;

    --border-color: #d9d3c2;
    --border-color-light: #e7e2d3;
    --border-color-strong: #b9b29c;

    --header-background: #faf8f3;
    --shadow-specimen: 0 12px 28px -18px rgba(35, 43, 35, 0.32);

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* Printed structure: rules carry depth, not diffuse shadows */
    --shadow-sm: 0 0 0 rgba(35, 43, 35, 0);
    --shadow-md: 0 1px 0 rgba(35, 43, 35, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(35, 43, 35, 0.12), 0 4px 6px -4px rgba(35, 43, 35, 0.1);
    --shadow-xl: 0 16px 30px -8px rgba(35, 43, 35, 0.22);
}

/* ---------- Dark: ocean-tinted night paper ---------- */
html[data-skin="register"][data-theme="dark"] {
    --color-place: #83b8d8;
    --color-primary-foreground: #a9c0ae;
    --text-on-primary: #faf8f3;
    --action-subtle-surface: #1b2922;
    --action-subtle-border: #385044;
    --neutral-subtle-surface: #1d2631;
    --neutral-subtle-border: #354151;

    --bg-primary: #10151c;
    --bg-secondary: #161d26;
    --bg-tertiary: #1d2631;

    --surface-primary: #10151c;
    --surface-secondary: #161d26;
    --surface-tertiary: #1d2631;
    --surface-raised: #1a222c;

    --text-primary: #e9e6da;
    --text-secondary: #b7bcae;
    --text-muted: #8b9184;

    --border-color: #29323f;
    --border-color-light: #202834;
    --border-color-strong: #485465;

    --header-background: #10151c;
    --shadow-specimen: 0 14px 34px -16px rgba(0, 0, 0, 0.72);

    --shadow-sm: 0 0 0 rgba(0, 0, 0, 0);
    --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 30px -8px rgba(0, 0, 0, 0.55);
}

html[data-skin="register"][data-theme="dark"] .user-avatar {
    color: var(--color-primary-foreground);
    background: var(--action-subtle-surface);
}

/* ---------- Display voice: Bitter for page/card titles ---------- */
html[data-skin="register"] .page-title,
html[data-skin="register"] .dashboard-title,
html[data-skin="register"] .card-title,
html[data-skin="register"] .modal-title,
html[data-skin="register"] .section-title,
html[data-skin="register"] .enhanced-card-title {
    font-family: 'Bitter', Georgia, serif;
    letter-spacing: -0.01em;
}

html[data-skin="register"] .nav-tab-label {
    letter-spacing: 0.01em;
}

/* ---------- Measurement tier: mono readouts ---------- */
html[data-skin="register"] .measurement,
html[data-skin="register"] .take-detail span,
html[data-skin="register"] .token-reveal-value,
html[data-skin="register"] .activity-time,
html[data-skin="register"] .metric-period {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.01em;
}

/* ---------- Fieldbook chrome: rules, not floating panels ---------- */
html[data-skin="register"] .card {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

html[data-skin="register"] .tab-container,
html[data-skin="register"] .form-section,
html[data-skin="register"] .section-container {
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .tab-container {
    padding: var(--space-5);
}

html[data-skin="register"] .stats-grid {
    gap: 0;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

html[data-skin="register"] .stat-card {
    border: 0;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: var(--space-5);
}

html[data-skin="register"] .stat-card::before {
    display: none;
}

html[data-skin="register"] .stat-card:hover {
    background: var(--surface-secondary);
    box-shadow: none;
    transform: none;
}

html[data-skin="register"] .stat-icon {
    background: transparent;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
}

html[data-skin="register"] .card-header {
    background: transparent;
    border-bottom: 2px solid var(--border-color);
}

html[data-skin="register"] .settings-layout .card,
html[data-skin="register"] .section-container {
    border-top: 2px solid var(--border-color);
}

/* Stamp-like chips: bordered marks rather than filled lozenges */
html[data-skin="register"] .badge,
html[data-skin="register"] .take-tag,
html[data-skin="register"] .status-tag {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
}

html[data-skin="register"] .badge-primary,
html[data-skin="register"] .badge-info,
html[data-skin="register"] .take-tag.tag-free {
    color: var(--color-primary-foreground);
    background: transparent;
}

html[data-skin="register"] .take-tag.tag-ucs {
    color: var(--color-place);
    background: transparent;
}

html[data-skin="register"] .take-tag-more {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

/* Buttons keep their fill but lose rounding softness */
html[data-skin="register"] .btn {
    border-radius: var(--radius-md);
}

html[data-skin="register"] .form-input,
html[data-skin="register"] .form-select,
html[data-skin="register"] .form-textarea {
    background: var(--surface-primary);
    border-radius: var(--radius-md);
}

/* Anonymous auth is a field sheet, not a floating product card. */
html[data-skin="register"] .login-page,
html[data-skin="register"] .register-page {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(
        to bottom,
        transparent 31px,
        color-mix(in srgb, var(--text-muted) 8%, transparent) 32px
    );
    background-size: 100% 32px;
}

html[data-skin="register"] .auth-register-sheet {
    background: var(--surface-primary);
    border: 1px solid var(--border-color-strong);
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .auth-register-heading {
    background: transparent;
    border-bottom: 2px solid var(--border-color-strong);
    text-align: left;
}

html[data-skin="register"] .auth-register-heading .login-logo,
html[data-skin="register"] .auth-register-heading .register-logo {
    justify-content: flex-start;
}

html[data-skin="register"] .auth-register-heading .login-title {
    font-family: var(--font-family-display);
    letter-spacing: -0.025em;
}

html[data-skin="register"] .auth-register-heading .register-title {
    font-family: var(--font-family-display);
    letter-spacing: -0.025em;
}

/* Logbook rows: full-width rules between entries instead of boxed cards */
html[data-skin="register"] .takes-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

html[data-skin="register"] .take-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

html[data-skin="register"] .takes-grid .take-card:first-child {
    border-top: 2px solid var(--border-color);
}

html[data-skin="register"] .take-card:hover,
html[data-skin="register"] .clickable-card:hover {
    background: var(--bg-secondary);
    box-shadow: none;
    transform: none;
}

html[data-skin="register"] .details-list .detail-item,
html[data-skin="register"] .setting-section,
html[data-skin="register"] .danger-action {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .details-list .detail-item:hover,
html[data-skin="register"] .setting-section:hover,
html[data-skin="register"] .danger-action:hover {
    background: var(--surface-secondary);
    box-shadow: none;
    transform: none;
}

html[data-skin="register"] .ucs-category-card,
html[data-skin="register"] .tag-card,
html[data-skin="register"] .user-card,
html[data-skin="register"] .plan-card,
html[data-skin="register"] .enhanced-card {
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .ucs-category-card:hover,
html[data-skin="register"] .tag-card:hover,
html[data-skin="register"] .user-card:hover,
html[data-skin="register"] .plan-card:hover,
html[data-skin="register"] .enhanced-card:hover {
    background: var(--surface-secondary);
    box-shadow: none;
    transform: none;
}

/* ---------- Shell: header joins the paper ---------- */
/* .app-header hard-codes a translucent slate backdrop that would
   otherwise defeat the skin's surface tokens. */
html[data-skin="register"] .app-header {
    background-color: var(--header-background);
    backdrop-filter: none;
}

/* Compact mobile menu (QA A3). The button is a 44px square instrument
   control, matching the theme toggle's hit target; the panel it discloses is
   a flat, ruled sheet in the same paper as the header. It sits inside
   .nav-actions, so it inherits the existing flex/gap layout without a
   separate positioning stack. */
html[data-skin="register"] .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
}

html[data-skin="register"] .menu-toggle:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

html[data-skin="register"] .mobile-nav {
    position: absolute;
    top: 100%;
    right: var(--space-4);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 11rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

html[data-skin="register"] .mobile-nav[hidden] {
    display: none;
}

html[data-skin="register"] .mobile-nav__link {
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color-light);
}

html[data-skin="register"] .mobile-nav__link:last-child {
    border-bottom: 0;
}

html[data-skin="register"] .mobile-nav__link:hover,
html[data-skin="register"] .mobile-nav__link:focus {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-skin="register"] .brand-text::before {
    display: none;
}

html[data-skin="register"] .nav-tabs-container {
    box-shadow: none;
}

/* ---------- Logbook rows breathe: rules separate, padding fills ---------- */
html[data-skin="register"] .takes-grid .take-card,
html[data-skin="register"] .takes-grid > .take-card {
    padding: var(--space-4) var(--space-5);
}

@media (max-width: 768px) {
    html[data-skin="register"] .nav-tab {
        min-height: 68px;
        padding-block: var(--space-2);
    }

    html[data-skin="register"] .tab-container {
        padding: var(--space-4);
    }
}

/* Operate: compact instrument rail and continuous working surfaces */
html[data-skin="register"] .instrument-rail {
    background: var(--bg-primary);
    border-bottom-color: var(--border-color-strong);
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
    html[data-skin="register"] .instrument-rail {
        background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
    }
}

html[data-skin="register"] .instrument-brand {
    font-family: var(--font-family-display);
    font-weight: 800;
}

html[data-skin="register"] .instrument-brand img {
    filter: saturate(0.8);
}

html[data-skin="register"] .instrument-nav__item {
    letter-spacing: 0.01em;
}

html[data-skin="register"] .instrument-nav__item.is-active::after {
    height: 3px;
}

html[data-skin="register"] .authenticated-shell .app-content {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(to bottom, transparent 31px, rgb(82 107 89 / 0.07) 32px);
    background-size: 100% 32px;
}

html[data-theme="dark"][data-skin="register"] .authenticated-shell .app-content {
    background-image: linear-gradient(to bottom, transparent 31px, rgb(233 239 232 / 0.045) 32px);
}

html[data-skin="register"] .authenticated-shell .page-header {
    align-items: end;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom-color: var(--border-color-strong);
}

html[data-skin="register"] .authenticated-shell .page-title,
html[data-skin="register"] .authenticated-shell .page-header h1 {
    font-size: clamp(1.65rem, 2.2vw, 2.25rem) !important;
    letter-spacing: -0.035em;
}

html[data-skin="register"] .authenticated-shell .card,
html[data-skin="register"] .authenticated-shell .tab-container,
html[data-skin="register"] .authenticated-shell .table-container {
    border-radius: 2px;
    box-shadow: none;
}

html[data-skin="register"] .app-footer--shared {
    background: var(--bg-primary);
}

html[data-skin="register"] .field-sheet-heading h1,
html[data-skin="register"] .take-inspector__header h2 {
    font-family: var(--font-family-display);
}

html[data-skin="register"] .field-sheet,
html[data-skin="register"] .take-inspector,
html[data-skin="register"] .take-inspector-dialog,
html[data-skin="register"] .field-sheet-empty,
html[data-skin="register"] .field-sheet-search {
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .take-sheet__head {
    background: var(--surface-secondary);
}

html[data-skin="register"] .take-sheet__row:hover,
html[data-skin="register"] .take-sheet__row.is-selected {
    background: var(--surface-secondary);
}

html[data-skin="register"] .take-sheet__session h2 {
    font-family: var(--font-family-display);
    font-weight: 700;
}

html[data-skin="register"] .take-sheet__session img,
html[data-skin="register"] .take-sheet__image-placeholder {
    border-radius: 0;
}

html[data-skin="register"] .dispatch-heading h1,
html[data-skin="register"] .dispatch-record h3 {
    font-family: var(--font-family-display);
}

html[data-skin="register"] .dispatch-panel,
html[data-skin="register"] .dispatch-readouts {
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .inventory-heading h1,
html[data-skin="register"] .inventory-row strong {
    font-family: var(--font-family-display);
}

html[data-skin="register"] .inventory-index,
html[data-skin="register"] .inventory-section {
    border-radius: 0;
    box-shadow: none;
}

html[data-skin="register"] .map-workspace__heading h1 {
    font-family: var(--font-family-display);
}

html[data-skin="register"] .map-stage,
html[data-skin="register"] .map-stage__legend {
    border-radius: 0;
}

html[data-skin="register"] .take-form-heading h1 {
    font-family: var(--font-family-display);
}

html[data-skin="register"] .inventory-list-page .page-title,
html[data-skin="register"] .inventory-list-page .take-card-title h3 {
    font-family: var(--font-family-display);
}