a {
    cursor: pointer;
}

#right_menu .item {border-radius: 5px;}

/* Refresh actions sit immediately above their panel title, as in the Weebly UI. */
#refresh_pages_link + h2,
#store_page > .refresh_link + h2,
#footer_page > .refresh_link + h2,
#blogs_page > .refresh_link + h2 {
    margin-top: 0;
}

#page_translate .panel_title {
    margin-top: 0;
}

/* Semantic UI selector segments use a light background. */
#language_selection_options .ui.segment {
    color: rgba(0, 0, 0, .87);
}

/* The public login page also introduces the Articulation product. Give it the whole
   content area rather than the dashboard's narrow main column and empty sidebar. */
body.mobile_login_page #content {background: #f7f9fd;}
body.mobile_login_page #content > .padding_top {padding: 0;}
body.mobile_login_page #content_grid {display: block; margin: 0; padding: 0;}
body.mobile_login_page #content_column {width: 100% !important; padding: 0 !important;}
body.mobile_login_page #content_column > .padding_left {padding: 0;}
body.mobile_login_page #right_column {display: none;}

#ml_landing {max-width: 1160px; margin: 0 auto; padding: 4.5rem 2rem 5rem; font-size: 1.08rem; color: #172b4d;}
#ml_landing h1, #ml_landing h2, #ml_landing p {font-family: inherit;}
#ml_landing h1 {font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: 1.07; letter-spacing: -.045em; margin: 0 0 1.35rem; max-width: 11ch; color: #142b50;}
#ml_landing h2 {color: #172b4d;}
.ml_landing_eyebrow {color: #2465be; font-size: .78rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 1.15rem;}
.ml_landing_hero {display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5%; align-items: center; padding-bottom: 2.75rem;}
.ml_landing_lead {font-size: 1.25rem; line-height: 1.65; max-width: 32rem; color: #50617b; margin: 0 0 1.6rem;}
.ml_landing_fine {font-size: .89rem; color: #73819a;}
.ml_landing_connection {display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 0 0 3.5rem;}
.ml_landing_connection_brand {box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 1 1 0; max-width: 17rem; min-width: 0; height: 6.5rem; padding: 1.25rem; background: #fff; border: 1px solid #dce6f3; border-radius: .9rem; box-shadow: 0 12px 30px rgba(26, 59, 108, .06);}
.ml_landing_articulation_logo {display: block; width: 100%; max-width: 14rem; height: auto;}
.ml_landing_connection_arrows {flex: none; width: 3.5rem; height: 2.5rem; fill: none; stroke: #2465be; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;}
.ml_landing_multilanguage_brand {gap: .35rem; color: #172b4d; font-size: 1.25rem; font-weight: 700; white-space: nowrap;}
.ml_landing_multilanguage_brand img {display: block; flex: none; width: 4.5rem; height: 4.5rem;}
.ml_landing_benefits {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: 2.7rem 0 3.7rem; border-top: 1px solid #dce6f2;}
.ml_landing_benefit_icon {display: inline-flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: #e9f2ff; color: #2465be; font-size: 1.3rem;}
.ml_landing_benefits h2 {font-size: 1.2rem; margin: 1rem 0 .45rem;}
.ml_landing_benefits p {color: #62738d; line-height: 1.6; margin: 0;}

.ml_landing_start {padding: 2.7rem 0 3.7rem; border-top: 1px solid #dce6f2; border-bottom: 1px solid #dce6f2;}
.ml_landing_steps {max-width: 52rem; margin: 0 auto;}
.ml_landing_steps h2 {font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.16; margin: 0 0 2rem;}
.ml_landing_steps ol {display: grid; grid-template-columns: 1fr; gap: 1.5rem; list-style: none; padding: 0; margin: 0;}
.ml_landing_steps li {display: flex; gap: .75rem;}
.ml_landing_steps li > span {flex: none; min-width: 1.8rem; font-size: .84rem; font-weight: 800; color: #2465be; padding-top: .2rem;}
.ml_landing_steps strong {font-size: 1.05rem;}
.ml_landing_steps li p {color: #62738d; margin: .35rem 0 0;}
.ml_landing_requirement {color: #72809a; font-size: .84rem; margin: 1.5rem 0 0;}
.ml_landing_store {display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 4%; align-items: center; padding-top: 5rem;}
.ml_landing_store_intro {max-width: 29rem;}
.ml_landing_store_intro h2 {font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.16; margin: 0 0 1.25rem;}
.ml_landing_store_intro p:not(.ml_landing_eyebrow) {font-size: 1.1rem; line-height: 1.6; color: #62738d;}
.ml_landing_preview {min-width: 0; background: #fff; border: 1px solid #dce6f3; border-radius: 1rem; box-shadow: 0 22px 55px rgba(26, 59, 108, .11); padding: 1.3rem; transform: rotate(1deg);}
.ml_landing_preview_row > span {display: block; font-size: 1.15rem; font-weight: 800; color: #2465be; margin-bottom: .6rem;}
.ml_landing_preview_row a {display: block; border: 1px solid #e6ecf5; border-radius: .5rem; overflow: hidden;}
.ml_landing_preview_row a:focus-visible {outline: 2px solid #2465be; outline-offset: 2px;}
.ml_landing_preview_row img {display: block; width: 100%; height: auto;}
.ml_landing_preview_arrow {font-size: 2.8rem; line-height: 3.8rem; text-align: center; color: #2465be;}
.ml_landing_login {background: #fff; border: 1px solid #dce6f3; border-radius: 1rem; box-shadow: 0 20px 50px rgba(26, 59, 108, .09); padding: 2.25rem; scroll-margin-top: 2rem;}
.ml_landing_login h2 {font-size: 2rem; margin: 0 0 .6rem;}
.ml_landing_login > p:not(.ml_landing_eyebrow) {color: #62738d; line-height: 1.55; margin-bottom: 1.65rem;}
#login-form label {display: block; font-size: .9rem; font-weight: 700; margin-bottom: .45rem;}
#login-form [type="email"] {display: block; width: 100%; max-width: none; min-height: 3.2rem; border: 1px solid #bdcce0; border-radius: .45rem; padding: .75rem .9rem; font-size: 1rem;}
#login-form [type="email"]:focus {outline: 2px solid #8bbbf4; outline-offset: 1px;}
#login-form [type="submit"] {width: 100%; min-height: 3.2rem; margin: 1rem 0 0; color: #fff; background: #2465be; font-weight: 700;}
#login-form [type="submit"]:hover {background: #164d9d; color: #fff;}
#login-form [role="status"] {overflow-wrap: anywhere; color: #244c84; background: #eef5ff; padding: 1rem; border-radius: .5rem;}
.ml_landing_login #google-login-button {display: flex; justify-content: center;}
.ml_landing_login > p:last-of-type {text-align: center;}

@media (max-width: 900px) {
    #ml_landing {padding: 3rem 1.5rem 4rem;}
    .ml_landing_hero {gap: 2rem;}
    .ml_landing_benefits {gap: 1.5rem;}
    .ml_landing_store {grid-template-columns: 1fr; gap: 3rem;}
    .ml_landing_store_intro, .ml_landing_preview {width: 100%; max-width: 38rem; margin: 0 auto;}
}
@media (max-width: 600px) {
    body.mobile_login_page #react_app {max-width: none; margin: 0; overflow-wrap: anywhere;}
    #ml_landing {padding: 2.5rem 1rem 3rem;}
    #ml_landing h1 {font-size: clamp(2.5rem, 11vw, 3.6rem);}
    .ml_landing_hero {grid-template-columns: 1fr; gap: 2.4rem; padding-bottom: 2.5rem;}
    .ml_landing_connection {gap: .6rem; padding-bottom: 2.5rem;}
    .ml_landing_connection_brand {height: 5.5rem; padding: .65rem;}
    .ml_landing_connection_arrows {width: 2rem;}
    .ml_landing_multilanguage_brand {flex-direction: column; gap: 0; font-size: .8rem;}
    .ml_landing_multilanguage_brand img {width: 3rem; height: 3rem;}
    .ml_landing_benefits {grid-template-columns: 1fr; gap: 1.8rem; padding: 2.5rem 0;}
    .ml_landing_start {padding: 3rem 0;}
    .ml_landing_store {padding-top: 3rem;}
    .ml_landing_preview {padding: .9rem; transform: none;}
    .ml_landing_login {padding: 1.5rem;}
    body.mobile_login_page #google-login-button {max-width: 100%;}
}

#manage_websites .mobile_field_label {display: none;}

@media (max-width: 600px) {
    body.mobile_websites_page #right_menu .item:not(.last_item) {display: none;}
    body.mobile_websites_page #right_menu .last_item {font-size: 1rem; padding-left: .5rem; padding-right: 0;}
    body.mobile_websites_page #footer_holder {display: none;}
    body.mobile_websites_page #manage_websites {overflow-wrap: anywhere;}
    body.mobile_websites_page #manage_websites .websites_table,
    body.mobile_websites_page #manage_websites .websites_table tbody,
    body.mobile_websites_page #manage_websites .websites_table tr,
    body.mobile_websites_page #manage_websites .websites_table td {display: block; width: 100%;}
    body.mobile_websites_page #manage_websites .websites_table {border: 0; background: transparent;}
    body.mobile_websites_page #manage_websites .websites_table thead {display: none;}
    body.mobile_websites_page #manage_websites .websites_table tbody > tr {
        margin: 0 0 1rem;
        border: 1px solid rgba(34, 36, 38, .15);
        border-radius: .3rem;
        background: white;
        box-shadow: 0 1px 3px rgba(34, 36, 38, .08);
    }
    body.mobile_websites_page #manage_websites .websites_table td {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: .5rem;
        align-items: start;
        padding: .65rem .75rem !important;
        border-top: 1px solid rgba(34, 36, 38, .08);
    }
    body.mobile_websites_page #manage_websites .websites_table td:first-child {
        display: block;
        border-top: 0;
        font-size: 1.1rem;
        font-weight: bold;
    }
    body.mobile_websites_page #manage_websites .websites_table td:first-child .mobile_field_label {display: none;}
    body.mobile_websites_page #manage_websites .mobile_field_label {
        display: block;
        color: #777;
        font-weight: bold;
    }
    body.mobile_websites_page #manage_websites .website_cell_value {min-width: 0; overflow-wrap: anywhere;}
    body.mobile_websites_page #manage_websites .websites_table td a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    body.mobile_websites_page #manage_websites > button {min-height: 44px;}
    body.mobile_websites_page #add_website input[name="domain"] {
        width: 100%;
        max-width: 100%;
        margin: 0 0 .75rem;
    }
    body.mobile_websites_page #add_website button {min-height: 44px; margin: 0 .75rem 0 0;}
}

/* The pencil icon must not break onto its own line when the row gets tight. */
#config a.translate_content {white-space: nowrap;}
/* The translation tags read as an annotation of the row, not a column of their own: no heading,
   right up against the translate button they belong to. */
#config td.page_translation {text-align: right; padding-right: 0 !important;}
/* One line of tags, not one tag per line: page titles are long, so an auto-layout table hands
   this column its minimum width - which, wrapping, is a single tag. */
#config td.page_translation .page_translation_progress {flex-wrap: nowrap;}
/* Semantic UI tables are width:100%, and auto layout hands the slack to every column - which
   left the translate button floating in an oversized last cell. Shrink that column to its
   button and let the page title column absorb the width instead. */
#config tbody td:last-child {width: 1px;}

/* "This page is in <language>" reads as one sentence - don't let it wrap mid-phrase. */
#config td.page_language {white-space: nowrap; position: relative;}
/* The sentence stays in the flow while the selector is open (just invisible), so the column
   keeps its width and the row its height - see PageLanguage in Pages.jsx. */
#config td.page_language .page_language_placeholder {visibility: hidden;}
#config td.page_language .page_language_select {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.5em;
    right: 0.5em;
    z-index: 10;
}
/* Overrides the 300px site-language select width below: this one fits its cell. */
#config td.page_language .page_language_select [name=language] {width: 100%;}
/* --lang-color is set inline per row (PageLanguage in Pages.jsx) since it depends on the page's language. */
#config td.page_language a.page_language_link:hover {color: var(--lang-color);}

#enter_domain [name=domain] {width: 300px;}
#add_website [name=domain] {width: 300px;}
#config [name=language] {width: 300px;}

#enter_domain span, #enter_domain input, #enter_domain button {
    vertical-align: middle;
}
#enter_domain input {
    margin-left: 0.25rem;
}

#enter_domain button {
    margin-left: 1rem;
}

/* The domain reads as text until "change" is clicked - small and quiet, so it doesn't compete
   with the snippet install box below it. */
#enter_domain .change_domain {
    font-size: 0.85em;
    margin-left: 0.25rem;
}

#add_website button {
    margin-left: 0.5rem;
}

/* Page equivalencies: a linked page is the content for its language, so that column of the page
   translate table has no fields - only the header explaining where the content lives.
   See docs/articulation/equivalencies_port_plan.md. */
#page_translate th .link_page, #page_translate th .linked_page {
    display: block;
    font-weight: normal;
    margin-top: 0.35em;
}
#page_translate th .linked_page .remove_link {margin-top: 0.15em; display: block;}
#page_translate th .link_page_select {min-width: 12em; margin-top: 0.35em;}
/* These two are actions, not captions, so they carry more weight than the gray_light labels
   around them - and darker than a plain gray_link, which is nearly invisible at this size.
   Not scoped to `th`: the fully-linked message renders the same controls outside the table. */
#page_translate a.link_page, #page_translate .linked_page a.remove_link {
    font-weight: bold;
    color: #888;
}
#page_translate a.link_page:hover, #page_translate .linked_page a.remove_link:hover {color: #555;}
#config .linked_languages {margin-top: 0.15em;}

/* AI translations are made for a whole text block (mlx.TextBlockTranslation), so they show as one
   read-only cell across that block's texts until the user overrides them - same mechanism as the
   Weebly page translate view. */
.ai_content_bar {margin-bottom: 2px;}
/* Stretch the read-only box to the cell's full height, so it is as tall as the editable fields
   beside it. `height: 1px` on the cell is the usual trick that makes the child's 100% resolve. */
.ai_block_translation_cell {height: 1px;}
/* Give each language column the same label row when a block has an AI translation. The control
   stays in normal flow, so a textarea cannot paint over it. */
.ai_content_bar_slot {min-height: 1.35em; margin-bottom: 2px;}
.ai_content_bar_slot .ai_content_bar {margin-bottom: 0;}
/* Semantic UI centers table cells vertically. Keep the AI labels at the row's top instead of
   centering them in a taller neighboring cell. */
.ui.table.compact td.ai_content_bar_cell,
.ui.table.compact td.ai_block_translation_cell {vertical-align: top; padding-top: 0.25em;}
.ai_block_translation_fill {height: 100%; display: flex; flex-direction: column;}
.ai_block_translation_fill .ai_block_translation {flex: 1;}
.ai_block_translation {
    background: #ffffff;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 5px;
    padding: 5px;
    overflow-wrap: anywhere;
}