/*
 * ThisBarkingLife — Styleguide
 * Section 1: Tokens   — shared variables
 * Section 2: Personas — Dog | Narrator | Observer (TBL = default, no class)
 * Section 3: Brand    — persona-brand: American Typewriter + brand brown
 * Section 4: Admin    — persona-sysadmin: dev/admin-only UI
 *
 * All persona classes: persona-[name] / persona-[name]-[element]
 * TBL is the default persona — no class needed. styles.css is TBL.
 * styles.css = everything else (layout, components, UI, utilities)
 * See: _instructions/personas.md
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,500&family=DM+Sans:wght@400;600&display=swap');


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — TOKENS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

  /* ─── Admin / Dev environment ───────────────────────────── */
  --color-sysadmin: khaki;
  --color-devenv:   darkseagreen;

  /* ─── Brand ──────────────────────────────────────────────── */
  --font-brand:     AmericanTypeWriter, 'American Typewriter', 'Courier New', monospace;
  --color-brand:    #492b00;         /* logo, footer, brand moments */
  --color-green:    #4caf50;         /* primary action — buttons, selections */
  --color-bisque:   #ffe4c4;         /* selected state background */
  --color-amber:    #e8883a;         /* warm accent */

  /* ─── Surfaces & Text ────────────────────────────────────── */
  --color-surface:        #fdf8f0;
  --color-surface-card:   #f5ede0;
  --color-text:           #2c1a0e;
  --color-text-soft:      #754700; /* softer than text, for narrator and observer*/ /*#6f4200*/
  --color-text-soft-10:   #7547001a;
    
  /* ─── Type scale ─────────────────────────────────────────── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-xxl:   36px;

  --leading-tight:   1.2;
  --leading-base:    1.5;
  --leading-loose:   1.8;

  /* ─── Spacing ────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;

  /* ─── Radius ─────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;

  /* ─── Shadows (warm brown, not cold grey) ────────────────── */
  --shadow-sm:   0 2px 5px  rgba(44, 26, 14, 0.08);
  --shadow-md:   0 4px 16px rgba(44, 26, 14, 0.12);
  --shadow-lg:   0 8px 32px rgba(44, 26, 14, 0.18);

  /* ─── Traits (see Section 5) ─────────────────────────────── */
  --color-trait:        #194297;
  --color-trait-light:  #dce5f5;

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — PERSONAS
   TBL is the default — no class needed. styles.css is TBL.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Dog ────────────────────────────────────────────────────
   First person. Font matches existing .scene-thoughts.
   Paw icon is the visual signal.                              */

