* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    /* Light theme tokens. */
    /* Surface / background */
    --color-page-bg: #fff1e6;
    --color-surface: #ffffff;
    --color-surface-elevated: rgba(255, 255, 255, 0.7);
    --color-surface-muted: rgba(0, 0, 0, 0.06);
    --color-surface-control: #ffffff;
    --color-surface-control-hover: #fff3eb;
    --color-surface-control-active: #f4e7dc;
    --color-surface-control-disabled: rgba(0, 0, 0, 0.08);
    --color-surface-tab-inactive: rgba(0, 0, 0, 0.13);
    --color-surface-calendar-today: #ffe6e6;

    /* Text */
    --color-text-body: rgb(0, 0, 0);
    --color-text-primary: rgba(0, 0, 0, 0.9);
    --color-text-secondary: rgba(0, 0, 0, 0.7);
    --color-text-muted: rgba(128, 128, 128, 0.88);
    --color-text-button: rgba(58, 52, 47, 0.9);
    --color-text-button-hover: rgba(52, 47, 42, 0.96);
    --color-text-button-active: rgba(44, 40, 36, 0.98);

    /* Borders */
    --color-border-transparent: rgba(0, 0, 0, 0);
    --color-border-subtle: rgba(0, 0, 0, 0.15);
    --color-border-default: rgba(0, 0, 0, 0.2);
    --color-border-strong: rgba(0, 0, 0, 0.6);
    --color-border-divider: gray;
    --color-border-grid: rgba(128, 128, 128, 0.2);
    --color-border-button: rgba(92, 82, 72, 0.2);
    --color-border-button-hover: rgba(92, 82, 72, 0.26);

    /* Accent / action */
    --color-text-accent: #ff006e;
    --color-text-button-disabled: rgba(92, 82, 72, 0.48);
    --color-border-button-disabled: rgba(92, 82, 72, 0.12);

    /* State colors */
    --color-border-required: rgba(235, 68, 68, 0.50);
    --color-surface-required: rgba(255, 80, 80, 0.08);
    --color-focus-ring: rgba(129, 113, 98, 0.34);
    /* EFW percentile colors are clinical risk semantics; tune per theme for contrast. */
    --color-efw-percentile-safe: #95d8b2;
    --color-efw-percentile-caution: #f0c58a;
    --color-efw-percentile-warning: #f3aaa7;
    --color-efw-percentile-safe-ink: #5f9e7a;
    --color-efw-percentile-caution-ink: #b7834e;
    --color-efw-percentile-warning-ink: #c27775;
    --color-efw-overlay-surface: rgba(255, 255, 255, 0.78);
    --color-efw-tooltip-surface: rgba(255, 255, 255, 0.84);
    --color-efw-point-ring: rgba(255, 255, 255, 0.9);
    --color-efw-point-shadow: rgba(0, 0, 0, 0.22);
    --color-efw-point-halo: rgba(255, 255, 255, 0.72);
    --color-efw-curve-center: #72c99a;
    --color-efw-curve-boundary: #e2ad6b;

    /* Shadows */
    --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
    --shadow-control: 0 0 4px 1px rgba(0, 0, 0, 0.05);
    --shadow-control-hover: 0 0 4px 1px rgba(0, 0, 0, 0.15);
    --shadow-control-button:
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-control-button-hover:
        0 1px 4px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --shadow-control-button-active: inset 0 1px 2px rgba(0, 0, 0, 0.10);
    --shadow-control-button-disabled:
        0 1px 2px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --shadow-tab-active: 0 -2px 4px 1px rgba(0, 0, 0, 0.05);
    --shadow-tab-hover: 0 -3px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-panel: 0 2px 4px 1px rgba(0, 0, 0, 0.05);
    --shadow-hover-soft: 0 0 5px rgba(33, 33, 33, 0.2);
    --shadow-icon-hover: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));

    /* Radius */
    --radius-card: 16px;
    --radius-control: 12px;
    --radius-control-compact: 8px;
    --radius-button: 10px;
    --radius-pill: 999px;
    --radius-none: 0;
    --radius-circle: 50%;

    /* Spacing */
    --space-2xs: 4px;
    --space-page-gap: 12px;
    --space-page-gap-compact: 8px;
    --space-page-padding-compact: 0 8px;
    --space-main-gap: 0 12px;
    --space-main-gap-compact: 0 8px;
    --space-control-gap-tight: var(--space-2xs);
    --space-control-gap: 6px;
    --space-control-gap-compact: 2px;
    --space-card-padding: 0.9rem 1.1rem;
    --space-card-padding-compact: 0.9rem 0.7rem;
    --space-input-area-padding-y: 16px;
    --space-input-area-padding-y-compact: 0.8rem;
    --space-input-padding: 8px;
    --space-input-padding-compact: 2px;
    --space-button-inline: 0 12px;
    --space-footer-padding: 0.5rem 0.8rem;

    /* Sizing */
    --size-control-height: 35px;
    --size-calendar-touch: 35px;
}

