/* ASRI-sheet.base.css */

/*
Keep selectors synchronized with HTML and JS.
Renaming IDs/classes may require updates across rendering, behavior, and print styles.
*/

:root {
    --asri-attr-box-width: 120px;
    --asri-box-radius: 7px;
    --asri-field-radius: 3px;
    --asri-color-black: #000000;
    --asri-color-dark-blue: #003399;
    --asri-color-dark-red: #993300;
    --asri-color-bluegrey-50: #eceff1;
    --asri-color-bluegrey-100: #cfd8dc;
    --asri-color-bluegrey-200: #b0bec5;
    --asri-color-bluegrey-300: #90a4ae;
    --asri-color-bluegrey-400: #78909c;
    --asri-color-bluegrey-500: #607d8b;
    --asri-color-bluegrey-600: #546e7a;
    --asri-color-bluegrey-700: #455a64;
    --asri-color-bluegrey-800: #37474f;
    --asri-color-bluegrey-900: #263238;
    --asri-color-white: #ffffff;
    --asri-logo-width: 148px; /* calc(var(--asri-attr-box-width) + (2 * var(--asri-padding-lg))) = 120px + 2*14px = 148px; */
    --asri-numeric-width-sm: 25px;
    --asri-numeric-width-md: 30px;
    --asri-numeric-width-lg: 35px;
    --asri-numeric-width-xl: 40px;
    --asri-skill-column-gap: 2px;
    --asri-padding-xxs: 2px;
    --asri-padding-xs: 4px;
    --asri-padding-sm: 7px;
    --asri-padding-md: 10px;
    --asri-padding-lg: 14px;
    --asri-padding-xl: 21px;
    --asri-power-picker-width: 1.85rem;
    --asri-power-select-width: 100%;
    --asri-text-font: "Roboto", sans-serif;
    --asri-name-font: "Playfair Display", sans-serif;
    --asri-text-size-xs: 9px;
    --asri-text-size-sm: 12px;
    --asri-text-size-md: 14px;
    --asri-text-size-lg: 21px;
    --asri-text-size-xl: 24px;
    --asri-text-size-xxl: 28px;
    --asri-text-size-title: 40px;
    --asri-text-weight-normal: 500;
    --asri-text-weight-calculated: 700;
    --asri-text-weight-strong: 800;
    --asri-text-weight-heavy: 900;

    --asri-color-text: var(--asri-color-black);
    --asri-color-text-info: var(--asri-color-bluegrey-400);
    --asri-color-border: var(--asri-color-black);
    --asri-color-highlight: var(--asri-color-dark-blue);
    --asri-color-danger: var(--asri-color-dark-red);
    --asri-color-placeholder: var(--asri-color-bluegrey-100);
    --asri-color-underline: var(--asri-color-bluegrey-400);
    --asri-underline-rule: 1px solid var(--asri-color-underline);
    --asri-score-box-rule: 1px solid var(--asri-color-bluegrey-400);
    --asri-color-thin-border: var(--asri-color-bluegrey-400);
    --asri-thin-border-rule: 1px solid var(--asri-color-bluegrey-400);
    --asri-thin-border-print-rule: 1px solid var(--asri-color-white);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 2.25rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: #111111;
    color: var(--asri-color-text);
    font-family: var(--asri-text-font);
    font-optical-sizing: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

input,
textarea,
select,
button {
    font-family: var(--asri-text-font);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);
}

input {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Canonical focus styling (single source of truth) */
.page :is(input, textarea, select, button):focus {
    outline: none;
    box-shadow: none;
}

.page :is(input, textarea, select):focus {
    border-color: var(--asri-color-underline);
    background-color: var(--asri-color-white);
}

.asri-placeholder {
    color: var(--asri-color-placeholder);
}

input.asri-placeholder,
textarea.asri-placeholder {
    caret-color: transparent;
    user-select: none;
}

.asri-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    font-family: var(--asri-text-font);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);

    color: var(--asri-color-text);
    background-color: var(--asri-color-white);

    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);

    height: var(--asri-text-size-xl);
    margin-left: var(--asri-padding-sm);
    padding: var(--asri-padding-xxs);

    line-height: 1;

    background-image:
    linear-gradient(45deg, transparent 50%, var(--asri-color-placeholder) 50%),
    linear-gradient(135deg, var(--asri-color-placeholder) 50%, transparent 50%);
    background-position:
    calc(100% - 0.85rem) 50%,
    calc(100% - 0.55rem) 50%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.asri-select option {
    background-color: var(--asri-color-white);
    color: var(--asri-color-text);
}