@font-face {
  font-family: 'ComicSansMS';
  src: local('Comic Sans MS'),
       url('/fonts/ComicSansMS.woff2') format('woff2'),
       url('/fonts/ComicSansMS.woff') format('woff'),
       url('/fonts/ComicSansMS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ComicSansMS';
  src: local('Comic Sans MS Bold'),
       url('/fonts/ComicSansMS_Bold.woff2') format('woff2'),
       url('/fonts/ComicSansMS_Bold.woff') format('woff'),
       url('/fonts/ComicSansMS_Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
}

.persona-dog-container{
    display: inline-block;
    padding: 30px 10px;
}
.persona-dog {
    font-family: 'Comic Sans MS', ComicSansMS, 'Chalkboard SE', sans-serif;
    color: var(--color-brand); /* #312313;*/
    font-size: 1.4rem;
    text-indent: -28px;
    padding: 0 0 10px 28px;
    line-height: 1.2;
    z-index: 2; /* need to position above any mask img so that hotlinks work*/
    position: relative;
}
.persona-dog::before {
    content: "🐾 ";
}
.persona-dog.gallery {
    margin-left: 50%;
}





/* ─── Narrator ───────────────────────────────────────────────
   Storybook storyteller. Defined for future HTML text use —
   current story view is image-based.                         */

@font-face {
  font-family: 'CrimsonText';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CrimsonText-Regular.woff2') format('woff2'),
       url('/fonts/CrimsonText-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'CrimsonText';
  font-style: bold;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/CrimsonText-SemiBold.woff2') format('woff2'),
       url('/fonts/CrimsonText-SemiBold.ttf') format('truetype');
}






.persona-narrator-container { /*story-parchment */
    line-height: 1;
    position: relative;
    padding: 2.0rem 3.0rem 3.0rem 3.0rem;
    margin: 0 0 1rem 0;
    width: 100%;
    border-radius: 10px;
    transition: transform 0.2s;
    /*background-color: #f7e6be;*/
}
.persona-narrator-popup{
    position: absolute;
    left: 5px; /* align with parent <div container padding*/
    top: 0;
    padding: 2.0rem 3.0rem 2.0rem 3.0rem;
    width: calc(100% - 10px);
    transition: transform 0.2s;
    /*background-color: #f7e6be;*/
    z-index:1000;
}

.persona-narrator-popup-close{
    top: 10px;
    right: 20px;
    color: var(--color-text-soft);
    font-family: 'CrimsonText', serif;
    font-size: 2rem;
    line-height: 2rem;
    text-shadow: 2px 2px 2px lightgrey;
    position: absolute;
    padding: 0.5rem;
}

.persona-narrator-mask { /*story-parchment-mask*/
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /*box-shadow: 0 0 30px #8a4d0f inset, 0 0 15px #452607 inset; */
}


.persona-narrator { /*story-content*/
    font-family: 'CrimsonText', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.7rem;
    color: var(--color-text-soft);
    z-index: 2;
    position: relative;
    margin: 1.0rem 0;
}

.persona-narrator.dropcap {
    font-size: 65px;
    font-weight: bold;
    line-height: 0.8;
    margin: -2px 5px -3px 0;
    padding-top: 4px;
    float: left;
}

.persona-narrator.title {
    font-weight: bold;
    margin: 1rem 0;
    text-align: center;
    font-size: 26px;
}

.persona-narrator.date {
    text-align: right;
    font-size: 22px;
}

.hotlink {
    /*text-decoration: underline dashed;*/
    width: fit-content;
    border-radius: 4px;
    border-bottom: 1px dashed var(--color-text-soft);
    padding: 0px 3px;
    white-space: nowrap;
    background-color: var(--color-text-soft-10);
    /* animation: double-pulse 1s infinite; */
}
/*.hotlink-naked*/
/*.hotlink::before {
    content: "📜";
    font-size: 0.8em;
    padding-right: 2px;
}*/


/* ─── Observer ───────────────────────────────────────────────
   Factual, neutral. Italic is the signal.
   Existing styles.css treatment preserved.                   */
.persona-observer-container {
    display: inline-block;
    width: calc(100% - 20px); /* full width minus horizontal padding */
    padding:10px 0;
    margin:10px;
    border-top: solid 1px var(--color-text-soft);
}

.persona-observer {
    font-style: italic;
    font-size: var(--text-base);
    color: var(--color-text-soft);
}
.persona-observer-zonehdg{
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text-soft);
    margin: -21px 0 0 10px;
    background-color: #ffffff;
    width: fit-content;
    padding: 0 5px;  
}
.persona-observer-hdg {
    font-style: italic;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-soft);
    margin:5px 0;
}
.persona-observer-hdgsub {
    font-style: italic;
    font-size: var(--text-sm);
    font-weight: 400;
    float:right;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — BRAND
   American Typewriter + brand brown. Distinctive TBL moments.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@font-face {
  font-family: 'AmericanTypeWriter';
  src: url('/fonts/American_Typewriter.woff2') format('woff2'),
       url('/fonts/American_Typewriter.woff') format('woff'),
       url('/fonts/American_Typewriter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AmericanTypeWriter';
  src: url('/fonts/American_Typewriter_Bold.woff2') format('woff2'),
       url('/fonts/American_Typewriter_Bold.woff') format('woff'),
       url('/fonts/American_Typewriter_Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
}

.persona-brand {
    font-family: var(--font-brand);
    color: var(--color-brand);
}

.persona-brand-text {
    font-family: var(--font-brand);
    color: var(--color-brand);
    padding: 0 1rem;
}

.footer {
    border-top: 1px solid var(--color-brand);
    color: var(--color-brand);
    width: 100%;
    float: left;
    text-align: right;
    padding: 5px;
    font-weight: normal;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — ADMIN
   Dev and sysadmin-only UI. Controlled by PHP session flags.
   Tokens: --color-sysadmin (khaki), --color-devenv (darkseagreen)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.persona-sysadmin {
    background-color: var(--color-sysadmin) !important;
}

.persona-sysadmin-banner-devenv {
    float: left;
    text-align: center;
    padding: 2px 0.5rem;
    width: 25%;
    height: 23px;
    font-size: 0.8rem;
    background-color: var(--color-devenv);
}

.persona-sysadmin-banner {
    float: right;
    text-align: right;
    padding: 0 0.5rem;
    max-width: 75%;
    height: 23px;
    font-size: 0.8rem;
    background-color: var(--color-sysadmin);
}

.persona-sysadmin-banner select {
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #999;
}

.persona-sysadmin-search-wrap {
    position: relative;
    display: inline-block;
}

.persona-sysadmin-search {
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #999;
    width: 110px;
    font-size: 1em;
}

.persona-sysadmin-dog-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    background: white;
    border: 1px solid #999;
    border-radius: 0 0 4px 4px;
    text-align: left;
    z-index: 10003;
}

.persona-sysadmin-dog-item {
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 1px solid lightgrey;
}

.persona-sysadmin-dog-item.highlighted {
    background-color: #e8e0c0;
}

.persona-sysadmin-dog-item.active {
    background-color: var(--color-sysadmin);
    font-weight: bold;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — TRAITS
   Deep blue cognitive register. Distinct from all personas.
   Three levels:
     trait3-example  scene-level observed trait pill (smallest)
     trait2          aggregated trait pill, size scales with strength
     trait1-archetype  character archetype pill (largest, single)

   Icon: /images_back/icon-cloud-star.png
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── trait3-example: scene-level pill (show.php, personality examples panel)
   HTML: <p class="trait3-example">text</p>                    */



.traits3-popup{
    display:inline-block;
    width: 100%; /* calc(100% - 20px); full width minus horizontal padding */
    padding: 3px 6px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 1px 1px 2px var(--color-trait) inset;
    margin: 0.5em 0.5em 0.5em 0;
}
.traits3-container{
    display:inline-block;
    width: calc(100% - 20px); /* full width minus horizontal padding */
    padding:10px 0;
    margin:10px;
    border-top: solid 1px var(--color-trait);
}

.trait-example-zonehdg {
    font-size: 0.8rem;
    color: var(--color-trait);
    margin: -21px 0 0 10px;
    background-color: #ffffff;
    width: fit-content;
    border-radius: 10px;
    padding: 0 5px;    
}

.trait3-example {
    color: var(--color-trait);
    font-size: var(--text-base);
    width: fit-content;
    padding: 6px 0;
    margin: 12px 0;
    font-weight: normal;
    /*
    background: var(--color-trait-light);
    border-radius: 20px;
    border: 0.5px solid var(--color-trait);
    box-shadow: 2px 2px 4px var(--color-trait);
    */
}
.trait3-example::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 21px;
    background-image: url('/images_back/icon-cloud-star.png');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 4px;
}

.trait3-example-row{
    width:100%;
    padding: 5px 0;
    float:left;
}
.trait3-example-row .trait3-example{
    margin: 0;
}

/* ─── trait2-container: wrapper for trait2 pills (personality.php)
   Flex CSS fallback                  */

.trait2-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    min-height: 120px;
}

/* ─── trait2: aggregated trait pill (personality.php cloud)
   font-size set inline by PHP (0.85–1.7rem scaled by strength).
   All other sizing uses em so icon + padding scale automatically.
   HTML: <span class="trait2" style="font-size:Xrem;"
               data-trait="..." data-strength="N">
           <img class="icon-cloud-trait2" src="..." alt="">
           trait text
         </span>                                                */


.trait2, .trait1-archetype{
    color: var(--color-trait);
    background: var(--color-trait-light);
    border-radius: 1em;
    box-shadow: 2px 2px 5px color-mix(in srgb, var(--color-trait) 40%, transparent);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: box-shadow 0.15s;
    margin: 0 0.8em 0.4em 0;
    position: relative;
}
.trait2{
    width: min-content;
    padding: 0.35em 0.8em 0.35em 1.8em;
    border: 1px solid var(--color-trait);
}
.trait1-archetype{
    font-size: 1.5rem;
    padding: 0.5em;
    border-radius: 0;
    width: calc(100% + 20px);
    margin: -10px -10px 0.5em -10px;   
     /* negative margins to offset extra width and padding, so that the pill extends to the edges of the container */
}
.trait2.selected {
    box-shadow: 0 0 0 2px var(--color-trait), 2px 2px 6px var(--color-trait);
    z-index: 10;
    width: unset;
}
.icon-cloud-trait1{
    width: 2.0em;
    position: absolute;
    top: 5px;
    left: 8px;
}
.icon-cloud-trait2 {
    width: 1.1em;
    position: absolute;
    top:0.5em;
    left:0.5em;
}

/* ─── trait1-archetype: single prominent archetype pill
   HTML: <span class="trait1-archetype">
           <img class="icon-cloud-trait1" src="..." alt="">
           The Steady Companion
         </span>                                                */


.no-traits-message {
    text-align: center;
    color: #888;
    padding: 40px;
    font-style: italic;
}

.icon-cloud-trait {
    width: 20px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
    /* Tint grey cloud to --color-trait blue. Tune brightness() visually. */
    filter: brightness(0) saturate(100%) invert(18%) sepia(80%) saturate(8) hue-rotate(210deg) brightness(0.9);
}