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);
}

#login-form [type="email"] {
    width: 300px;
}

#login-form [type="submit"] {
    margin-left: 1rem;
}

/* 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;}
.ai_block_translation {
    background: #ffffff;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 5px;
    padding: 5px;
    overflow-wrap: anywhere;
}