/* ---- Sheet effect ---- */

.page {
    background-color: var(--asri-color-white);
    width: 8.5in;
    min-height: 11in;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: var(--asri-color-text);
    position: relative;
    margin: 1.5rem auto;
    padding: 0.25in 0.5in;
    border-radius: var(--asri-box-radius);
}

/* ---- Phone/mobile logo ---- */

.logo-phone {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.logo-phone img {
    display: block;
    width: var(--asri-logo-width);
    height: auto;
}

/* ---- Form fields ---- */

.field label,
.field-calculated label {
    display: block;
    font-size: var(--asri-text-size-xs);
    font-weight: var(--asri-text-weight-strong);
    margin: 0;
}

.field input,
.field-calculated input {
    width: 100%;
    border: 0;
    border-bottom: var(--asri-underline-rule);
    font-size: var(--asri-text-size-md);
    margin: 0;
    padding: 3px 0;
}

.field-calculated input {
    border-bottom: 2px solid transparent;
}

.field-calculated input[readonly] {
    pointer-events: none;
    caret-color: transparent;
    cursor: default;
}

/* ---- Labels ---- */

.label-centered {
    text-align: center;
    width: 100%;
}

.field-centered {
    text-align: center;
}

.column-label {
    color: var(--asri-color-bluegrey-400);
    font-size: var(--asri-text-size-xs);
    font-weight: var(--asri-text-weight-normal);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--asri-padding-xxs) 0;
    padding: 0;
}

/* ---- Biography section layout (screen + print) ---- */

.biography-section {
    margin: 0 0 var(--asri-padding-sm) 0;
    padding: 0;
}

.biography-grid {
    display: grid;
    grid-template-columns: 1fr var(--asri-logo-width);
    column-gap: var(--asri-padding-xl);
    row-gap: 1px;
    align-items: end;
}

.biography-grid input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--asri-color-text);
    font-family: var(--asri-text-font);
    font-weight: var(--asri-text-weight-normal);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.biography-grid input.asri-placeholder,
.biography-grid input::placeholder {
    color: var(--asri-color-placeholder);
    opacity: 1;
}

.biography-name {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
}

.biography-logo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.biography-logo img {
    display: block;
    width: var(--asri-logo-width);
    height: auto;
    margin: 0;
    padding: 0;
}

.biography-profession {
    grid-column: 1;
    grid-row: 2;
    margin-top: -2px;
}

.biography-player {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.15em;
    align-items: baseline;
    margin-top: -2px;
}

.biography-appearance {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
}

