/* Shared roles stay inert until a target page opts in with this class. */
.twl-v3-content {
  color: var(--Text-Neutral-primary);
}

.twl-v3-content .twl-v3-page-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family);
  font-size: var(--Title-Page-font-size-lg);
  font-weight: 700;
  line-height: 1;
}

.twl-v3-content .twl-v3-section-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family);
  font-size: var(--Heading-font-size-md);
  font-weight: 500;
  line-height: 1;
}

.twl-v3-content .twl-v3-action {
  color: var(--Text-Neutral-primary);
  font-family: var(--Action-font-family);
  font-size: var(--Action-font-size-lg);
  font-weight: 500;
  line-height: 1;
}

.twl-v3-content .twl-v3-body {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family);
  font-size: var(--Body-font-size-lg);
  font-weight: 500;
  line-height: var(--Body-font-line-height-lg);
}

/* Interactive states override legacy site.css colors only inside migrated pages. */
.twl-v3-content .btn-tunwalai:hover {
  background-color: var(--Background-Brand-hover) !important;
  color: var(--Text-Static-white) !important;
}

.twl-v3-content .btn-tunwalai:active,
.twl-v3-content .btn-tunwalai.active {
  background-color: var(--Background-Brand-active) !important;
  color: var(--Text-Static-white) !important;
}

.twl-v3-content .btn-tunwalai:focus {
  background-color: var(--Background-Brand-default) !important;
  color: var(--Text-Static-white) !important;
}

.twl-v3-content .btn-tunwalai-outline:hover {
  background-color: var(--Background-Brand-subtle) !important;
  border-color: var(--Border-Brand-hover) !important;
  color: var(--Text-Brand-hover) !important;
}

.twl-v3-content .btn-tunwalai-outline:active,
.twl-v3-content .btn-tunwalai-outline.active {
  background-color: var(--Background-Brand-subtle-active) !important;
  border-color: var(--Border-Brand-active) !important;
  color: var(--Text-Brand-active) !important;
}

.twl-v3-content .btn-tunwalai-outline:focus {
  background-color: var(--Background-Brand-subtle) !important;
  border-color: var(--Border-Brand-default) !important;
  color: var(--Text-Brand-default) !important;
}

.twl-v3-content .btn-tunwalai:focus-visible,
.twl-v3-content .btn-tunwalai-outline:focus-visible,
.twl-v3-content .btn:focus-visible,
.twl-v3-content a:focus-visible,
.twl-v3-content button:focus-visible,
.twl-v3-content input:focus-visible,
.twl-v3-content select:focus-visible,
.twl-v3-content textarea:focus-visible,
.twl-v3-content [tabindex]:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--Border-Brand-focus);
  outline-offset: 2px;
}

.twl-v3-content a:focus-visible {
  color: var(--Text-Brand-default);
  text-decoration: underline;
}

.twl-v3-content .form-control:focus,
.twl-v3-content .form-select:focus,
.twl-v3-content .select2-container--focus .select2-selection,
.twl-v3-content .select2-container--open .select2-selection {
  border-color: var(--Border-Brand-focus) !important;
  box-shadow: none !important;
}

