/* =============================================================================
   File:        usin.css
   Description: Usin theme for the YOURLS 1.10.x interface (admin, login,
                public statistics). Applies the CFE Énergies charter on top of
                the core stylesheets (style.css, tablesorter.css, infos.css,
                share.css), which are loaded before this file.
   Rules:       - Colours come only from cfe-tokens.css (--cfe-*), no hard-coded hex.
                - 60 % neutrals, 30 % bleu nuit, 10 % magenta.
                - Magenta is reserved for actions: CTA, active state, focus.
                - Links in bleu ardoise, hover in bleu nuit.
   Author:      EfcyLab
   Version:     1.2.0
   Since:       2026-10-06
   Changelog:   1.2.0 (2026-10-09) Delete confirmation dialog centered and fluid
                (the page gutter rule had overridden its auto margins).
                1.1.0 (2026-10-07) Share boxes: fluid layout instead of the core
                fixed height (content was clipped).
                1.0.0 (2026-10-06) Initial theme.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Local tokens derived from the charter
   ----------------------------------------------------------------------------- */
.usin-theme {
  --usin-gutter: 28px;
  --usin-focus-ring: 0 0 0 .25rem var(--cfe-rose-pale);
  --usin-row-hover: var(--cfe-page);
  --usin-on-dark-muted: var(--cfe-bleu-brume);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .usin-theme {
    /* Charter value: rgba(248, 191, 222, .65), i.e. rose pâle at 65 %. */
    --usin-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--cfe-rose-pale) 65%, transparent);
    --usin-row-hover: color-mix(in srgb, var(--cfe-bleu-brume) 25%, var(--cfe-surface));
  }
}

/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */
body.usin-theme {
  margin: 0;
  padding: 24px 16px;
  background: var(--cfe-page);
  color: var(--cfe-anthracite);
  font-family: var(--cfe-font-body);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.usin-theme div,
.usin-theme p,
.usin-theme td {
  font-family: var(--cfe-font-body);
  font-size: inherit;
}

.usin-theme #wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 var(--usin-gutter);
  overflow: hidden;
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-md);
}

.usin-theme #wrap > :not(.usin-header, nav, dialog) {
  margin-left: var(--usin-gutter);
  margin-right: var(--usin-gutter);
}

.usin-theme h2,
.usin-theme h3,
.usin-theme h4 {
  font-family: var(--cfe-font-display);
  font-weight: 600;
  color: var(--cfe-bleu-nuit);
  letter-spacing: -.01em;
  line-height: 1.25;
}

.usin-theme h2 { font-size: 1.5rem; }
.usin-theme h3 { font-size: 1.2rem; }

.usin-theme a,
.usin-theme a:link,
.usin-theme a:visited,
.usin-theme a:active {
  color: var(--cfe-bleu-ardoise);
  text-decoration: none;
}

.usin-theme a:hover {
  color: var(--cfe-bleu-nuit);
  text-decoration: underline;
}

.usin-theme a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--usin-focus-ring);
}

.usin-theme code,
.usin-theme tt {
  padding: 0 4px;
  background: var(--cfe-page);
  border: 1px solid var(--cfe-line);
  border-radius: 4px;
  font-family: var(--cfe-font-mono);
  font-size: .9em;
}

/* -----------------------------------------------------------------------------
   3. Header (bleu nuit band) and navigation
   ----------------------------------------------------------------------------- */
.usin-header {
  padding: 18px var(--usin-gutter) 14px;
  background: var(--cfe-bleu-nuit);
}

.usin-theme .usin-header__title {
  float: none;
  max-width: none;
  margin: 0;
}

.usin-theme a.usin-brand,
.usin-theme a.usin-brand:link,
.usin-theme a.usin-brand:visited {
  display: inline-flex;
  float: none;
  align-items: center;
  gap: 14px;
  color: var(--cfe-blanc);
  text-align: left;
  text-decoration: none;
}

.usin-brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--cfe-radius-sm);
  box-shadow: 0 0 0 1px var(--cfe-bleu-ardoise);
}

.usin-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.usin-brand__name {
  font-family: var(--cfe-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.usin-brand__tagline {
  margin-top: 4px;
  color: var(--usin-on-dark-muted);
  font-family: var(--cfe-font-mono);
  font-size: .75rem;
  font-weight: 400;
}

.usin-theme nav[role="navigation"] {
  padding: 0 var(--usin-gutter);
  background: var(--cfe-bleu-nuit);
  border-top: 1px solid var(--cfe-bleu-ardoise);
}

.usin-theme ul#admin_menu {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.usin-theme ul#admin_menu > li {
  position: relative;
  padding: 0;
  color: var(--usin-on-dark-muted);
}

.usin-theme ul#admin_menu li:hover {
  list-style-type: none;
  color: var(--cfe-blanc);
}