.biography-name input {
    font-family: var(--asri-name-font);
    font-size: var(--asri-text-size-title);
    font-weight: var(--asri-text-weight-strong);
    letter-spacing: -0.015em;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.biography-profession input,
.biography-player input {
    font-size: var(--asri-text-size-md);
}

.biography-inline-label {
    color: var(--asri-color-bluegrey-400);
    font-size: var(--asri-text-size-sm);
    font-weight: var(--asri-text-weight-normal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    text-align: right;
    padding-left: var(--asri-padding-xs);
    padding-right: var(--asri-padding-xs);
}

.biography-player input {
    min-width: 0;
    text-align: left;
}

/* ---- Warning, Will Robinson ---- */

.warning-section {
    width: 100%;
    margin: var(--asri-padding-lg) 0 0 0;
    padding: 0;
}

.warning-box {
    background: var(--asri-color-white);
    color: var(--asri-color-danger);
    font-size: var(--asri-text-size-md);
    text-align: center;
    border: 2px solid var(--asri-color-dark-red);
    border-radius: var(--asri-box-radius);
    margin: var(--asri-padding-lg) 0 calc(0.5 * var(--asri-padding-lg)) 0;
    padding: var(--asri-padding-lg);
}

.warning-box strong {
    font-weight: var(--asri-text-weight-strong);
}

/* ---- Attrs + Skills + Powers ---- */

.asri-box {
    background: var(--asri-color-white);
    border: 2px solid var(--asri-color-border);
    border-radius: var(--asri-box-radius);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    margin: var(--asri-padding-lg) 0 0 0;
    padding: var(--asri-padding-lg);
    padding-top: var(--asri-padding-lg);
    padding-bottom: var(--asri-padding-xxs);
}

/* Section-specific spacing overrides */
.powers-box.asri-box {
    margin-top: var(--asri-padding-lg);
    padding-left: var(--asri-padding-sm);
}

.attrs-skills-section {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.attrs-section {
    flex: 0 0 var(--asri-logo-width);
    width: var(--asri-logo-width);
    min-width: var(--asri-logo-width);
}

.attr-box {
    width: var(--asri-attr-box-width);
}

.attr-pair {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.attr-pair > * {
    flex: 1 1 0;
    min-width: 0;
}

.attr-title,
.panel-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 0.2rem 0.6rem;
    background: var(--asri-color-black);
    color: var(--asri-color-white);
    font-weight: var(--asri-text-weight-strong);
    font-size: var(--asri-text-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: var(--asri-box-radius);
    white-space: nowrap;
}

.attr-stats {
    gap: var(--asri-padding-lg);
    display: flex;
    width: 80%;
    justify-content: center;
}

.attr-stats > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Attr stat field labels: centered under inputs */
.attr-stats label.column-label {
    color: var(--asri-color-bluegrey-400);
    font-size: var(--asri-text-size-xs);
    font-weight: var(--asri-text-weight-normal);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 var(--asri-padding-sm) 0;
    padding: 0;
}

.attr-stats .field label,
.attr-stats .field-calculated label {
    text-align: center;
    width: 100%;
}

.attr-box.asri-box {
    align-items: center;
    padding: var(--asri-padding-lg) var(--asri-padding-sm) 0 var(--asri-padding-sm);
}

.attr-box.asri-box.attr-box-stamina {
    margin: var(--asri-padding-xl) 0 0 0;
    padding: var(--asri-padding-lg) 0 0 0;
}

/* Attr stat fields: labels below inputs, centered, match biography label style */
.attr-stats .field,
.attr-stats .field-calculated {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}

.attr-stats input {
    text-align: center;
}

/* Attribute inputs: larger numbers; bold Level only (attrs-section only) */
.attrs-section .attr-stats input {
    font-size: var(--asri-text-size-lg);
}

.attrs-section .attr-stats .field-calculated input {
    font-size: var(--asri-text-size-xl);
    font-weight: var(--asri-text-weight-calculated);
    margin: 0;
    padding: 0;
}

.attrs-section .attr-stats .field input {
    font-weight: var(--asri-text-weight-normal);
}

.attrs-section .attr-stats input.asri-placeholder {
    color: var(--asri-color-placeholder);
}

.skills-section {
    display: flex;
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
    width: auto;
}

.skills-box {
    width: 100%;
    padding-right: var(--asri-padding-sm);
    padding-bottom: var(--asri-padding-sm);
    padding-left: var(--asri-padding-sm);
}

.skills-columns {
    display: flex;
    align-items: flex-start;
}

.skills-part {
    flex: 1 1 0;
    min-width: 0;
}

.skills-part-2 {
    margin-top: 0;
}

.skills-rows {
    display: flex;
    flex-direction: column;
}

.skills-row {
    display: flex;
    align-items: baseline;
    gap: var(--asri-skill-column-gap);
    width: 100%;
    margin-top: var(--asri-padding-xxs);
}

.skill-name-text {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--asri-text-size-md);
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 0;
    background: transparent;
    cursor: default;
}

.skills-section .skill-name-text {
    pointer-events: none;
    user-select: none;
    caret-color: transparent;
    cursor: default;
}

.skill-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--asri-padding-sm);
}

.skill-name-text.skill-sub {
    font-style: italic;
    padding-left: var(--asri-padding-sm);
}

.skill-related-attr {
    color: var(--asri-color-text-info);
    white-space: nowrap;
    font-size: var(--asri-text-size-sm);
    font-style: normal;
}

.skills-column-labels {
    display: flex;
    gap: var(--asri-skill-column-gap);
    width: 100%;
}

.skills-footnote {
    margin-top: var(--asri-padding-xs);
    padding-right: var(--asri-padding-md);
    font-size: var(--asri-text-size-xs);
    text-align: right;
    font-style: italic;
}

.skill-level {
    flex: 0 0 var(--asri-numeric-width-md);
    min-width: var(--asri-numeric-width-md);
}

.skill-score {
    flex: 0 0 var(--asri-numeric-width-md);
    min-width: var(--asri-numeric-width-lg);
}

.skill-level input[readonly] {
    caret-color: transparent;
    pointer-events: none;
    user-select: none;
}

.asri-stat-input {
    line-height: 1.2;
    width: 100%;
    font-size: var(--asri-text-size-md);
    text-align: center;
    margin: 0;
    padding: 3px 0;
    box-sizing: border-box;
    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);
}