/* dark mode (begin) */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surface / background */
    --color-page-bg: #14110f;
    --color-surface: #211d1a;
    --color-surface-elevated: rgba(36, 31, 27, 0.88);
    --color-surface-muted: rgba(255, 255, 255, 0.08);
    --color-surface-control: #29231f;
    --color-surface-control-hover: #342d28;
    --color-surface-control-active: #3d352f;
    --color-surface-control-disabled: rgba(255, 255, 255, 0.10);
    --color-surface-tab-inactive: rgba(255, 255, 255, 0.10);
    --color-surface-calendar-today: #3a2427;

    /* Text */
    --color-text-body: rgba(248, 244, 239, 0.92);
    --color-text-primary: rgba(255, 250, 245, 0.94);
    --color-text-secondary: rgba(235, 226, 216, 0.74);
    --color-text-muted: rgba(207, 194, 181, 0.68);
    --color-text-button: rgba(238, 228, 217, 0.88);
    --color-text-button-hover: rgba(255, 248, 240, 0.94);
    --color-text-button-active: rgba(255, 250, 245, 0.98);

    /* Borders */
    --color-border-transparent: rgba(255, 255, 255, 0);
    --color-border-subtle: rgba(255, 255, 255, 0.15);
    --color-border-default: rgba(255, 255, 255, 0.24);
    --color-border-strong: rgba(255, 255, 255, 0.54);
    --color-border-divider: rgba(229, 216, 202, 0.34);
    --color-border-grid: rgba(229, 216, 202, 0.17);
    --color-border-button: rgba(232, 214, 196, 0.22);
    --color-border-button-hover: rgba(246, 226, 206, 0.34);

    /* Accent / action */
    --color-text-accent: #ff73a7;
    --color-text-button-disabled: rgba(220, 204, 188, 0.44);
    --color-border-button-disabled: rgba(232, 214, 196, 0.12);

    /* State colors */
    --color-border-required: rgba(255, 118, 118, 0.66);
    --color-surface-required: rgba(255, 112, 112, 0.12);
    --color-focus-ring: rgba(234, 206, 177, 0.44);

    /* EFW percentile colors are clinical risk semantics; tune per theme for contrast. */
    --color-efw-percentile-safe: #6fce96;
    --color-efw-percentile-caution: #e8b873;
    --color-efw-percentile-warning: #f0918d;
    --color-efw-percentile-safe-ink: #8ce4ad;
    --color-efw-percentile-caution-ink: #f0c987;
    --color-efw-percentile-warning-ink: #f7aaa5;
    --color-efw-overlay-surface: rgba(33, 29, 26, 0.90);
    --color-efw-tooltip-surface: rgba(33, 29, 26, 0.94);
    --color-efw-point-ring: rgba(255, 250, 244, 0.76);
    --color-efw-point-shadow: rgba(0, 0, 0, 0.58);
    --color-efw-point-halo: rgba(255, 255, 255, 0.18);
    --color-efw-curve-center: #78d99f;
    --color-efw-curve-boundary: #e9b46f;

    /* Shadows */
    --shadow-card: 0 2px 10px 0 rgba(0, 0, 0, 0.36);
    --shadow-control: 0 0 4px 1px rgba(0, 0, 0, 0.24);
    --shadow-control-hover: 0 0 5px 1px rgba(255, 236, 214, 0.12);
    --shadow-control-button:
        0 1px 2px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-control-button-hover:
        0 1px 5px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --shadow-control-button-active: inset 0 1px 3px rgba(0, 0, 0, 0.34);
    --shadow-control-button-disabled:
        0 1px 2px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-tab-active: 0 -2px 5px 1px rgba(0, 0, 0, 0.30);
    --shadow-tab-hover: 0 -3px 4px 0 rgba(255, 235, 215, 0.10);
    --shadow-panel: 0 2px 5px 1px rgba(0, 0, 0, 0.28);
    --shadow-hover-soft: 0 0 6px rgba(255, 236, 214, 0.16);
    --shadow-icon-hover: drop-shadow(0 0 2px rgba(255, 236, 214, 0.20));
}
/* dark mode (end) */

/* Legacy utility class names are kept for markup compatibility; theme changes should happen via :root tokens. */
.nmblock {
    border: 1px solid var(--color-border-transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background-color: var(--color-surface-elevated);
}

.nmbutton {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-control);
    background-color: var(--color-surface);
    cursor: pointer;
}

/* font (size and weight) */
body,
input,
button {
    font-family: 'Verdana', sans-serif;
}

/* Reduce accidental double-tap zoom while keeping pinch zoom. */
button,
[data-click],
[data-change],
input,
select,
textarea {
    touch-action: manipulation;
}

html,
input {
    /* for input so that browser doesn't zoom at focus! */
    font-size: 18px;
}