.usin-theme ul#admin_menu > li > a,
.usin-theme ul#admin_menu > li > a:link,
.usin-theme ul#admin_menu > li > a:visited {
  display: inline-block;
  padding: 12px 0 10px;
  color: var(--cfe-blanc);
  text-decoration: none;
}

.usin-theme ul#admin_menu > li > a:hover {
  color: var(--cfe-blanc);
  text-decoration: underline;
}

/* Greeting + logout link pushed to the right edge. */
.usin-theme #admin_menu_logout_link {
  order: 99;
  margin-left: auto;
  align-self: center;
  padding: 8px 0;
  font-size: .85rem;
}

.usin-theme #admin_menu_logout_link a,
.usin-theme #admin_menu_logout_link a:visited {
  color: var(--usin-on-dark-muted);
  text-decoration: underline;
}

/* Active item: magenta rule (signature detail), mapped from the page context class. */
.usin-theme.index #admin_menu_admin_link > a,
.usin-theme.tools #admin_menu_tools_link > a,
.usin-theme.plugins #admin_menu_plugins_link > a {
  box-shadow: inset 0 -3px 0 var(--cfe-magenta);
}

/* Plugin sub-pages: dropdown under "Manage plugins", reachable with the keyboard. */
.usin-theme ul#admin_menu li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-sm);
}

.usin-theme ul#admin_menu li:hover > ul,
.usin-theme ul#admin_menu li:focus-within > ul {
  display: block;
}

.usin-theme ul#admin_menu li > ul li a {
  display: block;
  padding: 6px 14px;
  color: var(--cfe-bleu-ardoise);
}

/* -----------------------------------------------------------------------------
   4. Forms and buttons
   ----------------------------------------------------------------------------- */
.usin-theme input.text,
.usin-theme input[type="text"],
.usin-theme input[type="password"],
.usin-theme input[type="number"],
.usin-theme select,
.usin-theme textarea {
  margin: 2px 0;
  padding: 8px 10px;
  color: var(--cfe-anthracite);
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-gris);
  border-radius: var(--cfe-radius-sm);
  font-family: var(--cfe-font-body);
  font-size: .95rem;
}

.usin-theme input.text:focus,
.usin-theme input[type="text"]:focus,
.usin-theme input[type="password"]:focus,
.usin-theme input[type="number"]:focus,
.usin-theme select:focus,
.usin-theme textarea:focus {
  margin: 2px 0;
  outline: none;
  border: 1px solid var(--cfe-magenta);
  box-shadow: var(--usin-focus-ring);
}

/* Secondary buttons: bleu ardoise outline. */
.usin-theme input.button,
.usin-theme button.button,
.usin-theme input[type="submit"],
.usin-theme input[type="button"] {
  padding: 8px 16px;
  color: var(--cfe-bleu-ardoise);
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-bleu-ardoise);
  border-radius: var(--cfe-radius-sm);
  font-family: var(--cfe-font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.usin-theme input.button:hover,
.usin-theme button.button:hover,
.usin-theme input[type="submit"]:hover,
.usin-theme input[type="button"]:hover {
  color: var(--cfe-blanc);
  background: var(--cfe-bleu-ardoise);
}

/* Primary call to action: magenta, one per screen ("Shorten", "Log in"). */
.usin-theme #add-button,
.usin-theme #login #submit {
  color: var(--cfe-blanc);
  background: var(--cfe-magenta);
  border-color: var(--cfe-magenta);
}

.usin-theme #add-button:hover,
.usin-theme #login #submit:hover {
  color: var(--cfe-blanc);
  background: var(--cfe-magenta);
  filter: brightness(.92);
}

/* Other core "primary" buttons (e.g. search filter): filled bleu ardoise,
   so that magenta stays unique on the screen. */
.usin-theme input.primary:not(#add-button) {
  color: var(--cfe-blanc);
  background: var(--cfe-bleu-ardoise);
  border-color: var(--cfe-bleu-ardoise);
}

.usin-theme input.primary:not(#add-button):hover {
  background: var(--cfe-bleu-nuit);
  border-color: var(--cfe-bleu-nuit);
}