.asri-score-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--asri-text-weight-normal);
}

.asri-score-wrap > input,
.page input[type="number"][id$="-score"],
.page input[type="number"][id^="skill-score-"] {
    width: 100%;
    min-width: 0;
    border: var(--asri-score-box-rule);
    border-radius: var(--asri-field-radius);
    background: var(--asri-color-white);
    text-align: center;
    margin: 0;
    padding: 3px 0;
    box-sizing: border-box;
}

/* Ensure attribute score inputs remain large enough after replacing parentheses with boxes. */
.page input[type="number"][id="agility-score"],
.page input[type="number"][id="strength-score"],
.page input[type="number"][id="reason-score"],
.page input[type="number"][id="intuition-score"] {
    min-width: var(--asri-numeric-width-xl);
}

/* Column header alignment (shared: Skills + Powers) */

/* Back-compat selectors (avoid HTML churn) */
.skill-col-label-level,
.skill-col-label-score,
.power-col-label-level,
.power-col-label-score {
    flex: 0 0 var(--asri-numeric-width-md);
    min-width: var(--asri-numeric-width-md);
    text-align: center;
}

.skill-col-label-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.power-col-label-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    margin-left: var(--asri-padding-sm);
}

/* --- Powers: match Skills column pattern --- */
.powers-section {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.powers-box {
    width: 100%;
}

.powers-columns {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.powers-part {
    flex: 1 1 0;
    min-width: 0;
}

.powers-part-2 {
    margin-left: var(--asri-padding-sm);
}

.powers-column-labels {
    display: flex;
}

.powers-column-labels > * + * {
    margin-left: 0;
}

.powers-rows {
    display: flex;
    flex-direction: column;
    margin: var(--asri-padding-xs) 0 0 0;
}

.powers-row {
    margin: 0 0 0.5rem 0;
}

.powers-column-values {
    display: flex;
    align-items: flex-start;
}

.powers-column-values > * + * {
    margin-left: 0;
}

.power-level {
    flex: 0 0 var(--asri-numeric-width-md);
    min-width: var(--asri-numeric-width-md);
}

.power-score {
    flex: 0 0 var(--asri-numeric-width-md);
    min-width: var(--asri-numeric-width-lg);
}

.power-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--asri-padding-sm);
}

.power-level input[readonly] {
    caret-color: transparent;
    pointer-events: none;
    user-select: none;
}

.power-name-picker {
    position: relative;
    display: flex;
    width: var(--asri-power-select-width);
}

.power-name .power-name-input {
    width: 100%;
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: var(--asri-padding-xxs) calc(var(--asri-power-picker-width) + var(--asri-padding-xxs)) var(--asri-padding-xxs) var(--asri-padding-xxs);
    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);
    background: var(--asri-color-white);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);
    line-height: 1;
    box-sizing: border-box;
}

.power-name .power-name-input::placeholder {
    color: var(--asri-color-placeholder);
    opacity: 1;
}

.power-name .power-template-select {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--asri-power-picker-width);
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--asri-thin-border-rule);
    border-radius: 0 var(--asri-field-radius) var(--asri-field-radius) 0;
    color: transparent;
    background-color: transparent;
    cursor: pointer;
}

.power-name .power-template-select option {
    color: var(--asri-color-text);
}

.power-name .power-notes-input {
    width: var(--asri-power-select-width);
    margin: 0.25rem 0 0 0;
    padding-left: 0;
    border: 0;
    border-bottom: var(--asri-underline-rule);
    font-size: var(--asri-text-size-sm);
    box-sizing: border-box;
}

/* ---- Perks + Quirks ---- */

.perks-quirks-row {
    display: flex;
    gap: var(--asri-padding-lg);
    margin-top: var(--asri-padding-lg);
    width: 100%;
}