/* Shared Razor partials still emit legacy styles after the page stylesheet. */
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-info-box {
  background-color: var(--Base-bg-raised, #ffffff);
  border-color: var(--Border-Neutral-subtle, #e4e5e7);
  color: var(--Text-Neutral-primary, #070708);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-info-name {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-sm, 24px);
  font-weight: 700;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-info-collapse-text {
  color: var(--Text-Brand-default, #e85d45);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px) !important;
  font-weight: 500;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-support-message,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-support-message :where(p, span, li, a) {
  color: var(--Text-Neutral-secondary, #44464b) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-lg, 16px) !important;
  line-height: var(--Body-font-line-height-lg, 24px);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-header,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comments > h2,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .pin-comment > h2 {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-commenter,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) #commenter-name {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-message,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .ql-container,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .ql-editor {
  color: var(--Text-Neutral-secondary, #44464b);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-chapter,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .table-no-data-text,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .ql-editor.ql-blank::before {
  color: var(--Text-Neutral-tertiary, #6d7078);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-reply-button {
  color: var(--Text-Brand-default, #e85d45);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-reply-button .icon-tunwalai-line-arrow-left {
  background-color: currentColor;
  display: block;
  flex-shrink: 0;
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.6666%2015V13.3333C16.6666%2012.4493%2016.3154%2011.6014%2015.6903%2010.9763C15.0652%2010.3512%2014.2173%2010%2013.3333%2010H3.33325%22%20stroke%3D%22black%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.49992%2014.1667L3.33325%2010L7.49992%205.83334%22%20stroke%3D%22black%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.6666%2015V13.3333C16.6666%2012.4493%2016.3154%2011.6014%2015.6903%2010.9763C15.0652%2010.3512%2014.2173%2010%2013.3333%2010H3.33325%22%20stroke%3D%22black%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.49992%2014.1667L3.33325%2010L7.49992%205.83334%22%20stroke%3D%22black%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  width: 20px;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-reply-button .icon-tunwalai-line-arrow-left::before {
  content: none;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .comment-row,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) #commentEditor,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .ql-toolbar.ql-snow,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .popup-footer {
  border-color: var(--Border-Neutral-subtle, #e4e5e7);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .table-no-data,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .sticker-item {
  background-color: var(--Background-Neutral-tertiary, #f2f2f3);
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .writer-comment-badge {
  background-color: var(--Background-Brand-default, #ff775f);
  color: var(--Text-Static-white, #ffffff);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-sm, 14px);
  font-weight: 700;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page, .comic-detail-page, .ebook-detail-page) .comment-signup {
  background-color: var(--Background-Brand-subtle, #fff3f0);
  border: none;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page, .comic-detail-page, .ebook-detail-page) .comment-signup p {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica, "DB HelvethaicaMon X", sans-serif));
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .modal-info-message,
:is(.story-detail-page, .profile-detail-page, .chapter-reader-page) .med-16-black {
  color: var(--Text-Neutral-secondary, #44464b);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

:is(.story-detail-page, .profile-detail-page) .modal-info-title,
.chapter-reader-page .modal-info-title:not(.chapter-reader-paper .modal-info-title, .chapter-reader-drawer-settings .modal-info-title) {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
}

:is(.story-detail-page, .profile-detail-page) .modal-content,
.chapter-reader-page .modal-content:not(.chapter-reader-paper .modal-content, .chapter-reader-drawer-settings .modal-content) {
  background-color: var(--Base-bg-raised, #ffffff);
  color: var(--Text-Neutral-primary, #070708);
}

.twl-v3-library,
.twl-v3-explore,
.twl-v3-dashboard,
.twl-v3-tunlist,
.twl-v3-create {
  --twl-v3-content-text: var(--Text-Neutral-primary);
}

:is(.twl-v3-dashboard, .twl-v3-explore, .twl-v3-library) .badge-finish:not(.badge-img-icon),
body.profile-detail-page .badge-finish:not(.badge-img-icon) {
  background-color: var(--Background-Brand-secondary, #e85d45);
  color: var(--Base-on-color, #ffffff);
}


/* Library Scoped Overrides */
.twl-v3-library .sub-header.active,
.twl-v3-library .sub-header-menu.active {
  color: var(--Text-Brand-default);
}

.twl-v3-library .form-control::placeholder,
.twl-v3-library .form-control::-moz-placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.twl-v3-library .nodata .empty-state-title,
.twl-v3-library .nodata .f-size-lg,
.twl-v3-library .nodata h3 {
  color: var(--Text-Neutral-primary);
}

/* Dashboard / writer report — brand-subtle bleeds through main + footer (same as chapter reader). */
body:has(.twl-v3-dashboard),
body:has(.twl-v3-dashboard) #main-body,
body:has(.twl-v3-dashboard) footer.home-footer,
body:has(.report-menu),
body:has(.report-menu) #main-body,
body:has(.report-menu) footer.home-footer,
body:has(.writer-tip-dashboard),
body:has(.writer-tip-dashboard) #main-body,
body:has(.writer-tip-dashboard) footer.home-footer,
body:has(#main-body.body-bg-color),
body:has(#main-body.body-bg-color) #main-body,
body:has(#main-body.body-bg-color) footer.home-footer {
  background-color: var(--Background-Brand-subtle, #fff3f0) !important;
}

.twl-v3-dashboard .section-main-title {
  color: var(--Text-Neutral-primary, #070708);
}

.twl-v3-dashboard .report-menu .left-menu-item {
  color: var(--Text-Neutral-primary, #070708);
}

.twl-v3-dashboard .report-menu .collapse.f-small-55 a {
  color: var(--Text-Neutral-secondary, #44464b);
}

.twl-v3-dashboard .menu-sub-item {
  color: var(--text-tertiary);
}

.twl-v3-dashboard .menu-sub-item.active {
  color: var(--Text-Brand-default);
}

.twl-v3-dashboard .dataTables_wrapper .dataTables_paginate {
  color: var(--Text-Neutral-primary);
}

.twl-v3-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.twl-v3-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--Background-Brand-default);
  color: var(--Text-Static-white) !important;
}

.twl-v3-dashboard .card--table,
.twl-v3-dashboard table.dataTable tbody td,
.twl-v3-dashboard .border-gray-left,
.twl-v3-dashboard .create-chapter-option {
  border-color: var(--Border-Neutral-subtle);
}

/* Tunlist detail and owner views — Figma 2059:18468. */
.twl-v3-tunlist-detail .card-tunlist h1,
.twl-v3-tunlist-detail .card-tunlist h2 {
  color: var(--Text-Neutral-primary);
}

.twl-v3-tunlist-detail .chapter-header {
  color: var(--Text-Neutral-primary);
}

/* Story and comic create/edit forms — Figma 2059:18289. */
.twl-v3-create .twl-v3-create-page-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family);
  font-size: var(--Title-Page-font-size-lg);
  font-weight: 700;
  line-height: 1;
}

.twl-v3-create .f-normal-65,
.twl-v3-create .form-check-label {
  font-family: var(--Action-font-family);
  font-weight: 500;
}

.twl-v3-create .f-small-55,
.twl-v3-create .ai-generated-confirmation-message {
  color: var(--text-tertiary);
  font-family: var(--Body-font-family);
  font-size: var(--Body-font-size-lg);
  font-weight: 500;
  line-height: var(--Body-font-line-height-lg);
}

.twl-v3-create .form-control,
.twl-v3-create .form-select,
.twl-v3-create .ql-toolbar.ql-snow,
.twl-v3-create .bubble-body,
.twl-v3-create .hr-seperate-content {
  border-color: var(--Border-Neutral-subtle);
}

.twl-v3-create .form-control::placeholder,
.twl-v3-create .form-control::-moz-placeholder,
.twl-v3-create .ql-editor.ql-blank::before {
  color: var(--text-tertiary);
  font-family: var(--twl-font-mn-paethai);
  font-size: var(--Body-font-size-xlg);
  font-weight: 400;
  opacity: 1;
}

.twl-v3-create .writer-font {
  color: var(--Text-Brand-default);
  font-family: var(--Action-font-family);
  font-size: var(--Action-font-size-lg);
  font-weight: 500;
}

.twl-v3-create .writer-font.active {
  background-color: var(--Background-Brand-default);
  color: var(--Text-Static-white);
}

/* Novel and comic chapter editors — Figma 2059:18289. */
.twl-v3-chapter-editor .story-title,
.twl-v3-chapter-editor .comic-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.twl-v3-chapter-editor .chapter-detail-header,
.twl-v3-chapter-editor label,
.twl-v3-chapter-editor .f-normal-65 {
  font-family: var(--Action-font-family);
  font-weight: 500;
}

.twl-v3-chapter-editor .form-control,
.twl-v3-chapter-editor .form-select,
.twl-v3-chapter-editor .ql-toolbar.ql-snow,
.twl-v3-chapter-editor .dropzone,
.twl-v3-chapter-editor .hr-seperate-content {
  border-color: var(--Border-Neutral-subtle);
}

.twl-v3-chapter-editor .text-url-gold,
.twl-v3-chapter-editor .text-primary,
.twl-v3-chapter-editor .writer-font {
  color: var(--Text-Brand-default) !important;
}

.twl-v3-chapter-editor .writer-font.active {
  color: var(--Base-bg-on-color, var(--background-on-color, #fff)) !important;
}

.twl-v3-chapter-editor .text-gray,
.twl-v3-chapter-editor .f-small-55 {
  color: var(--text-tertiary) !important;
  font-family: var(--Body-font-family);
}