.usin-theme input.button:focus-visible,
.usin-theme button.button:focus-visible,
.usin-theme input[type="submit"]:focus-visible,
.usin-theme input[type="button"]:focus-visible {
  outline: none;
  box-shadow: var(--usin-focus-ring);
}

.usin-theme #add-button.disabled,
.usin-theme #add-button.loading {
  color: var(--cfe-anthracite);
  background-color: var(--cfe-gris);
  border-color: var(--cfe-gris);
  filter: none;
}

/* -----------------------------------------------------------------------------
   5. "Shorten a link" panel
   ----------------------------------------------------------------------------- */
.usin-theme #new_url {
  margin-top: var(--usin-gutter);
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.usin-theme #new_url > div {
  padding: 18px 20px;
  background: var(--cfe-page);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-md);
}

.usin-theme #new_url_form {
  padding: 0;
}

.usin-theme #new_url_form > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0;
  background: transparent;
}

.usin-theme #add-url {
  flex: 1 1 320px;
  width: auto;
}

.usin-theme #add-keyword {
  width: 10rem;
  font-family: var(--cfe-font-mono);
}

.usin-theme #new_url #feedback {
  width: auto;
  margin: 14px 0 0;
  padding: 10px 14px;
  color: var(--cfe-anthracite);
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-sm);
}

.usin-theme #new_url #feedback .fail {
  color: var(--cfe-err);
}

/* -----------------------------------------------------------------------------
   6. Tables (link list, plugins, statistics)
   ----------------------------------------------------------------------------- */
.usin-theme table.tblSorter {
  margin: 16px 0 0;
  overflow: hidden;
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--cfe-radius-md);
  font-family: var(--cfe-font-body);
  font-size: .9rem;
}

.usin-theme table.tblSorter thead tr th,
.usin-theme table.tblSorter th.header {
  padding: 10px 12px;
  color: var(--cfe-bleu-nuit);
  background-color: var(--cfe-bleu-brume);
  border: 0;
  font-family: var(--cfe-font-mono);
  font-size: .8rem;
  font-weight: 500;
}

.usin-theme table.tblSorter thead tr .tablesorter-headerAsc,
.usin-theme table.tblSorter thead tr .tablesorter-headerDesc {
  background-color: var(--cfe-bleu-brume);
  box-shadow: inset 0 -3px 0 var(--cfe-magenta);
}

.usin-theme table.tblSorter tbody td {
  padding: 10px 12px;
  color: var(--cfe-anthracite);
  background-color: var(--cfe-surface);
  border-bottom: 1px solid var(--cfe-line);
}

.usin-theme table.tblSorter tbody tr.normal-row td {
  background: var(--cfe-page);
}

.usin-theme table.tblSorter tbody tr.normal-row:hover td,
.usin-theme table.tblSorter tbody tr.alt-row:hover td {
  background-color: var(--usin-row-hover);
}

.usin-theme table.tblSorter tbody td.keyword,
.usin-theme table.tblSorter tbody td.timestamp,
.usin-theme table.tblSorter tbody td.ip,
.usin-theme table.tblSorter tbody td.clicks {
  font-family: var(--cfe-font-mono);
  font-size: .85rem;
}

.usin-theme table.tblSorter tfoot tr,
.usin-theme table.tblSorter tfoot tr th {
  padding: 12px;
  color: var(--cfe-anthracite);
  background-color: var(--cfe-page);
  border: 0;
}

.usin-theme #main_table tfoot th,
.usin-theme #main_table tfoot th div {
  font-size: .85rem;
}

.usin-theme tr.edit-row td {
  background: var(--cfe-page) !important;
}

.usin-theme td.url small a {
  color: var(--cfe-anthracite);
}

/* Row action icons (core SVG icons kept, frame aligned on the charter). */
.usin-theme td.actions .button {
  width: 28px;
  height: 28px;
  margin-right: 6px;
  padding: 0;
  background-color: var(--cfe-surface);
  background-size: 16px 16px;
  border: 1px solid var(--cfe-line);
  border-radius: 8px;
}

.usin-theme td.actions .button:hover {
  border-color: var(--cfe-bleu-ardoise);
}

.usin-theme td.actions .button:focus-visible {
  outline: none;
  box-shadow: var(--usin-focus-ring);
}

/* Pagination. */
.usin-theme .navigation .nav_link a,
.usin-theme .navigation .nav_current {
  min-width: 28px;
  padding: 4px 8px;
  border: 1px solid var(--cfe-line);
  border-radius: 8px;
}

.usin-theme .navigation .nav_current {
  color: var(--cfe-blanc);
  background: var(--cfe-bleu-nuit);
  border-color: var(--cfe-bleu-nuit);
}