.perks-section,
.quirks-section {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.perks-box.asri-box,
.quirks-box.asri-box {
    width: 100%;
    margin-top: 0;
    padding-bottom: var(--asri-padding-sm);
}

.perks-rows,
.quirks-rows {
    display: flex;
    flex-direction: column;
    margin: var(--asri-padding-sm) 0 0 0;
}

.perks-row,
.quirks-row {
    margin: 0 0 0.5rem 0;
}

.perks-name,
.quirks-name {
    width: 100%;
    min-width: 0;
}

.perks-name-picker,
.quirks-name-picker {
    position: relative;
    display: flex;
    width: 100%;
}

.perks-name-input,
.quirks-name-input {
    width: 100%;
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: var(--asri-padding-xxs) calc(var(--asri-power-picker-width) + var(--asri-padding-xxs)) var(--asri-padding-xxs) var(--asri-padding-xxs);
    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);
    background: var(--asri-color-white);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);
    line-height: 1;
    box-sizing: border-box;
}

.perks-name-input::placeholder,
.quirks-name-input::placeholder {
    color: var(--asri-color-placeholder);
    opacity: 1;
}

.perks-template-select,
.quirks-template-select {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--asri-power-picker-width);
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--asri-thin-border-rule);
    border-radius: 0 var(--asri-field-radius) var(--asri-field-radius) 0;
    color: transparent;
    background-color: transparent;
    cursor: pointer;
}

.perks-template-select option,
.quirks-template-select option {
    color: var(--asri-color-text);
}

/* --- Equipment: one column, item + notes --- */

.equipment-section {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.equipment-box {
    width: 100%;
}

.equipment-columns {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.equipment-part {
    flex: 1 1 0;
    min-width: 0;
}

.equipment-column-labels {
    display: flex;
}

.equipment-column-labels > * + * {
    margin-left: var(--asri-padding-sm);
}

.equipment-rows {
    display: flex;
    flex-direction: column;
    margin: var(--asri-padding-xs) 0 0 0;
}

.equipment-row {
    margin: 0 0 0.5rem 0;
}

.equipment-column-values {
    display: flex;
}

.equipment-column-values > * + * {
    margin-left: var(--asri-padding-sm);
}

.equipment-select {
    flex: 0 0 30%;
    min-width: 0;
}

.equipment-text {
    flex: 1 1 auto;
    min-width: 0;
}

.equipment-select select:not(.equipment-template-select) {
    width: 100%;
    margin-left: 0;
}

.equipment-select .equipment-template-select {
    width: var(--asri-power-picker-width);
    margin-left: 0;
}

.equipment-name-picker {
    position: relative;
    display: flex;
    width: 100%;
}

.equipment-name-input {
    width: 100%;
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: var(--asri-padding-xxs) calc(var(--asri-power-picker-width) + var(--asri-padding-xxs)) var(--asri-padding-xxs) var(--asri-padding-xxs);
    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);
    background: var(--asri-color-white);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);
    line-height: 1;
    box-sizing: border-box;
}

.equipment-name-input::placeholder {
    color: var(--asri-color-placeholder);
    opacity: 1;
}

.equipment-name-input.asri-placeholder {
    color: var(--asri-color-placeholder);
}

.equipment-template-select {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--asri-power-picker-width);
    height: var(--asri-text-size-xl);
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--asri-thin-border-rule);
    border-radius: 0 var(--asri-field-radius) var(--asri-field-radius) 0;
    color: transparent;
    background-color: transparent;
    cursor: pointer;
}

.equipment-template-select option {
    color: var(--asri-color-text);
}

.equipment-text textarea,
.equipment-text input {
    width: 100%;
    border: 0;
    border-bottom: var(--asri-underline-rule);
    font-size: var(--asri-text-size-md);
    padding: 3px 0;
}

.powers-column-values,
.equipment-column-values {
    align-items: flex-start;
}

.powers-row,
.equipment-row {
    height: auto;
    min-height: 0;
}

/* ---- Points section ---- */

.experience-box.asri-box,
.points-box.asri-box {
    align-items: center;
    width: 100%;
    margin-top: 0;
    padding-bottom: var(--asri-padding-sm);
}

.experience-row,
.points-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--asri-padding-sm);
    margin-top: 0;
}

.skills-points-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    margin: 0;
    min-width: 60%;
    width: auto;
}

.experience-points-row {
    display: flex;
    gap: var(--asri-padding-lg);
    margin-top: var(--asri-padding-lg);
    width: 100%;
}

.experience-section {
    flex: 4 1 0;
    min-width: 0;
    max-width: calc(40% - (0.5 * var(--asri-padding-lg)));
    margin: 0;
    padding: 0;
}

