/* Laravel画面の共通トークン。配備元テーマのCSSへ上書きを混在させない。 */
:root {
    --tkl-ink: #222;
    --tkl-muted: #666;
    --tkl-surface: #fff;
    --tkl-surface-muted: #f6f7f7;
    --tkl-border: #dcdcde;
    --tkl-control-border: #8c8f94;
    --tkl-action: #444;
    --tkl-action-hover: #222;
    --tkl-accent: #b7354b;
    --tkl-error: #b32d2e;
    --tkl-error-surface: #fcf0f1;
    --tkl-success-surface: #edfaef;
    --tkl-icon-surface: #f6f7f7;
    --tkl-space-1: 4px;
    --tkl-space-2: 8px;
    --tkl-space-3: 12px;
    --tkl-space-4: 16px;
    --tkl-space-6: 24px;
    --tkl-space-8: 32px;
    --tkl-radius: 4px;
    --tkl-radius-dialog: 8px;
    --tkl-control-height: 44px;
    --tkl-font-size: 16px;
    --tkl-panel-width: 760px;
    --tkl-panel-wide-width: 1120px;
    --tkl-layer-row: 2;
    --tkl-layer-head: 3;
    --tkl-layer-corner: 4;
}
.tkl-ui {
    color: var(--tkl-ink);
    font-size: var(--tkl-font-size);
    line-height: 1.7;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.tkl-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; vertical-align: -.2em; }
.tkl-inline-icon, .tkl-heading-icon { display: inline-flex; align-items: center; gap: var(--tkl-space-2); }
.tkl-heading-icon { display: flex; gap: var(--tkl-space-3); }
.tkl-heading-icon > .tkl-icon { color: var(--tkl-accent); }
.tkl-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--tkl-space-3); border-radius: var(--tkl-radius-dialog); background: var(--tkl-icon-surface); color: var(--tkl-accent); }
.tkl-ui button:has(> .tkl-icon), .tkl-ui .tkl-button:has(> .tkl-icon) { gap: var(--tkl-space-2); }
.tkl-notice > .tkl-icon { margin-right: var(--tkl-space-1); }
.tkl-workspace .main__inner {
    max-width: var(--tkl-panel-wide-width);
    box-sizing: border-box;
    padding-inline: var(--tkl-space-4);
}
.tkl-workspace-panel {
    width: 100%;
    max-width: var(--tkl-panel-width);
    box-sizing: border-box;
    margin: var(--tkl-space-6) auto;
}
.tkl-workspace-panel--wide { max-width: var(--tkl-panel-wide-width); }
.tokila-member-wide .tkl-workspace-panel { max-width: none; }
.tkl-registration-body img { max-width: 100%; height: auto; }
.art .tkl-media-credit { color: var(--tkl-muted); font-size: 1.4rem; line-height: 1.5; margin-top: var(--tkl-space-2); overflow-wrap: anywhere; }
.art__cont figure > img { max-width: 100%; height: auto; }
.tkl-ui h1, .tkl-ui h2, .tkl-ui h3, .tkl-ui h4, .tkl-ui h5 { text-wrap: balance; line-height: 1.45; font-weight: 700; }
.tkl-ui h1 { font-size: 1.75em; margin: var(--tkl-space-6) 0 var(--tkl-space-4); }
.tkl-ui h2 { font-size: 1.25em; margin: var(--tkl-space-6) 0 var(--tkl-space-3); }
.tkl-ui h3, .tkl-ui h4, .tkl-ui h5 { font-size: 1.1em; margin: var(--tkl-space-4) 0 var(--tkl-space-2); }
.tkl-ui p { text-wrap: pretty; margin: var(--tkl-space-3) 0; }
.tkl-ui section, .tkl-ui details { margin-block: var(--tkl-space-6); }
.tkl-ui label { display: block; margin: var(--tkl-space-4) 0 var(--tkl-space-2); }
.tkl-ui input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.tkl-ui select, .tkl-ui textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--tkl-control-height);
    padding: var(--tkl-space-2) var(--tkl-space-3);
    border: 1px solid var(--tkl-control-border);
    border-radius: var(--tkl-radius);
    background: var(--tkl-surface);
    color: var(--tkl-ink);
    font: inherit;
}
.tkl-ui textarea { min-height: 120px; resize: vertical; }
.tkl-ui input[type=checkbox], .tkl-ui input[type=radio] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0 var(--tkl-space-2) 0 0;
    accent-color: var(--tkl-action);
    vertical-align: middle;
}
.tkl-ui button, .tkl-ui .u-button, .tkl-ui .tkl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-height: var(--tkl-control-height);
    margin: var(--tkl-space-4) 0;
    padding: var(--tkl-space-2) var(--tkl-space-4);
    border: 1px solid var(--tkl-action);
    border-radius: var(--tkl-radius);
    background: var(--tkl-action);
    color: var(--tkl-surface);
    box-shadow: none;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.tkl-ui button:hover, .tkl-ui .u-button:hover, .tkl-ui .tkl-button:hover { background: var(--tkl-action-hover); opacity: 1; }