.usin-theme .navigation .nav_link a:hover {
  background: var(--cfe-page);
  border-color: var(--cfe-bleu-ardoise);
}

/* -----------------------------------------------------------------------------
   7. Messages and states (functional colours, never brand pink)
   ----------------------------------------------------------------------------- */
.usin-theme .notice {
  width: auto;
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--cfe-page);
  border: 1px solid var(--cfe-line);
  border-left: 4px solid var(--cfe-bleu-ardoise);
  border-radius: var(--cfe-radius-sm);
}

.usin-theme .error   { color: var(--cfe-err);  background: var(--cfe-err-bg); }
.usin-theme .warning { color: var(--cfe-warn); background: var(--cfe-warn-bg); }
.usin-theme .success { color: var(--cfe-ok);   background: var(--cfe-ok-bg); }

.usin-theme .jquery-notify-bar {
  color: var(--cfe-anthracite);
  background-color: var(--cfe-surface);
  border-bottom: 1px solid var(--cfe-line);
  font-family: var(--cfe-font-body);
  font-size: 1rem;
  text-shadow: none;
}

.usin-theme .jquery-notify-bar.success {
  color: var(--cfe-ok);
  background-color: var(--cfe-ok-bg);
}

.usin-theme .jquery-notify-bar.error,
.usin-theme .jquery-notify-bar.fail {
  color: var(--cfe-err);
  background-color: var(--cfe-err-bg);
}

/* Delete confirmation dialog: centered by the browser (modal <dialog>, margin
   auto), fluid width, height fitted to content; the core fixed sizes (50em x 19em
   and calc() widths on the inner blocks) are neutralized. */
.usin-theme #delete-confirm-dialog {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 32px));
  /* fit-content (not auto): a modal dialog is pinned top and bottom, auto would stretch it. */
  height: fit-content;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--cfe-anthracite);
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-md);
}

.usin-theme #delete-confirm-dialog > div {
  box-sizing: border-box;
  width: auto;
  height: auto;
  float: none;
}

.usin-theme #delete-confirm-dialog > div[name="dialog_title"] {
  padding: 14px 24px;
  color: var(--cfe-blanc);
  background-color: var(--cfe-bleu-nuit);
  font-family: var(--cfe-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
  border-radius: 0;
}

.usin-theme #delete-confirm-dialog div.confirm-message {
  padding: 16px 24px 8px;
  overflow: visible;
}

.usin-theme #delete-confirm-dialog div.confirm-message p {
  margin: 0 0 12px;
}

.usin-theme #delete-confirm-dialog div.confirm-message ul {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 4px solid var(--cfe-bleu-ardoise);
}

.usin-theme #delete-confirm-dialog div.confirm-message ul li {
  overflow-wrap: anywhere;
}

.usin-theme #delete-confirm-dialog div.confirm-message ul li span {
  color: var(--cfe-anthracite);
  border: 1px solid var(--cfe-line);
  font-family: var(--cfe-font-mono);
  font-size: .9em;
}

.usin-theme #delete-confirm-dialog div.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  background-color: var(--cfe-page);
  border-top: 1px solid var(--cfe-line);
  border-radius: 0;
}

/* Destructive action: functional error colour (never brand magenta). */
.usin-theme #delete-confirm-dialog div.button-group input.primary {
  color: var(--cfe-blanc);
  background: var(--cfe-err);
  border-color: var(--cfe-err);
}

.usin-theme #delete-confirm-dialog div.button-group input.primary:hover {
  background: var(--cfe-err);
  border-color: var(--cfe-err);
  filter: brightness(.9);
}

.usin-theme #delete-confirm-dialog::backdrop {
  background-color: var(--cfe-bleu-nuit);
  opacity: .6;
}

/* -----------------------------------------------------------------------------
   8. Login page
   ----------------------------------------------------------------------------- */
.usin-theme.login #wrap {
  max-width: 480px;
}

.usin-theme #login {
  max-width: 360px;
  margin: 48px auto 24px;
}

.usin-theme #login p {
  font-weight: 500;
}

.usin-theme #login .text {
  box-sizing: border-box;
  width: 100%;
}

.usin-theme #login #error-message {
  padding: 10px 14px;
  border-radius: var(--cfe-radius-sm);
}

/* -----------------------------------------------------------------------------
   9. Tools page, bookmarklets, sharing
   ----------------------------------------------------------------------------- */
.usin-theme .sub_wrap {
  max-width: 72ch;
  text-align: left;
}