h3 {
    font-size: 1.25rem;
}

html {
    font-weight: 300;
}

h1,
h2,
h3,
#m1first,
#m2first {
    font-weight: 400;
}

body {
    color: var(--color-text-body);
    background-color: var(--color-page-bg);
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

#appLayout {
    display: flex;
    flex-direction: column;
    /* 跟最後RWD設定media的地方連動 */
    width: 530px;
    max-width: 100%;
    /* place calculator shell in the center */
    margin: 0 auto;
    gap: var(--space-page-gap);
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

#header0,
#header2 {
    /* 讓兩側有固定的寬度，以讓中間絕對置中 */
    width: 5rem;
    margin-top: 0;
}

#header2 {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    align-items: flex-start;
    gap: var(--space-control-gap-tight);
    overflow: visible;
    z-index: 20;

    font-size: 0.9rem;
}

#header21 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#time2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* setting style (begin) */
#settingsarea {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: visible;
}

#settingsbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-control-gap-tight);
    height: var(--size-control-height);
    min-width: 70px;
    padding: var(--space-button-inline);
    border: 1px solid var(--color-border-button);
    border-radius: var(--radius-pill);
    background: var(--color-surface-control);
    box-shadow: var(--shadow-control-button);
    color: var(--color-text-button);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

#settingsbutton:hover,
#settingsbutton[aria-expanded="true"] {
    border-color: var(--color-border-button-hover);
    background: var(--color-surface-control-hover);
    color: var(--color-text-button-hover);
    box-shadow: var(--shadow-control-button-hover);
}

#settingsbutton:active {
    transform: scale(0.96);
    background: var(--color-surface-control-active);
    color: var(--color-text-button-active);
    box-shadow: var(--shadow-control-button-active);
}

#settingsbutton:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.settingsbuttonicon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

#settingspopover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(15rem, calc(100vw - 24px));
    padding: 0.75rem;
    border: 1px solid var(--color-border-button);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transform-origin: top right;
    transition: opacity 160ms ease, transform 160ms ease;
}

#settingspopover[hidden] {
    display: none;
}

#settingspopover.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#settingspopovertitle {
    margin-bottom: 0.65rem;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.settingssection {
    display: flex;
    flex-direction: column;
    gap: var(--space-control-gap);
}

.settingssectiontitle {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.2;
}

.settingssegmentedcontrol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border-button);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.settingssegment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-control-gap-tight);
    min-width: 0;
    min-height: 36px;
    padding: 0 0.45rem;
    border: 1px solid var(--color-border-transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-button);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.settingssegment:hover {
    background: var(--color-surface-control-hover);
    color: var(--color-text-button-hover);
}

.settingssegment:active {
    transform: scale(0.98);
    background: var(--color-surface-control-active);
    color: var(--color-text-button-active);
}

.settingssegment:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

.settingssegment.is-selected {
    border-color: var(--color-border-button-hover);
    background: var(--color-surface-control);
    box-shadow: var(--shadow-control-button);
    color: var(--color-text-primary);
}

.settingssegmenticon {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    #settingspopover {
        transform: none;
        transition: none;
    }
}
/* setting style (end) */

#resetbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-control-gap-tight);
    height: var(--size-control-height);
    min-width: 70px;
    padding: var(--space-button-inline);
}

#resetbtn,
#monthleft .calendar_navbutton,
#monthright .calendar_jumpbutton {
    border: 1px solid var(--color-border-button);
    background: var(--color-surface-control);
    box-shadow: var(--shadow-control-button);
    color: var(--color-text-button);
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

#resetbtn {
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1;
}

#resetbtn .reseticon {
    width: 0.86rem;
    height: 0.86rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

#resetbtn:hover,
#monthleft .calendar_navbutton:hover,
#monthright .calendar_jumpbutton:hover:not(:disabled) {
    border-color: var(--color-border-button-hover);
    background: var(--color-surface-control-hover);
    color: var(--color-text-button-hover);
    box-shadow: var(--shadow-control-button-hover);
}

#resetbtn:active,
#monthright .calendar_jumpbutton:active:not(:disabled) {
    transform: scale(0.97);
    background: var(--color-surface-control-active);
    color: var(--color-text-button-active);
    box-shadow: var(--shadow-control-button-active);
}

#monthleft .calendar_navbutton:active {
    transform: scale(0.94);
    background: var(--color-surface-control-active);
    color: var(--color-text-button-active);
    box-shadow: var(--shadow-control-button-active);
}

#resetbtn:focus-visible,
#monthleft .calendar_navbutton:focus-visible,
#monthright .calendar_jumpbutton:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

h1 {
    font-size: 2rem;
    text-align: center;
}

h2 {
    font-size: 1rem;
}

#inputarea {
    width: 100%;
}

#input1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#input1>div {
    flex: auto;
    padding: var(--space-2xs) 0;
    text-align: center;
    cursor: pointer;
}

