/* ============================================================
   Home の見た目は従来（木・hero・sidebar・hub actions）のまま。
   ここは承認済みの 2 つの UX 変更に必要な分だけ：
   1. Vocabulary Pack を Home 内（hub actions の直下）で展開する
   2. Focus を setup modal から始める（月次カレンダーは無し）
   ============================================================ */

#language-hub-panel[hidden],
#focus-setup-dialog [hidden],
#focus-ws-goal[hidden] {
    display: none !important;
}

/* ---------- 1. Vocabulary Pack：hub actions の直下に全幅で展開 ---------- */
body.kanau-has-global-topbar #home-overview > #language-hub-panel.home-vocab-inline,
#home-overview > #language-hub-panel.home-vocab-inline {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 4px 0 0;
    max-width: none;
    min-height: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

#language-hub-panel.home-vocab-inline .language-setup-panel {
    min-height: 0;
}

#language-hub-panel.home-vocab-inline .home-vocab-collapse {
    display: block;
    margin: 0 0 12px auto;
}

body.language-study-wide:has(#home-overview > #language-hub-panel) {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- 2. Focus：setup で決めた goal を timer の下に一行だけ ---------- */
.revision-focus-goal {
    color: #5c6b5f;
    font: italic 400 17px/1.45 Georgia, 'Times New Roman', serif;
    margin: 4px auto 14px;
    max-width: 520px;
    text-align: center;
}

/* ---------- 2. Focus setup modal ---------- */
.ku-dialog {
    --ku-paper: #FFFDF8;
    --ku-line: #E3DCCD;
    --ku-line-strong: #CFC6B4;
    --ku-sage-soft: #E9EFE7;
    --ku-sage-ink: #52705A;
    --ku-forest: #1F3D2E;
    --ku-forest-hover: #2B5240;
    --ku-ink: #1F2A22;
    --ku-muted: #66736A;
    --ku-sans: 'Inter', 'Hiragino Kaku Gothic ProN', system-ui, -apple-system, sans-serif;
    --ku-serif: Georgia, 'Times New Roman', 'Hiragino Mincho ProN', serif;
    background: var(--ku-paper);
    border: 1px solid var(--ku-line);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(28, 26, 23, 0.22);
    color: var(--ku-ink);
    font-family: var(--ku-sans);
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 32px);
    padding: 0;
    text-align: left;
    width: 520px;
}

.ku-dialog::backdrop {
    backdrop-filter: blur(2px);
    background: rgba(28, 26, 23, 0.36);
}

.ku-dialog[open] {
    animation: ku-dialog-in 200ms cubic-bezier(.2, .7, .2, 1);
}

@keyframes ku-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

.ku-dialog-card {
    display: grid;
    gap: 20px;
    padding: 28px;
}

.ku-dialog-head,
.ku-dialog-field,
.ku-field {
    display: grid;
    gap: 8px;
}

.ku-dialog .ku-kicker {
    color: var(--ku-sage-ink);
    font: 600 12px/1.4 var(--ku-sans);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.ku-dialog .ku-title {
    font: 400 26px/1.2 var(--ku-serif);
    margin: 0;
}

.ku-dialog .ku-field-label,
.ku-dialog kanau-topic-picker label {
    color: var(--ku-muted);
    font: 600 12px/1.4 var(--ku-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ku-dialog .ku-field-label small {
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 6px;
    text-transform: none;
}

.ku-dialog .ku-input,
.ku-dialog kanau-topic-picker select {
    background: #FFFFFF;
    border: 1px solid var(--ku-line-strong);
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--ku-ink);
    font: 400 15px/1.3 var(--ku-sans);
    height: 46px;
    letter-spacing: 0;
    padding: 0 14px;
    text-transform: none;
    width: 100%;
}

.ku-dialog kanau-topic-picker select {
    appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 12px center / 18px no-repeat,
        #FFFFFF;
    padding-right: 40px;
}

.ku-dialog .ku-input:focus,
.ku-dialog kanau-topic-picker select:focus {
    border-color: var(--ku-forest);
    box-shadow: 0 0 0 3px rgba(31, 61, 46, 0.12);
    outline: none;
}

.ku-dialog kanau-topic-picker {
    display: grid;
    gap: 8px;
}

.ku-dialog kanau-topic-picker label {
    display: grid;
    gap: 8px;
}

.ku-dialog kanau-topic-picker .topic-new {
    background: none;
    border: 0;
    color: var(--ku-forest);
    cursor: pointer;
    font: 600 14px/1 var(--ku-sans);
    justify-self: start;
    padding: 4px 0;
}

.ku-dialog kanau-topic-picker .topic-status:empty {
    display: none;
}

.ku-dialog .kanau-topic-help {
    color: var(--ku-muted);
    font: 400 13px/1.4 var(--ku-sans);
}

.ku-dialog .ku-segmented {
    background: #FFFFFF;
    border: 1px solid var(--ku-line-strong);
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    gap: 4px;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: 46px;
    padding: 4px;
}

.ku-dialog .ku-segmented button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--ku-muted);
    cursor: pointer;
    font: 600 15px/1 var(--ku-sans);
    font-variant-numeric: tabular-nums;
}

.ku-dialog .ku-segmented button:hover {
    background: var(--ku-sage-soft);
    color: var(--ku-forest);
}

.ku-dialog .ku-segmented button.is-selected {
    background: var(--ku-forest);
    color: #FBF8F2;
}

.ku-dialog .ku-custom-duration {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ku-dialog .ku-field--inline {
    align-items: center;
    color: var(--ku-muted);
    display: inline-flex;
    font: 500 14px/1 var(--ku-sans);
    gap: 8px;
}

.ku-dialog .ku-field--inline .ku-input {
    font-variant-numeric: tabular-nums;
    width: 96px;
}

.ku-dialog .ku-check {
    align-items: center;
    color: var(--ku-muted);
    cursor: pointer;
    display: inline-flex;
    font: 500 14px/1.3 var(--ku-sans);
    gap: 8px;
}

.ku-dialog .ku-check input {
    accent-color: var(--ku-forest);
    height: 16px;
    width: 16px;
}

.ku-dialog .ku-form-error {
    color: #9B3B2E;
    font: 500 14px/1.4 var(--ku-sans);
    margin: 0;
}

.ku-dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.ku-dialog .ku-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    font: 600 15px/1 var(--ku-sans);
    justify-content: center;
    min-height: 44px;
    min-width: 120px;
    padding: 0 20px;
}

.ku-dialog .ku-btn--primary {
    background: var(--ku-forest);
    border-color: var(--ku-forest);
    color: #FBF8F2;
}

.ku-dialog .ku-btn--primary:hover {
    background: var(--ku-forest-hover);
}

.ku-dialog .ku-btn--secondary {
    background: var(--ku-paper);
    border-color: rgba(31, 61, 46, 0.55);
    color: var(--ku-forest);
}

.ku-dialog .ku-btn--secondary:hover {
    background: var(--ku-sage-soft);
}

.ku-dialog :focus-visible {
    outline: 2px solid var(--ku-forest);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .ku-dialog-card {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ku-dialog[open] {
        animation: none;
    }
}