.usin-theme .sub_wrap span {
  background: var(--usin-row-hover);
}

.usin-theme a.bookmarklet {
  padding: 6px 12px;
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-bleu-ardoise);
  border-radius: var(--cfe-radius-sm);
}

/* Share boxes ("Your short link" / "Quick share"): the core uses floats and a
   fixed 140px height that clips the charter typography; use a fluid grid. */
.usin-theme #shareboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 16px 0 0;
}

.usin-theme div.share,
.usin-theme #copybox,
.usin-theme #sharebox {
  float: none;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 4px 20px 16px;
  background: var(--cfe-surface);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-md);
}

.usin-theme div.share h2 {
  margin: 12px 0 10px;
  font-size: 1.15rem;
}

.usin-theme #copylink,
.usin-theme #tweet_body {
  box-sizing: border-box;
  width: 100%;
  float: none;
}

.usin-theme #copylink {
  padding-right: 60px;
  background-position: calc(100% - 10px) center;
  background-size: 40px auto;
  font-family: var(--cfe-font-mono);
  font-size: .9rem;
}

.usin-theme #tweet_body {
  height: 5em;
  font-size: .9rem;
}

.usin-theme #origlink {
  display: inline;
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.usin-theme #copylink:hover,
.usin-theme #copylink.hover {
  background-position: calc(100% - 10px) center;
}

.usin-theme #tweet {
  overflow: visible;
}

.usin-theme #share_links {
  margin: 10px 0 0;
}

.usin-theme #charcount {
  color: var(--cfe-bleu-ardoise);
}

.usin-theme #charcount.negative {
  color: var(--cfe-err);
}

/* -----------------------------------------------------------------------------
   10. Public statistics page (tabs)
   ----------------------------------------------------------------------------- */
.usin-theme #tabs ul#headers {
  border-bottom: 1px solid var(--cfe-line);
}

.usin-theme #tabs ul#headers li a,
.usin-theme #stats_lines li a {
  color: var(--cfe-bleu-ardoise);
  background: var(--cfe-page);
  border: 1px solid var(--cfe-line);
  border-radius: var(--cfe-radius-sm) var(--cfe-radius-sm) 0 0;
}

.usin-theme #tabs ul#headers li a:hover,
.usin-theme #stats_lines li a:hover {
  color: var(--cfe-bleu-nuit);
  background: var(--cfe-surface);
}

.usin-theme #tabs ul#headers li a.selected,
.usin-theme #stats_lines li a.selected {
  color: var(--cfe-bleu-nuit);
  background: var(--cfe-surface);
  border-bottom-color: var(--cfe-surface);
  box-shadow: inset 0 -3px 0 var(--cfe-magenta);
}

.usin-theme h3 span.label {
  width: 9rem;
  font-family: var(--cfe-font-mono);
  font-size: .85rem;
  font-weight: 500;
  color: var(--cfe-anthracite);
}

.usin-theme #tabs ul#headers li h2 {
  font-size: 1rem;
  font-weight: 600;
}

.usin-theme #tabs ul#headers li a {
  padding: 8px 14px 6px;
}

.usin-theme ul.toggle_display {
  border-bottom: 1px solid var(--cfe-line);
}

.usin-theme #historical_clicks li:hover {
  background: var(--usin-row-hover) !important;
}

/* -----------------------------------------------------------------------------
   11. Footer
   ----------------------------------------------------------------------------- */
.usin-theme #footer {
  margin-top: 16px;
  text-align: center;
}

.usin-theme #footer p {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px;
  color: var(--cfe-anthracite);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--cfe-font-mono);
  font-size: .75rem;
}

/* -----------------------------------------------------------------------------
   12. Landing page (site root, static index.html)
   ----------------------------------------------------------------------------- */
.usin-landing #wrap {
  max-width: 760px;
}

.usin-landing__main {
  max-width: 62ch;
  padding-top: 12px;
}

.usin-landing__main p {
  margin: 0 0 12px;
}

.usin-landing__staff {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--cfe-line);
  font-size: .9rem;
}

/* -----------------------------------------------------------------------------
   13. Small screens and motion preferences
   ----------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .usin-theme {
    --usin-gutter: 16px;
  }

  body.usin-theme {
    padding: 0;
  }

  .usin-theme #wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .usin-theme #admin_menu_logout_link {
    margin-left: 0;
  }

  .usin-theme #add-keyword {
    flex: 1 1 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usin-theme * {
    transition: none !important;
  }
}

/* End of usin.css file. */