/* 初次顯示EDC的input; syn ui-x */
.input1active {
    border: 1px solid var(--color-border-transparent);
    border-bottom: none;
    border-top-right-radius: var(--radius-card);
    border-top-left-radius: var(--radius-card);
    background-color: var(--color-surface-elevated);
    /* 向上陰影 -2px */
    box-shadow: var(--shadow-tab-active);
}

.input1inactive {
    border: 1px solid var(--color-border-default);
    border-top-right-radius: var(--radius-card);
    border-top-left-radius: var(--radius-card);
    background-color: var(--color-surface-tab-inactive);
    color: var(--color-text-primary);
}

/* 設定五個tab hover時的表現 */
#input1>div:hover {
    box-shadow: var(--shadow-tab-hover);
    color: var(--color-text-body);
    text-decoration: underline;
    z-index: 0;
}

#input2 {
    display: flex;
    flex-direction: row;
    justify-content: center;

    border: 1px solid var(--color-border-transparent);
    border-top: none;
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
    /* 向下陰影 2px */
    box-shadow: var(--shadow-panel);
    background-color: var(--color-surface-elevated);

    padding: var(--space-input-area-padding-y) 0;
}

/* input general style */
input {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: inherit;
    padding: var(--space-input-padding);
    height: 2.25rem;
}

/* style input[type=number] */
/* 讓input輸入右側調節always出現 */
input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    height: 1.6rem;
    width: 1.6rem;
}

/* style input[type=date] */
input[type="date"]::-webkit-calendar-picker-indicator {
    height: 1.5rem;
    width: 1.5rem;
}

/* ui-x setting */
.ui-active {
    display: flex;
    flex-direction: row;
}

.ui-inactive {
    display: none;
}

/* 當ui選GA跟ET時，要align input跟p(text)到同一個高度 */
#ui-1,
#ui-2,
#ui-3,
#ui-4,
#ui-5 {
    align-items: center;
}

/* Try */
#input2>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.highlighted {
    border: 2px dashed var(--color-border-required);
    background-color: var(--color-surface);
}

/* ↓Hover Effect */
#input-EDC:hover,
#input-LMP:hover,
#input-interval:hover,
#input-CRLdate:hover,
#input-CRL:hover,
#input-GAdate:hover,
#input-GA-W:hover,
#input-GA-D:hover,
#input-ET:hover,
#input-embryoday:hover {
    box-shadow: var(--shadow-hover-soft);
    cursor: pointer;
}

button:hover {
    box-shadow: var(--shadow-control-hover);
    cursor: pointer;
}

/* ↑Hover Effect */

#input-CRL,
#input-interval,
#input-GA-W,
#input-GA-D,
#input-embryoday {
    width: 4rem;
}

#y-string,
#m-string {
    font-weight: 600;
    font-size: 1.1rem;
    /* line-height: 0px; */
    /* 讓放大的字體不會影響文字高度 */
}

sup {
    font-size: 0.8rem;
    line-height: 0;
    /*
    1. 上標後會改變line height，這樣表格的大小會改變，用此方式來把高度固定，表格高度才不會改變！
    2. 另一個方式是用align-items把文字底端對齊
    */
    margin: 0 0 0 1px;
}

#mainresult {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: var(--space-main-gap);
}

#m1,
#m2,
#result_recent,
#result_ovulation {
    /* syn */
    padding: var(--space-card-padding);
}

/* 根據計算好的內容調整 */
#m1,
#m2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: auto;
}

#m1title,
#m2title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* gap: var(--space-control-gap); */
}

/* copy buttons (begin) */
.copy-glyph-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--color-border-transparent);
    border-radius: var(--radius-control-compact);
    background: transparent;
    box-shadow: none;
    color: var(--color-text-button-disabled);
    cursor: default;
    line-height: 1;
    opacity: 0.58;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, opacity 120ms ease, transform 120ms ease;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

.copy-glyph-button svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.0;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.copy-glyph-button:disabled,
.copy-glyph-button[aria-disabled="true"] {
    border-color: var(--color-border-transparent);
    background: transparent;
    box-shadow: none;
    color: var(--color-text-button-disabled);
    cursor: default;
    opacity: 0.58;
}

.copy-glyph-button:disabled:hover,
.copy-glyph-button[aria-disabled="true"]:hover {
    border-color: var(--color-border-transparent);
    background: transparent;
    box-shadow: none;
    color: var(--color-text-button-disabled);
    cursor: default;
    transform: none;
}

.copy-glyph-button.is-copy-ready:not(:disabled),
.copy-glyph-button[aria-disabled="false"]:not(:disabled) {
    color: var(--color-text-button);
    cursor: pointer;
    opacity: 1;
}

.copy-glyph-button.is-copy-ready:not(:disabled):hover,
.copy-glyph-button[aria-disabled="false"]:not(:disabled):hover {
    border-color: var(--color-border-button-hover);
    background: var(--color-surface-control-hover);
    box-shadow: none;
    color: var(--color-text-button-hover);
}