.tkl-ui button[type=button], .tkl-ui .tkl-button--secondary {
    background: var(--tkl-surface);
    color: var(--tkl-action);
    border-color: var(--tkl-control-border);
}
.tkl-ui button[type=button]:hover, .tkl-ui .tkl-button--secondary:hover { background: var(--tkl-surface-muted); }
.tkl-ui .tkl-button--danger { background: var(--tkl-error); border-color: var(--tkl-error); color: var(--tkl-surface); }
.tkl-ui button:disabled, .tkl-ui input:disabled, .tkl-ui select:disabled, .tkl-ui textarea:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.tkl-ui button+button, .tkl-ui button+a { margin-inline-start: var(--tkl-space-2); }
.tkl-ui :focus-visible { outline: 2px solid var(--tkl-accent); outline-offset: 3px; }
.tkl-ui [hidden] { display: none !important; }
.tkl-ui [aria-invalid=true] { border-color: var(--tkl-error); }
.tkl-ui fieldset { min-width: 0; padding: var(--tkl-space-4); border: 1px solid var(--tkl-border); margin-block: var(--tkl-space-4); }
.tkl-ui legend { font-weight: 600; padding-inline: var(--tkl-space-2); }
.tkl-ui summary { cursor: pointer; font-weight: 600; padding-block: var(--tkl-space-3); }
.tkl-ui img { max-width: 100%; height: auto; }
.tkl-ui dl { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: var(--tkl-space-3); padding-block: var(--tkl-space-3); border-bottom: 1px solid var(--tkl-border); }
.tkl-ui dt { font-weight: 600; }
.tkl-ui dd { min-width: 0; margin: 0; }
.tkl-ui table { width: 100%; border-collapse: collapse; text-align: left; }
.tkl-ui th, .tkl-ui td { padding: var(--tkl-space-2) var(--tkl-space-3); border-bottom: 1px solid var(--tkl-border); vertical-align: top; }
.tkl-ui caption { text-align: left; font-weight: 600; padding-block: var(--tkl-space-3); }
.tkl-ui .tkl-notice, .tkl-ui [role=status]:not([data-editorial-dirty]) {
    padding: var(--tkl-space-3) var(--tkl-space-4);
    background: var(--tkl-surface-muted);
    border-inline-start: 3px solid var(--tkl-accent);
}
.tkl-ui .tkl-notice--error { background: var(--tkl-error-surface); border-color: var(--tkl-error); }
.tkl-notice p { margin: 0; }
.tkl-notice ul { margin: var(--tkl-space-2) 0 0 1.4em; list-style: disc; }
.tkl-tabs, .tkl-ui .tkl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tkl-space-2) var(--tkl-space-4);
    margin-bottom: var(--tkl-space-6);
    padding-block: var(--tkl-space-3);
    border-bottom: 1px solid var(--tkl-border);
}
.tkl-tabs a { display: inline-flex; align-items: center; min-height: var(--tkl-control-height); }
.tkl-tabs a[aria-current=page] { color: var(--tkl-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.tkl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tkl-space-2); margin-block: var(--tkl-space-4); }
.tkl-actions button { margin: 0; }
.tokila-member-dialog-actions button { margin: 0; }
.interview-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.interview-preview-body { overflow-wrap: anywhere; }
.interview-preview-body img, .interview-preview-body iframe, .interview-preview-body video { max-width: 100%; }
.interview-staff-invitation { padding-block: var(--tkl-space-4); border-bottom: 1px solid var(--tkl-border); }
#issued-guest-url, #issued-guest-password { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tkl-actions button+button, .tkl-actions button+a { margin-inline-start: 0; }
.tkl-check, .tkl-ui .tkl-check { min-height: var(--tkl-control-height); display: flex; align-items: center; gap: var(--tkl-space-2); margin-block: var(--tkl-space-2); }
.tkl-check input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.tkl-field-grid { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(220px, 3fr); gap: var(--tkl-space-3); align-items: center; }
.tkl-field-grid label { margin: 0; }
.tkl-table-scroll { max-width: 100%; overflow: auto; }
.tkl-ui .tkl-number { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkl-ui .tkl-table--financial { min-width: 30rem; }
.tkl-ui .tkl-table--records { min-width: 36rem; }
.tkl-ui .tkl-table--financial th { white-space: nowrap; }
.tkl-ui .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
@media(max-width:640px) {
    .tkl-field-grid { grid-template-columns: 1fr; }
    .tkl-ui dl { grid-template-columns: 1fr; gap: var(--tkl-space-1); }
}

/* Shared release forms and source text in both workspaces. */
.tkl-ui .release-form { display: grid; gap: var(--tkl-space-3, 12px); }
.tkl-ui .release-form label span { font-size: .875em; font-weight: 400; }
.tkl-ui .release-plain { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.tkl-ui .release-list-item { padding-block: var(--tkl-space-4, 16px); border-bottom: 1px solid var(--tkl-border, #d8dde2); }
.tkl-ui .release-history { margin-block: 12px; }
.tkl-ui .release-history summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
.tkl-ui .release-list-item h2, .tkl-ui .release-list-item h3 { overflow-wrap: anywhere; }

.brand-notices { padding: var(--tkl-space-4); margin: var(--tkl-space-6) 0; background: var(--tkl-surface-muted); border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); }
.brand-notice { padding: var(--tkl-space-4); margin-block: var(--tkl-space-4); background: var(--tkl-surface); border: 1px solid var(--tkl-border); }
.brand-notice-body { white-space: pre-wrap; }
.brand-notice-date { color: var(--tkl-muted); }

/* Article discussion uses the same controls and spacing in every workspace. */
.article-discussion { margin-block: var(--tkl-space-6); padding: var(--tkl-space-4); border: 1px solid var(--tkl-border); border-radius: var(--tkl-radius); background: var(--tkl-surface); }
.comment-thread { padding-block: var(--tkl-space-4); border-top: 1px solid var(--tkl-border); }
.tkl-ui .public-comment { padding-block: var(--tkl-space-3); min-width: 0; }
.tkl-ui .public-comment header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tkl-space-2) var(--tkl-space-4); }
.tkl-ui .public-comment strong { overflow-wrap: anywhere; }
.tkl-ui .public-comment time, .comment-reply-target { color: var(--tkl-muted); font-size: .875em; }
.comment-body { overflow-wrap: anywhere; line-height: 1.8; }
.comment-body--plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-body pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.comment-reply { min-width: 0; margin-inline-start: var(--tkl-space-2); padding-inline-start: var(--tkl-space-3); border-inline-start: 2px solid var(--tkl-border); }
.comment-unavailable { color: var(--tkl-muted); }
.comment-pagination { justify-content: space-between; }

/* 認可した利用者原稿の読み取り表示。 */
.portal-body { overflow-wrap: anywhere; }
.portal-body ul, .portal-body ol { padding-inline-start: 1.5em; }
.portal-body blockquote { margin-inline: 0; padding-inline-start: 1em; border-inline-start: 3px solid var(--tkl-control-border); }
.portal-body cite { display: block; font-size: .9em; color: var(--tkl-muted); }