.points-section {
    flex: 6 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

input#points-attrs,
input#points-skills,
input#points-powers {
    text-align: center;
    font-weight: var(--asri-text-weight-calculated);
    font-size: var(--asri-text-size-md);
    border: none;
    margin: 0;
    padding: 3px 0;
    box-sizing: border-box;
    border-color: var(--asri-color-white);
}

input#points-attrs {
    width: var(--asri-numeric-width-lg);
    min-width: var(--asri-numeric-width-md);
    padding-left: var(--asri-padding-sm);
}

input#points-skills {
    width: var(--asri-numeric-width-xl);
    min-width: var(--asri-numeric-width-lg);
    padding-left: var(--asri-padding-sm);
}

input#points-powers {
    width: var(--asri-numeric-width-xl);
    min-width: var(--asri-numeric-width-lg);
    padding-left: var(--asri-padding-sm);
}

.experience-pair,
.points-pair {
    display: flex;
    align-items: baseline;
    gap: var(--asri-padding-sm);
    min-width: 0;
}

.experience-pair input[type="number"] {
    width: var(--asri-numeric-width-xl);
    min-width: var(--asri-numeric-width-md);
    text-align: center;
    border: var(--asri-thin-border-rule);
    border-radius: var(--asri-field-radius);
    font-size: var(--asri-text-size-md);
    margin: 0;
    padding: 3px 0;
    box-sizing: border-box;
}

.experience-box .experience-row,
.experience-box .experience-row *,
.points-box .points-row,
.points-box .points-row * {
    font-size: var(--asri-text-size-md);
}

/* ---- Footer ---- */

.asri-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--asri-color-white);
    border-top: 1px solid var(--asri-color-underline);
    font-family: var(--asri-text-font);
    font-size: var(--asri-text-size-sm);
    color: var(--asri-color-text-info);
    padding: 0.35rem 0.75rem;
    text-align: right;
    z-index: 999;
}

/* ---- Skills options menu (gear) ---- */

.skills-gear-slot {
    position: absolute;
    top: var(--asri-padding-lg);
    right: var(--asri-padding-lg);
    z-index: 10;
}

.relative-anchor {
    position: relative;
}

.options-gear-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.options-gear-btn img {
    display: block;
}

.options-menu {
    position: absolute;
    top: 0.2rem;
    right: 2.0rem;
    width: 15rem;
    background: var(--asri-color-white);
    border: 1px solid var(--asri-color-border);
    border-radius: var(--asri-box-radius);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    padding: 0.5rem 0.6rem;
    display: none;
    z-index: 100;
}

.options-menu.show {
    display: block;
}

.options-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.options-divider {
    opacity: 0.5;
    user-select: none;
}

.options-clear-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.35rem;
}

.options-clear-link {
    font-size: 0.75rem;
    font-weight: var(--asri-text-weight-normal);
    color: var(--asri-color-highlight);
    text-decoration: none;
}

.options-clear-link:hover {
    color: var(--asri-color-bluegrey-400);
}

/* ---- Equipment options menu (gear) ---- */

.equipment-gear-slot {
    position: absolute;
    top: var(--asri-padding-lg);
    right: var(--asri-padding-lg);
    z-index: 10;
}

.equipment-options-menu {
    width: 12rem;
}

/* ---- Visibility helpers ---- */

.warning-section.is-hidden {
    display: none;
}

.skills-row.is-hidden {
    display: none;
}

.powers-section.is-hidden {
    display: none;
}

.powers-row.is-hidden {
    display: none;
}

.points-section.is-hidden {
    visibility: hidden;
}

.points-pair.is-hidden {
    display: none;
}

/* ---- Wrapped auto-expanding textareas ---- */

.biography-appearance,
.power-name,
.equipment-text {
    min-width: 0;
}

.biography-appearance textarea,
.power-name .power-notes-input,
.equipment-text textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: calc(1.3em + 6px);
    height: auto;
    margin: 0;
    padding: 3px 0;
    border: 0;
    border-bottom: var(--asri-underline-rule);
    background: transparent;
    font-family: var(--asri-text-font);
    font-size: var(--asri-text-size-md);
    font-weight: var(--asri-text-weight-normal);
    line-height: 1.3;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
}

.biography-appearance textarea:not(.asri-placeholder),
.power-name .power-notes-input:not(.asri-placeholder),
.equipment-text textarea:not(.asri-placeholder) {
    border-bottom-color: transparent;
}