.copy-glyph-button.is-copy-ready:not(:disabled):active,
.copy-glyph-button[aria-disabled="false"]:not(:disabled):active {
    background: var(--color-surface-control-active);
    color: var(--color-text-button-active);
    transform: scale(0.96);
}

.copy-glyph-button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

#m1title .copy-glyph-button,
#m2 .edc-copy-button {
    border-radius: var(--radius-circle);
    aspect-ratio: 1 / 1;
}

#m1title .copy-glyph-button svg,
#m2 .edc-copy-button svg {
    transition: stroke-width 120ms ease, opacity 120ms ease;
}

#m1.is-copy-enabled,
#m2.is-copy-enabled {
    cursor: pointer;
}

#m1title .copy-glyph-button.is-copy-ready:not(:disabled):hover,
#m2 .edc-copy-button.is-copy-ready:not(:disabled):hover,
#m1title .copy-glyph-button[aria-disabled="false"]:not(:disabled):hover,
#m2 .edc-copy-button[aria-disabled="false"]:not(:disabled):hover,
#m1.is-copy-enabled:hover #m1title .copy-glyph-button:not(:disabled),
#m2.is-copy-enabled:hover .edc-copy-button:not(:disabled) {
    border-color: var(--color-border-transparent);
    background: transparent;
    box-shadow: none;
    color: var(--color-text-button-hover);
}

#m1title .copy-glyph-button.is-copy-ready:not(:disabled):hover svg,
#m2 .edc-copy-button.is-copy-ready:not(:disabled):hover svg,
#m1title .copy-glyph-button[aria-disabled="false"]:not(:disabled):hover svg,
#m2 .edc-copy-button[aria-disabled="false"]:not(:disabled):hover svg,
#m1.is-copy-enabled:hover #m1title .copy-glyph-button:not(:disabled) svg,
#m2.is-copy-enabled:hover .edc-copy-button:not(:disabled) svg {
    stroke-width: 2.35;
}

#m1title .copy-glyph-button.is-copy-ready:not(:disabled):active,
#m2 .edc-copy-button.is-copy-ready:not(:disabled):active,
#m1title .copy-glyph-button[aria-disabled="false"]:not(:disabled):active,
#m2 .edc-copy-button[aria-disabled="false"]:not(:disabled):active,
#m1.is-copy-enabled:active #m1title .copy-glyph-button:not(:disabled),
#m2.is-copy-enabled:active .edc-copy-button:not(:disabled) {
    border-color: var(--color-border-transparent);
    background: transparent;
    color: var(--color-text-button-active);
    transform: none;
}

#m1title .copy-glyph-button.is-copy-ready:not(:disabled):active svg,
#m2 .edc-copy-button.is-copy-ready:not(:disabled):active svg,
#m1title .copy-glyph-button[aria-disabled="false"]:not(:disabled):active svg,
#m2 .edc-copy-button[aria-disabled="false"]:not(:disabled):active svg,
#m1.is-copy-enabled:active #m1title .copy-glyph-button:not(:disabled) svg,
#m2.is-copy-enabled:active .edc-copy-button:not(:disabled) svg {
    stroke-width: 2.5;
}

.copy-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 1000;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    font-size: 0.88rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
    text-align: center;
    white-space: normal;
}

.copy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.copy-toast.is-fading {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    .copy-toast {
        transition: none;
    }
}

/* copy buttons (end) */

#m1preset,
#m2preset {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#m1ga {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

#m1error {
    display: none;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#m2edcwrapper {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-control-gap);
}

#m2edc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

#m2edczs {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#m2edczs1,
#m2edczs2 {
    color: var(--color-text-secondary);
}

.m-emphasis {
    font-size: 2.6rem;
    font-weight: 500;
}

#result_recent,
#result_calendar {
    display: flex;
    flex-direction: column;

    width: 100%;
}

#cardtitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* 把arrow跟近期重要檢查垂直對在一起 */
    align-items: center;

    margin: 0 0 3px 0;
}

#cardcollection {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#cardcollection>div {
    width: 100%;
    padding: 0.05rem 0 0.05rem 0;

    flex-direction: row;
    justify-content: space-between;
}

#card_firstsono,
#card_firstblood,
#card_firstdown,
#card_amniocentesis,
#card_seconddown,
#card_sonography,
#card_secondsono,
#card_secondblood,
#card_ogtt,
#card_tdap,
#card_thirdblood,
#card_thirdsono,
#card_gbs {
    display: none;
    flex-direction: row;
    justify-content: space-between;
}

/* 把Tdap接種(預防)獨立出來 */
#card_tdap {
    border-top: 1px dashed var(--color-border-divider);
    margin-top: 5px;
}

#card_tdap>div {
    padding: 3px 0 0 0;
}


#card_previous,
#card_term,
#card_outofrange {
    display: none;
    flex-direction: row;
    justify-content: space-between;
}

.card_item {
    display: flex;
    flex-direction: row;
    gap: 0 var(--space-control-gap);
}

.font1 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
}

/* 以下style calendar */

#month {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem 0;
}

#monthleft,
#monthright {
    display: flex;
    flex-direction: row;
    gap: var(--space-control-gap);
}

#monthleft .calendar_navbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-calendar-touch);
    height: var(--size-calendar-touch);
    padding: 0;
    border-radius: var(--radius-circle);
}

#monthleft .calendar_navbutton svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#monthright {
    align-items: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-none);
    background: transparent;
    box-shadow: none;
}

#monthright .calendar_jumpbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: var(--size-control-height);
    padding: var(--space-button-inline);
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1;
}

#monthright .calendar_jumpbutton:disabled {
    background: var(--color-surface-control-disabled);
    border-color: var(--color-border-button-disabled);
    box-shadow: var(--shadow-control-button-disabled);
    color: var(--color-text-button-disabled);
    cursor: default;
}

#week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    width: 100%;
    text-align: center;

    margin: var(--space-page-gap-compact) 0 var(--space-2xs) 0;

    color: var(--color-text-secondary);
}

#day {
    /* display: grid;
    grid-template-columns: repeat(7, 1fr); */

    font-family: 'Noto Sans', sans-serif;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    border-radius: var(--radius-card);
}

#day>div {
    width: 14%;
    /* 將剩餘空間均分給div */
    flex-grow: 1;

}

#day>div {
    border-top: 1px solid var(--color-border-grid);
}

#day>div:nth-child(7n+2),
#day>div:nth-child(7n+3),
#day>div:nth-child(7n+4),
#day>div:nth-child(7n+5),
#day>div:nth-child(7n+6),
#day>div:nth-child(7n+7) {
    border-left: 1px solid var(--color-border-grid);
}

#day>div:nth-last-child(7) {
    border-bottom-left-radius: var(--radius-card);
}

#day>div:last-child {
    border-bottom-right-radius: var(--radius-card);
}

#day>div:hover {
    box-shadow: var(--shadow-hover-soft);
}

#today {
    background-color: var(--color-surface-calendar-today) !important;
    font-weight: 700;
}

.today-1 {
    color: var(--color-text-accent);
}

.prev-1,
.this-1,
.today-1,
.next-1 {
    font-size: 1.15rem;
    text-align: center;
}

.prev-1,
.this-1,
.next-1 {
    font-weight: 400;
}

.prev-2,
.this-2,
.today-2,
.next-2 {
    padding: 0 0 var(--space-2xs) 0;
}

.prev-2,
.this-2,
.next-2 {
    text-align: center;
    font-weight: 200;
}

.today-2 {
    text-align: center;
    font-weight: 600;
}

/* calendar day tile顏色 */
/* 本月及本日 */
.this-0,
#today {
    background-color: var(--color-surface);
}

/* 上個月及下個月 */
.prev-0,
.next-0 {
    background-color: var(--color-surface-muted);
}

.prev-1,
.prev-2,
.next-1,
.next-2 {
    color: var(--color-text-muted);
}

/*以上style calendar*/

/* EFW card (start) */
#result_efw {
    padding: var(--space-card-padding);
}

#efwtitle {
    margin-bottom: var(--space-control-gap);
}

.efwgraph-summary {
    color: var(--color-text-secondary);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.88rem;
    line-height: 1.35;
}

.efwgraph-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0;
    border-bottom: 0;
    padding: 0.65rem 0;
}

.efwgraph-standard-status {
    margin-top: var(--space-control-gap);
    min-height: 1.1rem;
    color: var(--color-text-secondary);
    font-size: 0.84rem;
    text-align: center;
}

.efwgraph-visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.efwgraph-chart-wrap {
    position: relative;
    margin-top: 0;
}

.efwgraph-chart {
    min-height: 210px;
}

.efwgraph-chart:empty {
    min-height: 0;
}

.efwgraph-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.efwgraph-grid {
    stroke: var(--color-border-grid);
    stroke-width: 1;
}

.efwgraph-axis {
    stroke: var(--color-border-default);
    stroke-width: 1.2;
}

.efwgraph-percentile-guide-line {
    stroke: var(--color-border-grid);
    stroke-width: 1;
    pointer-events: none;
}

.efwgraph-percentile-guide-label-group {
    pointer-events: none;
}

.efwgraph-axis-label,
.efwgraph-tick-label,
.efwgraph-curve-label,
.efwgraph-percentile-guide-label {
    fill: var(--color-text-secondary);
    font-family: 'Noto Sans', sans-serif;
}

.efwgraph-axis-label {
    font-size: 12px;
}

.efwgraph-tick-label,
.efwgraph-curve-label,
.efwgraph-percentile-guide-label {
    font-size: 14px;
}

.efwgraph-curve {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 2;
    opacity: 1;
}

.efwgraph-curve-p10 {
    stroke: var(--color-efw-curve-boundary);
}

.efwgraph-curve-p50 {
    stroke: var(--color-efw-curve-center);
}

.efwgraph-curve-p90 {
    stroke: var(--color-efw-curve-boundary);
}

.efwgraph-current-line {
    stroke: var(--color-text-primary);
    stroke-width: 1;
    opacity: 0.48;
}

.efwgraph-hover-line {
    stroke: var(--color-text-secondary);
    stroke-width: 1.1;
    stroke-dasharray: 3 3;
    opacity: 0.72;
    pointer-events: none;
}

.efwgraph-empty-curve {
    opacity: 1;
}

.efwgraph-empty-curve-label {
    opacity: 1;
}

.efwgraph-measured-point {
    fill: var(--color-text-muted);
    stroke: var(--color-efw-point-ring);
    stroke-width: 2.2;
    filter:
        drop-shadow(0 1px 2px var(--color-efw-point-shadow))
        drop-shadow(0 0 3px var(--color-efw-point-halo));
}

.efwgraph-measured-point.is-safe {
    fill: var(--color-efw-percentile-safe);
}

.efwgraph-measured-point.is-caution {
    fill: var(--color-efw-percentile-caution);
}

.efwgraph-measured-point.is-warning {
    fill: var(--color-efw-percentile-warning);
}

.efwgraph-measured-callout {
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.efwgraph-chart-wrap.is-hovering .efwgraph-measured-callout {
    opacity: 0;
}

.efwgraph-measured-callout-connector {
    stroke: var(--color-border-default);
    stroke-width: 1;
    opacity: 0.28;
}

.efwgraph-measured-callout-box {
    fill: var(--color-efw-overlay-surface);
    stroke: var(--color-border-subtle);
    stroke-width: 1;
}

.efwgraph-measured-callout-text,
.efwgraph-measured-callout-percentile {
    fill: var(--color-text-primary);
    font-family: 'Noto Sans', sans-serif;
    text-anchor: middle;
}

.efwgraph-measured-callout-text {
    font-size: 10.5px;
    font-weight: 500;
}

.efwgraph-measured-callout-percentile {
    fill: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 400;
}

.efwgraph-measured-callout.is-safe .efwgraph-measured-callout-box {
    stroke: var(--color-efw-percentile-safe);
}

.efwgraph-measured-callout.is-safe .efwgraph-measured-callout-percentile {
    fill: var(--color-efw-percentile-safe-ink);
}

.efwgraph-measured-callout.is-caution .efwgraph-measured-callout-box {
    stroke: var(--color-efw-percentile-caution);
}

.efwgraph-measured-callout.is-caution .efwgraph-measured-callout-percentile {
    fill: var(--color-efw-percentile-caution-ink);
}

.efwgraph-measured-callout.is-warning .efwgraph-measured-callout-box {
    stroke: var(--color-efw-percentile-warning);
}

.efwgraph-measured-callout.is-warning .efwgraph-measured-callout-percentile {
    fill: var(--color-efw-percentile-warning-ink);
}

.efwgraph-tooltip {
    position: absolute;
    z-index: 2;
    display: none;
    min-width: 96px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-control-compact);
    box-shadow: var(--shadow-card);
    background-color: var(--color-efw-tooltip-surface);
    color: var(--color-text-primary);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.efwgraph-tooltip.is-safe {
    border-color: var(--color-efw-percentile-safe);
}

.efwgraph-tooltip.is-caution {
    border-color: var(--color-efw-percentile-caution);
}

.efwgraph-tooltip.is-warning {
    border-color: var(--color-efw-percentile-warning);
}

.efwgraph-tooltip-measured.is-safe {
    color: var(--color-efw-percentile-safe-ink);
}

.efwgraph-tooltip-measured.is-caution {
    color: var(--color-efw-percentile-caution-ink);
}

.efwgraph-tooltip-measured.is-warning {
    color: var(--color-efw-percentile-warning-ink);
}

.efwgraph-tooltip.is-visible {
    display: block;
}

.efwgraph-measurement-title {
    color: var(--color-text-secondary);
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    white-space: nowrap;
}

.efwgraph-measured-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: var(--color-text-secondary);
    font-family: 'Noto Sans', sans-serif;
    flex-wrap: wrap;
}

.efwgraph-measured-control input {
    width: 7rem;
    height: 2.25rem;
    text-align: center;
}

.efwgraph-measured-control input:hover:not(:disabled) {
    box-shadow: var(--shadow-hover-soft);
    cursor: pointer;
}

.efwgraph-measured-control input:disabled {
    border-color: var(--color-border-button-disabled);
    background-color: var(--color-surface-control-disabled);
    color: var(--color-text-button-disabled);
}

@media screen and (max-width: 440px) {
    #result_efw {
        padding: var(--space-card-padding);
        font-size: 16px;
    }

    .efwgraph-chart-wrap {
        margin-inline: -0.6rem;
    }

    .efwgraph-chart {
        min-height: 185px;
    }

    .efwgraph-control {
        padding: 0.55rem 0;
    }

    .efwgraph-measured-control input {
        width: 6.5rem;
        height: 2.25rem;
    }

}

/* EFW card (end) */

/* style footer */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-page-gap);
}

#footer1 {
    padding: var(--space-footer-padding);

    width: fit-content;

    display: flex;
    flex-direction: column;
}

#footer1-1,
#footer1-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#footer1-2 {
    font-size: 0.9rem;
}

#footer2 {
    /* 註：下方考慮留空間=>為了iPhone不要被最下方bar擋住 */
    display: flex;
    flex-direction: row;
}

#addline {
    height: 1.2rem;
    width: 1.2rem;
    vertical-align: middle;
}

/* RWD: 要先大再小(因為後面的規則會覆蓋前面的) */
/* 這個max-width要抓前面#appLayout設定width的px! */
@media screen and (max-width: 530px) {
    html {
        font-size: 18px;
    }

    input {
        /* 這樣mobile才不會auto zoom */
        /* input行問題在前面用input type="date"的width: min-content解決 */
        font-size: 16px;
    }

    #mainresult,
    #result_recent {
        font-size: 16px;
    }

    .m-emphasis {
        font-size: 1.9rem;
    }

    #appLayout {
        /* smaller spacing for mobile */
        padding: var(--space-page-padding-compact);
        gap: var(--space-page-gap-compact);
    }

    #mainresult {
        gap: var(--space-main-gap-compact);
    }

    #footer {
        gap: var(--space-page-gap-compact);
    }

    .mobilehide {
        display: none;
    }
}

/* 優化寬度360px的設備(最多人使用的寬度！) */
@media screen and (max-width: 440px) {
    html {
        font-size: 16px;
    }

    /* 這樣mobile才不會auto zoom */
    /* input行問題在前面用input type="date"的width: min-content解決 */
    input {
        font-size: 16px;
    }

    #mainresult,
    #result_recent {
        font-size: 16px;
    }

    #header21 {
        display: none;
    }

    #header0,
    #header2 {
        position: absolute;
        top: 50%;
        display: flex;
        width: var(--size-control-height);
        margin-top: 0;
        transform: translateY(-50%);
    }

    #header0 {
        left: 0;
        z-index: 20;
    }

    #header2 {
        right: 0;
    }

    #header {
        position: relative;
        justify-content: center;
    }

    #resetbtn,
    #settingsbutton {
        width: var(--size-control-height);
        min-width: var(--size-control-height);
        padding: 0;
        border-radius: var(--radius-circle);
    }

    #resetbtn span,
    #settingsbutton span {
        display: none;
    }

    #m2edc,
    #m2edczs {
        font-size: 0.8rem;
    }

    #m2edczs1,
    #m2edczs2 {
        display: none;
    }

    input {
        padding: var(--space-input-padding-compact);
        border-radius: var(--radius-control-compact);
    }

    #lmpbutton {
        display: none !important;
    }

    #monthleft {
        gap: var(--space-control-gap);
    }

    #monthright {
        gap: var(--space-control-gap-compact);
    }
}

@media screen and (max-width: 400px) {

    #edcbutton {
        display: none !important;
    }
}

@media screen and (max-width: 375px) {

    /* result_recent還是顯示、但不需日期 */
    #card_firstsonoresult1,
    #card_firstsonoresult2,
    #card_firstbloodresult1,
    #card_firstbloodresult2,
    #card_firstdownresult1,
    #card_firstdownresult2,
    #card_amniocentesisresult1,
    #card_amniocentesisresult2,
    #card_seconddownresult1,
    #card_seconddownresult2,
    #card_sonographyresult1,
    #card_sonographyresult2,
    #card_secondsonoresult1,
    #card_secondsonoresult2,
    #card_secondbloodresult1,
    #card_secondbloodresult2,
    #card_ogttresult1,
    #card_ogttresult2,
    #card_tdapresult1,
    #card_tdapresult2,
    #card_thirdbloodresult1,
    #card_thirdbloodresult2,
    #card_thirdsonoresult1,
    #card_thirdsonoresult2,
    #card_gbsresult1,
    #card_gbsresult2 {
        display: none;
    }

    #m1,
    #m2 {
        padding: var(--space-card-padding-compact);
    }
}

@media screen and (max-width: 365px) {
    .ui-active {
        display: flex;
        flex-direction: column;
        gap: var(--space-control-gap-tight);
    }

    #input2 {
        padding: var(--space-input-area-padding-y-compact) 0;
    }
}

/* 這樣可以讓列印的時候不會有頁首跟頁尾！ */
@page {
    margin: 0;
}